APIs

The API is events used to call the specified SPZ elements in Javascript.

The value for the syntax is a simple form:

const spzElement = document.getElementById(targetId);

SPZ.whenApiDefined(spzElement).then(api => {
  // doing something
});

Refetch data to render. It has a parameter:

• countryCode: Specifies a country code. It only takes effect when the element has the province attribute.

Change the carousel to the next or previous slide. It has the following parameters:

• dir: it can take 1 and -1. If its value is 1, change the carousel to next slide, and vice versa.
• animate: a Boolean attribute. If its value is true, the carousel changes with an animation.
• autoplay: a Boolean attribute. If the carousel is currently automatically playing, it must be set to true.

<spz-carousel id="carousel" layout="fixed-height" height="500" initial-slide="0">
  <spz-img layout="fixed-height" height="500" src="./images/1.jpg" object-fit="cover"></spz-img>
  <spz-img layout="fixed-height" height="500" src="./images/2.jpg" object-fit="cover"></spz-img>
  <spz-img layout="fixed-height" height="500" src="./images/3.jpg" object-fit="cover"></spz-img>
</spz-carousel>

<button id="button" type="button">Go Next Slide</button>

<script>
  const button = document.getElementById('button');
  const carousel = document.getElementById('carousel');

  button.onclick = () => {
    SPZ.whenApiDefined(carousel).then(api => {
      api.go(1, true, false);
    });
  };
</script>

Change the carousel to the next or previous slide. It has dir and animate parameters, same as go API.

Change the carousel to specify the slide, same as goToSlide action. It has index, animate, and direct parameters.

// api.goToSlide(index, animate, direct);

SPZ.whenApiDefined(carousel).then(api => {
  api.goToSlide(2, true);
});

Change the carousel to the next slide. It takes no parameters.

SPZ.whenApiDefined(carousel).then(api => {
  api.interactionNext();
});

Change the carousel to the previous slide. It takes no parameters.

SPZ.whenApiDefined(carousel).then(api => {
  api.interactionPrev();
});

Determine whether the carousel has the conditions of the loop. If the total number of slides is greater than one, its value is true.

SPZ.whenApiDefined(carousel).then(api => {
  const loop = api.isLoopingEligible();
  if (loop) {
    // ...
  } else {
    // ...
  }
});

Return data of the cart.

Same as the render action.

Return filtered data.

SPZ.whenApiDefined(filter).then(api => {
  const data = api.getData();
  /*
    data = {
      "filter.p.vendor": "",
      "filter.v.option.height": "2cm",
      "filter.v.option.size": "",
      "filter.v.availability": "",
      "filter.v.price.gte": "",
      "filter.v.price.lte": "",
      "filter.v.option.color": ""
    }
  */
});

To open the lightbox.

To close the lightbox.

<spz-lightbox id="lightbox" layout="nodisplay" has-mask>
  <header>Header</header>
  <main>
    <h3>Content</h3>
  </main>
  <footer>Footer</footer>
  <button id="close-btn" type="button">Close lightbox</button>
</spz-lightbox>

<button id="open-btn" type="button">Open lightbox</button>

<script>
  const openButton = document.getElementById('open-btn');
  const closeButton = document.getElementById('close-btn');
  const lightbox = document.getElementById('lightbox');

  openButton.onclick = () => {
    SPZ.whenApiDefined(lightbox).then(api => {
      api.open();
    });
  };

  closeButton.onclick = () => {
    SPZ.whenApiDefined(lightbox).then(api => {
      api.close();
    });
  };
</script>

Return all data in the list of the current page.

const list = document.getElementById('collection-list');

SPZ.whenApiDefined(list).then(api => {
  const items = api.getData();
});

Same as the refresh action.

To reset the menu to the first level.

SPZ.whenApiDefined(menu).then(api => {
  api.reset();
});

Return the current value of the quantity.

SPZ.whenApiDefined(quantity).then(api => {
  const value = api.getData();
  // ...
});

Return an object that contains the product ids and the value of the count attribute.

const recentlyViewed = document.getElementById('recently-viewed');

SPZ.whenApiDefined(recentlyViewed).then(api => {
  const data = api.getData(); // { limit: 18, ids: [ /* ...*/ ] }
});

Same as the render action.

Refresh the rendering of the element. It has a parameter:

• option: A Object attribute. It can contains some request parameters.

const render = document.getElementById('render');

SPZ.whenApiDefined(render).then(api => {
  api.render({
    page: 2,
    per_page: 20
  });
});

It must have a name attribute. Returns the value of the selected option.

const selector = document.getElementById('selector');

SPZ.whenApiDefined(selector).then(api => {
  const data = api.getData(); // { selector: ['0', '1', /* ... */ ] }
});

Same as the update action.

To open the element.

SPZ.whenApiDefined(sidebar).then(api => {
  api.open();
});

To close the element.

SPZ.whenApiDefined(sidebar).then(api => {
  api.close();
});

show the toast with a given text in javascript.

const toast = document.getElementById('toast');

SPZ.whenApiDefined(toast).then(api => {
  api.showToast(text='This is a toast pop-up.')
});

Return the currently selected variant combination data.

SPZ.whenApiDefined(variantEle).then(api => {
  const promise = api.getData();
  promise.then(data => {
    /*
      // data object
      data = {
        product: {
          // product info
        },
        productId: "66aac15b-33cc-485c-bd1c-f7905e4e48a1",
        selectedValues: {
          Color: ["Slategray"],
          Size: ["M"]
          // ...
        },
        variant: {
          // the currently selected variant data
        }
      };
    */
  })
});

Get the time that the video is played.

SPZ.whenApiDefined(video).then(api => {
  console.log('The current time is ' + api.getData() + ' seconds.');
});

Set full-screen play with the video. It has the following parameters:

• isZoom: if it is true, the video enters full-screen play and vice versa.

SPZ.whenApiDefined(video).then(api => {
  api.onEnterFullscreenCallback(true);
});