1. Help Center
  2. Setup & Developer Documentation

Shoppable® DTC Lite v6 Implementation

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