Shopping Cart Modal Component for Svelte and React

Easily add shopping cart functionality to your E-commerce site with the help of this versatile component created for Svelte and React applications. Customize your component through props, and choose from different themes.

This component comes with the following features:

• Automatic calculations: It comes with fully functional summary calculation, supports the use of coupon codes for discounts, and calculates VAT.
• Translations: Translate the component through props for different markets.
• Multiple framework support: The package includes code for the <ShoppingCart /> component written for Svelte and React, meaning you’ll get two different implementation with this product, so you can use it with different tech stacks.
• Configurable: Fully customize the shopping cart to your visitors with the help of props. Set every aspect of your shopping cart. Translation props are optional, and have the following default values:

// Import the relevant component
import { PricingTable } from '@components/PricingTable.tsx'
import PricingTable from '@components/PricingTable.svelte'

// Call the component with possible options on your page
<ShoppingCart
    title="Shopping Cart"
    couponInputPlaceholder="Add your coupon code"
    couponCTA="Apply"
    summaryLabel="Summary"
    subTotalLabel="Subtotal"
    discountLabel="Discount"
    vatLabel="VAT"
    totalLabel="Total"
    checkoutCTALabel="Proceed to checkout"
    checkoutLink="/checkout"
    continueShoppingLabel="Continue shopping"
    currency="$"
    vatPercentage={20}
    discount={74}
    closeOnOverlayClick={true}
    products={[{
        id: 1,
        name: 'Product Title',
        price: 99,
        quantity: 1
        image: '/product.png'
    }, { ... }]}
/>

Pass your products to your ShoppingCart component as an array of objects. The component will automatically calculate summary, discount, and VAT based on the data passed as props. The component is also:

• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the component. Three different preconfigured themes are also provided with the stylesheets, including light and dark themes.
• Responsive: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops.
• Cross-browser supported: The component was tested on major browsers (Chrome, Firefox, and Edge) to ensure cross-browser compatibility.

A custom cart function is also provided with the package that can be used to programmatically open your modal anywhere in your application in the following way:

import { cart } from '@utils'

// Opening modal in React & Svelte
<button onClick={cart.open}>Open Cart</button>
<button on:click={cart.open}>Open Cart</button>

// Closing modal in React & Svelte
<button onClick={cart.close}>Close Cart</button>
<button on:click={cart.close}>Close Cart</button>

The cart function also comes with other helper functionalities that can be used to manipulate your cart programmatically, such as add new product, change product quantity, or remove products. These functions can be used in the following way:

import { cart } from '@utils'

// Add new product
cart.add({
    id: 12,
    name: 'Product Title',
    price: 99,
    quantity: 1
    image: '/product.png'
})

// Change product quantity by passing ID and quantity
cart.quantity(12, 5)

// Remove product by ID, or batch remove
cart.remove(12)
cart.remove([12, 1])

// Empty the cart
cart.empty()