// setVariable("cart", '[ { "image": "https://www.target.com.au/medias/static_content/product/images/full/85/83/A1788583.jpg?impolicy=product_portrait_hero", "title": "Exele Eichholtx 112", "description": "Armchair", "price": "$200.00" }, { "image": "https://cb2.scene7.com/is/image/CB2/GPGwynethBclChrBlcWhtSHF18_1x1/$web_pdp_main_carousel_xs$/190905023639/gwyneth-boucle-chair.jpg", "title": "Exele Eichholtx 100", "description": "Sofa", "price": "$200.00" }, { "image": "https://www.hslchairs.com/wp-content/uploads/2022/04/Untitled-design-2022-04-21T162132.648.png", "title": "Exele Eichholtx 77", "description": "Armchair", "price": "$200.00" } ]') /* *** Coming Animation */ var tl_{{uid}} = gsap.timeline({ paused: true }); tl_{{uid}}.to(".container-{{uid}}", { opacity: 1, y: 0, ease: "power2.out", duration: 0.5, }); var tl2_{{uid}} = gsap.timeline(); tl2_{{uid}}.from(".total-{{uid}}", { scale: 0, opacity: 0, duration: 0.5, ease: "back", }); /* *** Setting Shopping Cart Size */ var cartSize_{{uid}} = "{{selectedCartSize}}"; switch (cartSize_{{uid}}) { case "Medium": document.querySelector(".container-{{uid}}").classList.add("medium-cart-{{uid}}"); break; case "Small": document.querySelector(".container-{{uid}}").classList.add("small-cart-{{uid}}"); break; default: document.querySelector(".container-{{uid}}").classList.add("large-cart-{{uid}}"); break; } /* *** Render Shopping Cart */ function renderShoppingCart_{{uid}}(data) { var shopListContent = ""; if (!data || data.length <= 0) { shopListContent = `

Shopping Cart is empty...

`; } else { data.forEach((item, idx) => { shopListContent += `

${item.title}

${item.description}

${item.price}

`; }); } $(".container-{{uid}} ul").html(shopListContent); } c8PlayerApi.on("variableChange", function (variableName, prevValue, newValue) { // console.log("VariableChange Event:", variableName, prevValue, newValue) if ("cart" == variableName) { renderShoppingCart_{{uid}}(newValue); totalItemListener_{{uid}}(); } }); var cartList_{{uid}} = c8PlayerApi.getVariable("cart"); renderShoppingCart_{{uid}}(cartList_{{uid}}); /* *** Remove Shopping Cart Item */ function removeCart_{{uid}}(e) { var shoppingCartData = c8PlayerApi.getVariable("cart"); shoppingCartData.splice(e, 1); setVariable("cart", shoppingCartData); } /* *** Close Shopping Cart Widget */ var toggleShoppingCart_{{uid}} = () => { document.querySelector(".container-{{uid}}").classList.toggle("d-none-{{uid}}"); document.querySelector(".toggle-btn-{{uid}}").classList.toggle("d-none-{{uid}}"); tl_{{uid}}.restart(); c8PlayerApi.executeWidgetPropActions("cartIconClickActions"); }; document .querySelector(".back-{{uid}}") .addEventListener("click", function(){ toggleShoppingCart_{{uid}}(); c8PlayerApi.executeWidgetPropActions("continueShoppingActions"); }); if (c8PlayerApi.getRuntime() !== "CREATIVE_STUDIO") { document .querySelector(".toggle-btn-{{uid}}") .addEventListener("click", toggleShoppingCart_{{uid}}); } /* *** Checkout Button Action */ document.querySelector(".checkout-{{uid}}").addEventListener("click", () => { c8PlayerApi.executeWidgetPropActions("onClickButton"); }); // Total Item Listener totalItemListener_{{uid}}(); function totalItemListener_{{uid}}() { var totalCartItems = 0; if (c8PlayerApi.getVariable("cart")) { totalCartItems = c8PlayerApi.getVariable("cart").length; } if (totalCartItems > 0) { document.querySelector(".total-{{uid}}").classList.remove("d-none-{{uid}}"); document.querySelector(".total-{{uid}} span").innerText = totalCartItems; tl2_{{uid}}.restart(); } else { document.querySelector(".total-{{uid}}").classList.add("d-none-{{uid}}"); } }

Name	Type	Default Value
Icon	Image
Shopping Cart Panel Size	Select	Large Medium Small
Font Size	Text	-
Background Color	Color	rgba(228,231,228,1)
Text Color	Color	rgba(0,108,197,1)
Checkout Button Text	Text	-
Shopping Cart Icon Click Actions	Action	-
Checkout Button Click Actions	Action	-
Continue Shopping Link Click Actions	Action	-

Smart Streamer

Interaction Designer

Smart Streamer

Interaction Designer

Shopping Cart

Category