spz-cart

Get shopping cart data and handle additions and deletions.

布局

Usage

The element must have a template element.

<spz-cart
  layout="container"
  empty-item="cart.line_items"
  @cartEmpty=""
  @cartChange=""
>
  <template>
    <div>
     <!-- ... -->
    </div>
  </template>
</spz-cart>

Attributes

empty-item

Get data to judge whether it is empty from a path in the given data object.

If it is specified, set a data-empty status when the data is empty. For example empty-item="cart.line_items".

loading

It will be added to the element when the cart data is requesting.

finish

It will be added to the element when the cart data request is complete.

change-loading

It will be added to the element when the cart items has an update operation.

change-finish

It will be added to the element when the cart items has an update operation completed.

data-empty

It will be added to the element when the cart data is empty.

Actions

update

To update a item. It must have the following parameters:

Parameter	Description	Type	Required
productId	Indicates a product id	string	Yes
variantId	Indicates a variant id	string	Yes
id	Indicates a product of the cart id	string	Yes
value	Indicates quantity of additional items purchased	number	Yes

<button
  type="button"
  @tap="cart-items.update(id='20aca8ea-5331-4982-b745-19de975910b2', value=10, productId='47d4085a-88f5-406c-9d53-d250345dce53', variantId='20aca8ea-5331-4982-b745-19de975910b2');"
>Update</button>

render

Refresh data of the shopping cart, no parameter required.

<button type="button" @tap="cart-items.render;">
  Render
</button>

delete

To delete a item. It must have the following parameters:

Parameter	Description	Type	Required
productId	Indicates a product id	string	Yes
variantId	Indicates a variant id	string	Yes
id	Indicates a product of the cart id	string	Yes

<button
  type="button"
  @tap="cart-items.delete(id='20aca8ea-5331-4982-b745-19de975910b2_6179bdf5a3ceaec157ff57a536c46ef1', productId='47d4085a-88f5-406c-9d53-d250345dce53', variantId='20aca8ea-5331-4982-b745-19de975910b2');"
>Delete</button>

Events

event object data

{
  "cart": {
    "line_items": [],
    "ineffectives": [],
    "invalid_msg": "",
    "item_count": 0,
    "original_line_price": 0,
    "original_total_price": 0,
    "line_price": 0,
    "total_price": 0,
    "total_discount": "0.00",
    "total_weight": 0,
    "note": "",
    "discount_line_item_price": "0.00",
    "discount_applications": []
  },
  "originData": { // original data
    // ...
  }
}

mount

Be automatically triggered when the cart is built.

cartEmpty

Be automatically triggered when the cart is empty.

cartDelete

Be automatically triggered when removing items from the cart.

cartChange

Be automatically triggered when updating items from the cart.

cartIncrease

Be automatically triggered when increasing items the quantity of cart items.

cartDecrease

Be automatically triggered when decreasing items the quantity of cart items.