spz-cart

Supported layouts: container

When to Use

When you need to display shopping cart data, typically used on a shopping cart page or a shopping cart sidebar popup.

Code Demonstration

Basic Usage

<spz-cart id="cart" layout="container" summary-id="#cart-summary-render" empty-item="cart.line_items" @cartIncrease="..." @cartDecrease="...">
  <template>
    <div>
      <!-- Shopping cart items ... -->
    </div>
  </template>
</spz-cart>

<!-- Shopping cart checkout content -->
<spz-render id="cart-summary-render" layout="container" manual>
  <template>
    <!-- ... -->
    <button type="button" @tap="cart.checkout;">
      Checkout
    </button>
  </template>
</spz-render>

Properties

Property Name	Description	Type	Default Value	Required
summary-id	Specifies the `id` of the checkout content element, supports responsiveness. When the configured element is `spz-render`, the cart will automatically re-render this element when it changes. Format like `#cart-summary-render`	string	-	No
note-id	Specifies the `id` of the shopping cart notes element, supports responsiveness. This element must be able to retrieve the note content through the `value` attribute, such as: `textarea`, `input`, etc. Format like `#cart-note`	string	-	No
empty-items	Path to retrieve shopping cart data	string	`cart.line_items`	No

Methods

render

Renders the shopping cart content, no parameters required.

update

Updates a specific shopping cart item.

Parameter	Description	Type	Default Value	Required
id	The `id` property of the product data	string	-	Yes
value	The quantity of the product to update	string	-	Yes

delete

Deletes a specific shopping cart item.

Parameter	Description	Type	Default Value	Required
id	The `id` property of the product data	string	-	Yes

checkout

Check out the shopping cart items into an order, no parameters required.

Events

mounted

This event is automatically triggered when the shopping cart is first rendered.

cartEmpty

This event is automatically triggered when the shopping cart is empty.

cartChange

This event is automatically triggered when deleting, decreasing/increasing the quantity of products in the shopping cart.

cartDelete

This event is automatically triggered when a product is deleted from the shopping cart.

cartIncrease

This event is automatically triggered when the quantity of a product in the shopping cart is increased.

cartDecrease

This event is automatically triggered when the quantity of a product in the shopping cart is decreased.

AI Summary (LLM Ready)

Component ID: spz-cart
One-line purpose: Implements a shopping cart.
Detected attribute rows: 0
Detected method subsections: 4
Detected event subsections: 6
Top attribute names: none (needs manual completion)
Top method names: render, update, delete, checkout
Top event names: mounted, cartEmpty, cartChange, cartDelete, cartIncrease, cartDecrease
Reading order: start from usage/examples, then verify attributes, methods, and events.
Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/

spz-cart#

#When to Use

#Code Demonstration

#Basic Usage

#Properties

#Methods

#render

#update

#delete

#checkout

#Events