Attaching the Script Start attaching the script tag to the head of your page. It is small in size and wont delay loading of your page. Use “https://cdn.shoppable.com/dtc6/dtc.all.min.js" as production src
<script
data-token=“<<Your Cart Token>>"
defer=""
id="shoppable-cart-script"
src=“https://cdn.staging.shoppable.com/dtc6/dtc.all.min.js”
// src=“https://cdn.shoppable.com/dtc6/dtc.all.min.js” *production
data-lang=“en”>
</script>
Shopping Cart Element
Here is a sample cart icon for your DTC enabled website. With the following element you will toggle the Shoppable Cart and display the number of items in the cart. There must be an empty element with “#shoppable-cart-quantity” id in DOM. Script will find the element and update the contents of it.
<button class=“" href="#" id=“shoppable-cart-button”
onclick=“window.toggleShoppableCart()”>
<span class=“" id=“shoppable-cart-quantity”>0</span>
<svg class="" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" stroke-linecap=“round" stroke-linejoin="round"/>
</svg>
</button>
Add to Cart function
Sample add to cart function is as follows. Products object will carry an array of products that will be added to cart. Product name will be used in the preview when the product is being added to cart. With this function you can combine multiple products as a bundle and add them to cart simultaneously. If you provide more than one product variation will be disregarded and set as false.
products.upc = Barcode code of the product that will be added to cart
products.name = Name of the product, this will be shown in the loader
product.quantity = number of the products that will be added to cart
variation = If variation set to true cart will display a variation selector to shopper (as in beta this is set to false all the time)
window.addToShoppableCart({
products: [{
upc:number,
name:string,
quantity:number
}],
variation: boolean
})
Sample button can look like this
<a onclick="window.addToShoppableCart({
products: [{
upc:’00037000870876',
name:’Pampers Sensitive Baby Wipes - 168ct’,
quantity:1
}],
variation: false
})”>Buy Pampers Sensitive Baby Wipes - 168ct</a>
Cart Events
With DTC v6 we are broadcasting cart events through window object. Therefore, you must listen to shoppable events as in the sample code below.
window.addEventListener("onCartLoaded", (event)=>{
const cartContent = event.detail.cartContent
const eventSpecificData = event.detail.eventSpecificData
const eventName = event.type
console.log(eventName, JSON.stringify(cartContent), JSON.stringify(eventSpecificData))
})
cartContent will carry the up-to-date cart status with available merchants and products in it. Available events and events specific data related to the events are as follows. Please note these events and data is subject to change and this document will be updated correspondingly. cartContent object is as follows:
{“subTotal":49.99,
“total":54.99,
“totalProductQuantity":1,
“estimatedShippingFee":0,
“isMarketingOpted":false,
“isSubstitutionOpted":true,
“taxRate":0.1,
“paymentMethod":null,
“orderNumber":"",
“estimatedTax":5,
“merchants":[{
“isFreeShipping":true,
“merchantId":"66463e9e59d7c95074d5ea32",
“name":"Target",
“logo”:"merchant log",
“freeShippingThreshold":35,
“shippingCost":5.99,
“minimumOrderAmount”:0,
“subTotal":49.99
“products":[{
“name":"product name”,
“upc”:"upc code",
“images”:["image url"],
“variantLabel":"variation label”,
“color":"Product color”,
“description":"",
“quantity":1,
“salePrice":49.99,
“price":69.99,
“id":"66463e9e59d7c95074d5ea32-00190199801561",
“merchantId”:”66463e9e59d7c95074d5ea32",
“availability": [{
“merchantId":"66463e9e59d7c95074d5ea32",
“name":"Target",
“salePrice":49.99,
“price":69.99,
“logo”:"merchant log",
“freeShippingThreshold”:"35",
“shippingCost":5.99}]}]}]}
eventName |
eventSpecificData |
onCartOpened |
null |
onCartClosed |
null |
onCartLoaded |
null |
onCartFailed |
string: Reason for cart failure |
onAddToCart |
Product[]: array of products that are added to cart |
onRemoveFromCart |
Product: product object that is removed to cart |
onQuantityChanged |
Product: product object prior to quantity change |
onMerchantChanged |
Product: product object with prior merchant |
onCheckoutStarted |
null |
onSubstitutionConsentToggled |
boolean: Shopper consent choice for substitute |
onMarketingConsentToggled |
boolean: Shopper’s consent choice for marketing |
onExpressCheckoutStarted |
string: identifier for wallet used for express checkout ex: apple_pay |
onPaymentStarted |
null |
onPaymentFailed |
string: Reason for payment failure |
onOrderPlaced |
string: Order number |
onCartReset |
null |