skim-cart

contents

• Usage
• Properties
• Event
• Methods
• CartDetail

Usage

<skim-cart color="light"></skim-cart>

<script>
  const cart = document.querySelector('skim-cart');
  
  cart.addEventListener('click', event => ... );
  cart.addEventListener('drop', event => cart.add(id, {
    image: image_url,
    name,
    description,
    price,
    // etc...
  }));
  cart.addEventListener('delete', id => ... );
</script>

Properties

Property	Attribute	Description	Type	Default
color	color	The color of the component	"Danger" \| "Dark" \| "Light" \| "Medium" \| "Success" \| "Warning" \| "primary" \| "secondary" \| "tertiary"	undefined

Events

Event	Description	Type
cartChange	Emitted when the items changed	CustomEvent<CartItems>

Methods

delete(key: string) => Promise<void>

Returns

Type: Promise<void>

empty() => Promise<void>

Returns

Type: Promise<void>

getItems() => Promise<CartItems>

Returns

Type: Promise<CartItems>

getQuantity() => Promise<number>

Returns

Type: Promise<number>

update(key: string, item: {}, quantity?: number) => Promise<void>

Returns

Type: Promise<void>

Dependencies

Depends on

• ion-button
• ion-icon
• ion-badge
• ion-text

Graph

graph TD;
  skim-cart --> ion-button
  skim-cart --> ion-icon
  skim-cart --> ion-badge
  skim-cart --> ion-text
  ion-button --> ion-ripple-effect
  style skim-cart fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS