Shoppable® DTC Lite v6 Setup Guide

This article will help you setup DTC Lite V6 set up on your website or blog.

What is DTC LITE?

Shoppable® DTC Lite is a standardized Shoppable product that helps you embed Shoppable ecommerce technology on an existing faster. 

Attaching the Script

Start attaching the script tag to the head of your page. It is small in size and won't 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}]}]}]}