Cart

Display a shopping cart with dynamic summaries

npm run add Cart

Use the Cart component to display a shopping cart in your Astro project. It allows users to view products they intend to purchase, adjust quantities, apply coupon codes, and see a summary of their order including subtotal, discounts, VAT, and total price.

---
const products = [
    {
        img: {
            src: '/images/product1.jpg',
            alt: 'Product 1',
            width: 50,
            height: 50,
            lazy: true
        },
        href: '/products/product1',
        target: '_blank',
        id: 1,
        name: 'Product 1',
        price: 29.99,
        quantity: 2
    },
    { ... }
]
---

<Cart
    title="Cart"
    products={products}
    discount={20}
    vat={15}
/>

The Cart component only requires a products prop, which is an array of product objects. Each product can be created without an image, link, or target. The only required properties are id, name, price, and quantity.

The Cart component also extends the Card component, so you can pass any CardProps to customize its appearance, such as a title.

Vat and Discount

In the above example, we set a vat of 15 and a discount of 20. These values represent percentages that will be applied to the total price of the products in the cart. When both values are provided, the discount is applied first, followed by the VAT calculation on the discounted amount. You can also use either one of them or none at all.

<Cart
    products={products}
    discount={15}
/>

<Cart
    products={products}
    vat={15}
/>

Pricing Symbols

By default, the Cart component uses the dollar sign ($) as the currency symbol. You can change this by using the priceSymbol prop. Additionally, you can set the position of the currency symbol using the symbolPosition prop, which can be either prefix (default) or postfix.

<Cart
    products={products}
    discount={15}
    vat={15}
    priceSymbol="£"
/>

<Cart
    products={products}
    discount={15}
    vat={15}
    priceSymbol="€"
    symbolPosition="postfix"
/>

Counters

The Cart component uses the Counter component for its counters, meaning you can customize it by passing your own CounterProps settings via the counter prop.

<Cart
    products={products}
    counter={{ theme: 'success', rounded: true }}
/>

<Cart
    products={products}
    counter={{ disabled: true }}
/>

Coupon Code

The Cart component includes a coupon code section that allows your users to enter and apply coupon codes for discounts. You can customize the input field and button used in this section by passing your own InputProps and ButtonProps config via the coupon.input and coupon.button props, respectively.

<Cart
    products={products}
    coupon={{
        input: {
            placeholder: 'Apply a coupon'
        },
        button: {
            text: 'Add'
        }
    }}
/>

If you want to hide the coupon code section, you can set the coupon.show prop to false. Note that you will need to handle coupon code functionality in your own code as the Cart component does not include built-in logic for validating coupon codes.

You can apply the discount by updating this line in your component. For example, set the value to 20 to apply a 20% discount when a valid coupon code is entered. Make sure to implement your own validation logic for the coupon code before applying the discount.

Summary and Total

The summary section displays the subtotal, discount, VAT, and total price of the products in the cart. You can customize the labels and visibility of these items using the summary and total props:

<Cart
    products={products}
    discount={20}
    vat={15}
    total={{ label: 'Due today:' }}
    summary={{
        subtotalLabel: 'Sub ->',
        discountLabel: 'Cut ->',
        vatLabel: 'Tax ->',
        title: 'Details:'
    }}
/>

Each of these fields can be hidden by setting their respective show properties to false. For example, to hide the discount from the summary, set summary.showDiscount to false. You can also hide the entire summary section or the total price section by setting summary.show or total.show to false.

CTA Buttons

Lastly, you can add call-to-action buttons at the bottom of the cart using the buttons prop. This prop accepts an array of button configurations (in the form of ButtonProps), allowing you to define multiple buttons with different themes and actions.

<Cart
    products={products}
    vat={20}
    discount={30}
    buttons={[
        { text: 'Checkout', href: '/checkout' },
        { text: 'Keep shopping', theme: 'secondary' , href: '/products' }
    ]}
/>

You can also combine this component with a Modal or Sheet component to create a cart overlay, or use the Popover component to create a mini cart in the navigation bar.

Events

In case you need to handle additional logic when the cart changes (e.g., updating the total number of items in a cart icon), the Cart component dispatches a cartOnChange event that you can listen to:

<script>
    import { listen } from 'webcoreui'

    listen('cartOnChange', event => console.log('Cart changed:', event))
</script>

The event object contains the following properties:

• discountedPrice: The total discount amount applied to the cart.
• vatPrice: The total VAT amount applied to the cart.
• totalPrice: The final total price of the cart after applying discounts and VAT.
• subtotal: The subtotal price of all products in the cart before discounts and VAT.

You can also dispatch additional information by changing this line in your component.

API

type Product = {
    img?: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    href?: string
    target?: '_self'
        | '_blank'
        | '_parent'
        | '_top'
        | '_unfencedTop'
    id: number
    name: string
    price: number
    quantity: number
}

type CartProps = {
    products: Product[]
    priceSymbol?: string
    symbolPosition?: 'prefix' | 'postfix'
    vat?: number
    discount?: number
    counter?: CounterProps
    coupon?: {
        show?: boolean
        input?: InputProps
        button?: {
            text: string
            icon?: string
        } & ButtonProps
    }
    summary?: {
        show?: boolean
        showSubtotal?: boolean
        showDiscount?: boolean
        showVat?: boolean
        subtotalLabel?: string
        discountLabel?: string
        vatLabel?: string
        title?: string
    }
    total?: {
        show?: boolean
        label?: string
    }
    buttons?: ({
        text: string
        icon?: string
    } & ButtonProps)[]
} & CardProps