spz-atc

• Specifies an addToCart button with the role="addToCart" attribute.
• Specifies a buy now button with the role="buyNow" attribute.
• Specifies a text of the button with the role="content" attribute.

<script id="atc-locale-json" type="application/json">
  {
    <!-- ... -->
  }
</script>

<spz-atc
  id="product-info-atc-"
  class="product-atc product-info-block"
  layout="container"
  locale-map="atc-locale-json"
  variant="#product-info-variants"
  quantity="#product-info-quantity"
  product-id=""
  variant-id=""
>
  <button type="button"
    role="addToCart"
    class="button-primary"
    data-track="click"
    data-track-content="add_to_cart"
    data-track-source="add_to_cart"
  >
    <span role="content" class="fade-in-opacity">Add to cart</span>
  </button>

  <button
    role="buyNow"
    type="button"
    class="button-secondary"
    data-track="click"
    data-track-content="checkout"
    data-track-source="buy_now"
  >
    <span role="content" class="fade-in-opacity">Buy now</span>
  </button>

  
</spz-atc>

A spz-variant id. For example variant="#product-info-variants".

A spz-quantity id. For example quantity="#product-info-quantity".

A product id.

A variant id that is selected by default.

Specify the text to be prompted in different states.

Indicates the state of the current variant selection. It has four values:

To update the status of the element, no parameters required.

To check selected variants. If no variant is selected, a message is displayed. No parameters required.

{
  "quantity": 1,
  "variants": {
    "product": {
      // ...
    },
    "productId": "c222663d-88ab-46bd-a21a-9584691aa744",
    "variant": {
      // ...
    },
    "originData": {
      // ...
    }
  }
}

Be automatically triggered when added to cart successfully.