Add To Cart

Like any other experience that has an e-commerce aspect to it, configurator-lite provides as convenient way of integrating any desired cart system with it if required.

It could be achieved in these simple steps:

Add an event listener to know when the "Add To Cart" button is clicked

window.addEventListener("epg:addToCart:clicked", (e)=>{const cartDetails = e.detail;})

The event listener above would trigger, every time the user clicks on the "Add To Cart" button and the details would look similar to this:

{
    "items": [
        {
            "sku": "product-01-gold",
            "price": 109.99
        },
        {
            "sku": "product-02-white",
            "price": 0 // This could be an item that comes with the bundle for free.
        },
        {
            "sku": "product-03-black",
            "price": 15.99
        }
    ],
    "extras": {
        "totalPrice": 125.97 // Only for convenience, this is merely a sum of all the prices within the "items" key
    }
}