spz-product-form#

#When to Use

Use when you need to handle operations such as adding product variants to the cart, checkout, etc. Generally used on product detail pages, quick add-to-cart popups, etc.

#Code Demonstration

#Basic Usage

• The component must have a form element, and all product-related code should be written inside the form. Use native input, select, etc., controls inside the form.
• When the add-to-cart/checkout button is clicked, all data from the form is gathered as request data.
• When we need to display variant options for user selection, use the spz-variants component.

<spz-product-form
  layout="container"
  product-id="c10c000b-470d-4733-8d5a-bd3acf612a8e"
  variant-id="d69a1d5e-bb42-4dc6-b887-bf07936fad76"
  @atcSuccess="add-to-card-success-toast.showToast(content='Added successfully');"
>
  <form>
    <!-- Variants -->
    <spz-variants layout="container" src="script:product-json" manual interference inherit-url-variant>
      <fieldset name="Color">
        <legend class="w-full">
          <span>Color</span>
        </legend>
        <div>
          <label>
            <input type="radio" option="DarkKhaki" name="product-info-variant-Color" value="DarkKhaki">
            <span>DarkKhaki</span>
          </label>
          <label>
            <input type="radio" option="SteelBlue" name="product-info-variant-Color" value="SteelBlue">
            <span>SteelBlue</span>
          </label>
        </div>
      </fieldset>
      <fieldset name="Size">
        <legend class="w-full">
          <span>Size</span>
        </legend>
        <div>
          <label>
            <input type="radio" option="S" name="product-info-variant-Size" value="S">
            <span>S</span>
          </label>
          <label>
            <input type="radio" option="M" name="product-info-variant-Size" value="M">
            <span>M</span>
          </label>
        </div>
      </fieldset>
    </spz-variants>

    <!-- OR: <input type="number" value="1" name="quantity" /> -->
    <spz-quantity
      id="product-info-quantity"
      name="quantity"
      value="1"
      min="1"
      max="12"
      height="40"
      layout="fixed-height"
    ></spz-quantity>

    <button role="addToCart">Add to cart</button>
    <button role="buyNow">BuyNow</button>
  </form>
</spz-product-form>

<script id="product-json" type="application/json">
  {
    "product": "...",
    "selected": "..."
  }
</script>

<spz-toast id="add-to-card-success-toast" layout="nodisplay" hidden>
  <span class="flex justify-between items-center w-full">
    <span role="content"></span>
    <a href="/cart">View cart</a>
  </span>
</spz-toast>

#Attributes

#Other Attributes

#Methods

#setProduct

Change product data.

#addToCart

Add the currently selected product variant combination to the cart, no parameters required.

#buyNow

Check out the currently selected product variant combination, no parameters required. When in variant combination (variantCombination) mode, the following parameters are required:

#Events

update

This event is automatically triggered when switching variant combinations. event is a string type, representing the current status message.

productChange

This event is automatically triggered when the selected variant combination or quantity is updated.

Event object data:

orderChange

This event is automatically triggered when the URL contains the order_id field and its value is not empty.

Event object data:

productInvalid

This event is automatically triggered when the checkout variant combination or the selected variant combination does not exist.

firstBuyNowSuccess

In variant combination (variantCombination) mode, when the buyNow method is called, isFirst parameter is true, and there is no currently selected variant combination, this event is automatically triggered after a successful checkout.

buyNowSuccess

In variant combination (variantCombination) mode, when isFirst is false, this event is automatically triggered upon successful checkout. event object data is the data returned from the checkout URL request.

buyNowError

This event is automatically triggered when checkout fails. event object data is the error information returned from the checkout URL request.

atcSuccess

This event is automatically triggered when adding to cart is successful. event object data is the variant data.

atcError

This event is automatically triggered when adding to cart fails. event object data is the variant data.

#AI Summary (LLM Ready)

• Component ID: spz-product-form
• One-line purpose: Handles operations such as adding product variants to the cart, checkout, etc.
• Detected attribute rows: 3
• Detected method subsections: 3
• Detected event subsections: 9
• Top attribute names: product-id, variant-id, buy-now-url
• Top method names: setProduct, addToCart, buyNow
• Top event names: update, productChange, orderChange, productInvalid, firstBuyNowSuccess, buyNowSuccess
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/