commercelayer - npm Package Compare versions

Comparing version 1.8.0 to 1.9.0

package.json

 {
   "name": "commercelayer",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "The Official Commerce Layer JS library",
@@ -28,3 +28,3 @@ "main": "./src/main.js",
   "dependencies": {
-    "@commercelayer/sdk": "^1.4.2",
+    "@commercelayer/sdk": "^1.5.1",
     "js-cookie": "^2.2.0",
@@ -31,0 +31,0 @@ "lodash": "^4.17.11"

src/api.js

@@ -23,16 +23,15 @@ const config = require('./config')
         .include('prices')
-        .page(null, 25);
 
-      let skuAttributes = [
-        'id',
-        'code',
-        'prices.formatted_amount',
-        'prices.formatted_compare_at_amount',
-        'prices.amount_cents',
-        'prices.compare_at_amount_cents'
-      ]
-
       clsdk.listSkus(qf.build())
         .then(data => {
 
+          let skuAttributes = [
+            'id',
+            'code',
+            'prices.formatted_amount',
+            'prices.formatted_compare_at_amount',
+            'prices.amount_cents',
+            'prices.compare_at_amount_cents'
+          ]
+
           ui.updatePrices(data.get(skuAttributes))
@@ -44,11 +43,9 @@
             for (p=2; p<=pageCount; p++) {
-              qf.pageNumber(p);
+              qf.pageNumber(p)
               clsdk.listSkus(qf)
-                .then(data => ui.updatePrices(data.get(skuAttributes)));
+                .then(data => ui.updatePrices(data.get(skuAttributes)))
             }
           }
-
         }
-      );
-
+      )
     }
@@ -66,47 +63,95 @@ },
       variants.forEach(function (variant) {
-        ui.disableElement(variant)
         skuCodes.push(variant.dataset.skuCode)
       })
 
-      let qf = new clsdk.query.QueryFilter().filter('codes', skuCodes.join(','));
+      let qf = new clsdk.query.QueryFilter()
+        .filter('codes', skuCodes.join(','))
 
+      let skuAttributes = [
+        'id',
+        'code'
+      ]
+
       clsdk.listSkus(qf.build())
         .then(data => {
 
-          let skus = data.get(['id', 'code' ]);
+          ui.updateVariants(data.get(skuAttributes))
 
-          for (i = 0; i < skus.length; i++) {
+          let pageCount = data.dataset.meta.page_count;
 
-            let variant = document.querySelector('.clayer-variant[data-sku-code="' + skus[i].code + '"]')
+          if (pageCount > 1) {
+            for (p=2; p<=pageCount; p++) {
+              qf.pageNumber(p)
+              clsdk.listSkus(qf)
+                .then(data => ui.updateVariants(data.get(skuAttributes)))
+            }
+          }
+        }
+      )
+    }
+  },
 
-            if (variant) {
-              variant.value = skus[i].id
-              ui.enableElement(variant)
-              // if (i == 0) {
-              //   module.exports.selectVariant(variant)
-              // }
+  getAddToBags: function() {
 
-              let addToBag = document.querySelector('.clayer-add-to-bag[data-sku-code="' + skus[i].code + '"]')
+    let addToBags = document.querySelectorAll('.clayer-add-to-bag')
 
-              if (addToBag) {
-                addToBag.dataset.skuId = skus[i].id
-                addToBag.dataset.skuName = variant.dataset.skuName
-              }
+    if (addToBags.length > 0) {
+
+      let skuCodes = []
+
+      addToBags.forEach(function (addToBag) {
+        skuCodes.push(addToBag.dataset.skuCode)
+      })
+
+      let qf = new clsdk.query.QueryFilter()
+        .filter('codes', skuCodes.join(','))
+
+      let skuAttributes = [
+        'id',
+        'code'
+      ]
+
+      clsdk.listSkus(qf.build())
+        .then(data => {
+
+          ui.updateAddToBags(data.get(skuAttributes))
+
+          let pageCount = data.dataset.meta.page_count;
+
+          if (pageCount > 1) {
+            for (p=2; p<=pageCount; p++) {
+              qf.pageNumber(p)
+              clsdk.listSkus(qf)
+                .then(data => ui.updateAddToBags(data.get(skuAttributes)))
             }
           }
         }
-      );
+      )
     }
   },
 
-  getInventory: function(skuId, skuName) {
-    clsdk.retrieveSku(skuId, {'fields[skus]' : 'inventory'})
+  selectSku: function(skuId, skuName, skuReference, skuImageUrl, priceContainerId, availabilityMessageContainerId, addToBagId) {
+    let qf = new clsdk.query.QueryFilter().include('prices')
+
+    clsdk.retrieveSku(skuId, qf.build())
       .then((data) => {
-        let inventory = data.get('inventory');
-        ui.updateAvailabilityMessage(inventory)
-        if (inventory.available) {
-          ui.updateAddToBagSKU(skuId, skuName)
-          ui.enableAddToBag()
+
+        let skuAttributes = [
+          'id',
+          'code',
+          'inventory',
+          'prices.formatted_amount',
+          'prices.formatted_compare_at_amount',
+          'prices.amount_cents',
+          'prices.compare_at_amount_cents'
+        ]
+
+        let sku = data.get(skuAttributes)
+        ui.updatePrice(sku, priceContainerId)
+        ui.updateAvailabilityMessage(sku.inventory, availabilityMessageContainerId)
+        if (sku.inventory.available) {
+          ui.updateAddToBagSKU(skuId, skuName, skuReference, skuImageUrl, addToBagId)
+          ui.enableAddToBag(addToBagId)
         } else {
-          ui.disableAddToBag()
+          ui.disableAddToBag(addToBagId)
         }
@@ -116,31 +161,11 @@ })
 
-  selectVariant: function(variant) {
-    switch(variant.tagName) {
-      case "INPUT":
-        switch(variant.type) {
-          case "radio":
-            variant.click()
-            break
-          case "hidden":
-            module.exports.getInventory(variant.value, variant.dataset.skuName)
-            break
-        }
-        break
-      case "OPTION":
-        let select = variant.parentNode
-        select.value = variant.value
-        select.dispatchEvent(new Event('change'))
-        break
-    }
-  },
-
   createOrder: function() {
     clsdk.createOrder({
         type: 'orders',
-        shipping_country_code_lock: config.countryCode(),
-        language_code: config.languageCode(),
-        cart_url: config.cartUrl(),
-        return_url: config.returnUrl(),
-        privacy_url: config.privacyUrl(),
-        terms_url: config.termsUrl()
+        shipping_country_code_lock: config.countryCode,
+        language_code: config.languageCode,
+        cart_url: config.cartUrl,
+        return_url: config.returnUrl,
+        privacy_url: config.privacyUrl,
+        terms_url: config.termsUrl
       }
@@ -153,2 +178,26 @@ ).then(data => {
 
+  getOrder: function() {
+
+    api = this
+
+    let qf = new clsdk.query.QueryFilter();
+
+    qf.include('line_items').filter('token', utils.getOrderToken())
+
+    return clsdk.listOrders(qf)
+      .then(function(response) {
+
+        if (response.get(['line_items']).length > 0) {
+          api.updateShoppingBagItems(response)
+          ui.updateShoppingBagSummary(response.dataset.data[0])
+          ui.updateShoppingBagCheckout(response)
+          if (response.get('skus_count') == 0) {
+            ui.clearShoppingBag()
+          }
+          return response;
+        }
+      }
+    )
+  },
+
   refreshOrder: function() {
@@ -165,3 +214,3 @@ if (utils.getOrderToken()) {
 
-  createLineItem: function(orderId, skuId, skuName, skuImageUrl) {
+  createLineItem: function(orderId, skuId, skuName, skuReference, skuImageUrl) {
 
@@ -174,2 +223,3 @@ return clsdk.createLineItem({
           name: skuName,
+          reference: skuReference,
           image_url: skuImageUrl,
@@ -213,3 +263,3 @@ _update_quantity: 1
 
-  updateLineItemQty: function(lineItemId, quantity) {
+  updateLineItemQty: function(lineItemId, quantity, availabilityMessageContainer) {
     api = this
@@ -224,3 +274,5 @@ api.updateLineItem(lineItemId, { quantity: quantity })
             case 422:
-              ui.displayShoppingBagUnavailableMessage()
+              if (availabilityMessageContainer) {
+                ui.displayUnavailableMessage(availabilityMessageContainer)
+              }
               break
@@ -249,2 +301,3 @@ }
         'line_items.name',
+        'line_items.reference',
         'line_items.quantity',
@@ -272,48 +325,66 @@ 'line_items.formatted_unit_amount',
               let shoppingBagItemImage = shoppingBagItem.querySelector('.clayer-shopping-bag-item-image')
-              shoppingBagItemImage.src = line_item.image_url
+              if (shoppingBagItemImage) {
+                shoppingBagItemImage.src = line_item.image_url
+              }
 
               // name
               let shoppingBagItemName = shoppingBagItem.querySelector('.clayer-shopping-bag-item-name')
-              shoppingBagItemName.innerHTML = line_item.name
+              if (shoppingBagItemName) {
+                shoppingBagItemName.innerHTML = line_item.name
+              }
 
+              // reference
+              let shoppingBagItemReference = shoppingBagItem.querySelector('.clayer-shopping-bag-item-reference')
+              if (shoppingBagItemReference) {
+                shoppingBagItemReference.innerHTML = line_item.reference
+              }
+
               // qty
               let shoppingBagItemQtyContainer = shoppingBagItem.querySelector('.clayer-shopping-bag-item-qty-container')
-              let qtySelect = document.createElement('select')
-              qtySelect.dataset.lineItemId = line_item.id
+              if (shoppingBagItemQtyContainer) {
+                let availabilityMessageContainer = shoppingBagItemQtyContainer.querySelector(".clayer-shopping-bag-item-availability-message-container")
 
-              for (qty = 1; qty <= 10; qty++) {
-                  let option = document.createElement("option")
-                  option.value = qty
-                  option.text = qty
-                  if (qty == line_item.quantity) {
-                    option.selected = true
-                  }
-                  qtySelect.appendChild(option)
+                let qtySelect = document.createElement('select')
+                qtySelect.dataset.lineItemId = line_item.id
+
+                for (qty = 1; qty <= 50; qty++) {
+                    let option = document.createElement("option")
+                    option.value = qty
+                    option.text = qty
+                    if (qty == line_item.quantity) {
+                      option.selected = true
+                    }
+                    qtySelect.appendChild(option)
+                }
+
+                qtySelect.addEventListener('change', function(event){
+                  api.updateLineItemQty(this.dataset.lineItemId, this.value, availabilityMessageContainer)
+                })
+                shoppingBagItemQtyContainer.insertBefore(qtySelect, shoppingBagItemQtyContainer.firstChild)
               }
 
-              qtySelect.addEventListener('change', function(event){
-                event.preventDefault()
-                event.stopPropagation()
-                api.updateLineItemQty(this.dataset.lineItemId, this.value)
-              })
-              shoppingBagItemQtyContainer.appendChild(qtySelect)
-
               // unit_amount
               let shoppingBagItemUnitAmount = shoppingBagItem.querySelector('.clayer-shopping-bag-item-unit-amount')
-              shoppingBagItemUnitAmount.innerHTML = line_item.formatted_unit_amount
+              if (shoppingBagItemUnitAmount) {
+                shoppingBagItemUnitAmount.innerHTML = line_item.formatted_unit_amount
+              }
 
               // total_amount
               let shoppingBagItemTotalAmount = shoppingBagItem.querySelector('.clayer-shopping-bag-item-total-amount')
-              shoppingBagItemTotalAmount.innerHTML = line_item.formatted_total_amount
+              if (shoppingBagItemTotalAmount) {
+                shoppingBagItemTotalAmount.innerHTML = line_item.formatted_total_amount
+              }
 
               // remove
               let shoppingBagItemRemove = shoppingBagItem.querySelector('.clayer-shopping-bag-item-remove')
-              shoppingBagItemRemove.dataset.lineItemId = line_item.id
-              shoppingBagItemRemove.addEventListener('click', function(event){
-                event.preventDefault()
-                event.stopPropagation()
-                api.deleteLineItem(this.dataset.lineItemId).then(function(lineItem){
-                  api.getOrder()
+              if (shoppingBagItemRemove) {
+                shoppingBagItemRemove.dataset.lineItemId = line_item.id
+                shoppingBagItemRemove.addEventListener('click', function(event){
+                  event.preventDefault()
+                  event.stopPropagation()
+                  api.deleteLineItem(this.dataset.lineItemId).then(function(lineItem){
+                    api.getOrder()
+                  })
                 })
-              })
+              }
 
@@ -327,28 +398,3 @@ shoppingBagItemsContainer.appendChild(shoppingBagItem)
     }
-  },
-
-  getOrder: function() {
-
-    api = this
-
-    let qf = new clsdk.query.QueryFilter();
-
-    qf.include('line_items').filter('token', utils.getOrderToken())
-
-    return clsdk.listOrders(qf)
-      .then(function(response) {
-
-        if (response.get(['line_items']).length > 0) {
-          api.updateShoppingBagItems(response)
-          ui.hideShoppingBagUnavailableMessage() // refactor
-          ui.updateShoppingBagSummary(response.dataset.data[0])
-          ui.updateShoppingBagCheckout(response)
-          if (response.get('skus_count') == 0) {
-            ui.clearShoppingBag()
-          }
-          return response;
-        }
-      }
-    )
   }
 }

src/config.js

@@ -0,29 +1,18 @@
+let clayerConfig = document.querySelector('#clayer-config');
+
 module.exports = {
-  baseUrl: function() {
-    return document.querySelector('#clayer-config').dataset.baseUrl
-  },
-  clientId: function() {
-    return document.querySelector('#clayer-config').dataset.clientId
-  },
-  marketId: function() {
-    return document.querySelector('#clayer-config').dataset.marketId
-  },
-  countryCode: function() {
-    return document.querySelector('#clayer-config').dataset.countryCode
-  },
-  languageCode: function() {
-    return document.querySelector('#clayer-config').dataset.languageCode.split("-")[0]
-  },
-  cartUrl: function() {
-    return document.querySelector('#clayer-config').dataset.cartUrl
-  },
-  returnUrl: function() {
-    return document.querySelector('#clayer-config').dataset.returnUrl
-  },
-  privacyUrl: function() {
-    return document.querySelector('#clayer-config').dataset.privacyUrl
-  },
-  termsUrl: function() {
-    return document.querySelector('#clayer-config').dataset.termsUrl
+  baseUrl: clayerConfig.dataset.baseUrl,
+  clientId: clayerConfig.dataset.clientId,
+  marketId: clayerConfig.dataset.marketId,
+  countryCode: clayerConfig.dataset.countryCode,
+  languageCode: clayerConfig.dataset.languageCode.split("-")[0],
+  cartUrl: clayerConfig.dataset.cartUrl,
+  returnUrl: clayerConfig.dataset.returnUrl,
+  privacyUrl: clayerConfig.dataset.privacyUrl,
+  termsUrl: clayerConfig.dataset.termsUrl,
+  devSettings: {
+    debug: clayerConfig.dataset.devSettingsDebug,
+    console: clayerConfig.dataset.devSettingsConsole,
+    trace: clayerConfig.dataset.devSettingsTrace
   }
 }

src/listeners.js

@@ -7,55 +7,52 @@ const ui = require('./ui')
 
-  setVariantSelect: function() {
-
-    let variantSelect = document.querySelector('.clayer-variant-select')
-
-    if (variantSelect) {
+  setupVariants: function() {
+    let variantSelects = document.querySelectorAll('.clayer-variant-select')
+    variantSelects.forEach(function (variantSelect) {
       variantSelect.addEventListener('change', function(event){
         let selectedOption = variantSelect.options[this.selectedIndex]
-        api.getInventory(selectedOption.value, selectedOption.dataset.skuName)
+        api.selectSku(selectedOption.value, selectedOption.dataset.skuName, selectedOption.dataset.skuReference, selectedOption.dataset.skuImageUrl, this.dataset.priceContainerId, this.dataset.availabilityMessageContainerId, this.dataset.addToBagId)
       })
-    } else { // radio
-      let variants = document.querySelectorAll('.clayer-variant')
-      variants.forEach(function (variant) {
-        variant.addEventListener('click', function(event){
-          api.getInventory(this.value, this.dataset.skuName)
-        })
+    })
+
+    let variantRadios = document.querySelectorAll('.clayer-variant-radio')
+    variantRadios.forEach(function (variantRadio) {
+      variantRadio.addEventListener('click', function(event){
+        api.selectSku(this.value, this.dataset.skuName, this.dataset.skuReference, this.dataset.skuImageUrl, this.dataset.priceContainerId, this.dataset.availabilityMessageContainerId, this.dataset.addToBagId)
       })
-    }
+    })
   },
 
-  setAddToShoppingBagButtons: function() {
-    let addToBagButtons = document.querySelectorAll(".clayer-add-to-bag")
+  setupAddToBags: function() {
+    let addToBags = document.querySelectorAll(".clayer-add-to-bag")
 
-    if (addToBagButtons.length > 0) {
-      addToBagButtons.forEach(function (addToBag) {
-        addToBag.addEventListener('click', function(event) {
-          event.preventDefault()
+    addToBags.forEach(function (addToBag) {
+      addToBag.addEventListener('click', function(event) {
+        event.preventDefault()
 
-          orderPromise = utils.getOrderToken() ? api.getOrder() : api.createOrder()
+        let orderPromise = utils.getOrderToken() ? api.getOrder() : api.createOrder()
 
-          orderPromise.then(function(order){
+        orderPromise.then(function(order){
 
-            api.createLineItem(order.get('id')[0], addToBag.dataset.skuId, addToBag.dataset.skuName, addToBag.dataset.skuImageUrl).then(function(lineItem){
-              api.getOrder()
-              ui.openShoppingBag()
-            })
-            .catch(function(error) {
-              if (error.response) {
-                switch(error.response.status) {
-                  case 422:
-                    ui.displayUnavailableMessage()
-                    break
+          api.createLineItem(order.get('id')[0], addToBag.dataset.skuId, addToBag.dataset.skuName, addToBag.dataset.skuReference, addToBag.dataset.skuImageUrl).then(function(lineItem){
+            api.getOrder()
+            ui.openShoppingBag()
+          })
+          .catch(function(error) {
+            switch(error.status) {
+              case 422:
+                let availabilityMessageContainer = document.querySelector(`#${addToBag.dataset.availabilityMessageContainerId}`)
+                if (availabilityMessageContainer) {
+                  ui.displayUnavailableMessage(availabilityMessageContainer)
                 }
-              }
-            })
+                break
+            }
           })
         })
       })
-    }
+    })
   },
 
-  setShoppingBagToggle: function() {
-    let shoppingBagToggle = document.querySelector('#clayer-shopping-bag-toggle')
-    if (shoppingBagToggle) {
+  setupShoppingBagToggles: function() {
+    let shoppingBagToggles = document.querySelectorAll('.clayer-shopping-bag-toggle')
+    shoppingBagToggles.forEach(function(shoppingBagToggle){
       shoppingBagToggle.addEventListener('click', function(event){
@@ -65,5 +62,4 @@ event.preventDefault()
       })
-    }
+    })
   }
-
 }

src/main.js

@@ -11,20 +11,22 @@ function initCommercelayer() {
     clsdk.initialize({
-      client_id : config.clientId(),
-      market_id : config.marketId(),
-      base_url : config.baseUrl(),
-      country_code : config.countryCode(),
-      language_code : config.languageCode()
-    });
+      client_id : config.clientId,
+      market_id : config.marketId,
+      base_url : config.baseUrl,
+      country_code : config.countryCode,
+      language_code : config.languageCode
+    })
 
-    clsdk.settings.debug = true;
-    clsdk.settings.console = true;
-    clsdk.settings.trace = true;
+    clsdk.settings.debug = config.devSettings.debug
+    clsdk.settings.console = config.devSettings.console
+    clsdk.settings.trace = config.devSettings.trace
 
     api.getPrices()
     api.getVariants()
-    listeners.setVariantSelect()
-    listeners.setAddToShoppingBagButtons()
-    listeners.setShoppingBagToggle()
+    api.getAddToBags()
+
+    listeners.setupVariants()
+    listeners.setupAddToBags()
+    listeners.setupShoppingBagToggles()
+
     api.refreshOrder()
-
   }
@@ -31,0 +33,0 @@

src/ui.js

 const utils = require('./utils')
 const normalize = require('json-api-normalize')
 
+function enableElement(element) {
+  if (element) {
+    element.removeAttribute("disabled")
+    element.classList.remove("disabled")
+  }
+}
+
+function disableElement(element) {
+  if (element) {
+    element.setAttribute("disabled", "disabled")
+    element.classList.add("disabled")
+  }
+}
+
+function displayElement(element) {
+  if (element) {
+    element.style.display = 'block'
+  }
+}
+
+function hideElement(element) {
+  if (element) {
+    element.style.display = 'none'
+  }
+}
+
+function setElementHTML(parent, selector, html) {
+  element = parent.querySelector(selector)
+  if (element) {
+    element.innerHTML = html
+  }
+}
+
+function updateShoppingBagItemsCount(order) {
+  let shoppingBagItemsCounts = document.querySelectorAll('.clayer-shopping-bag-items-count')
+  shoppingBagItemsCounts.forEach(function(shoppingBagItemsCount){
+    shoppingBagItemsCount.innerHTML = order.attributes.skus_count
+  })
+}
+
+function updateShoppingBagTotal(order) {
+  let shoppingBagTotals = document.querySelectorAll('.clayer-shopping-bag-total')
+  shoppingBagTotals.forEach(function(shoppingBagTotal){
+    shoppingBagTotal.innerHTML = order.attributes.formatted_total_amount_with_taxes
+  })
+}
+
+function updateShoppingBagSubtotal(order) {
+  let shoppingBagSubtotals = document.querySelectorAll('.clayer-shopping-bag-subtotal')
+  shoppingBagSubtotals.forEach(function(shoppingBagSubtotal){
+    shoppingBagSubtotal.innerHTML = order.attributes.formatted_subtotal_amount
+  })
+}
+
+function updateShoppingBagShipping(order) {
+  let shoppingBagShippings = document.querySelectorAll('.clayer-shopping-bag-shipping')
+  shoppingBagShippings.forEach(function(shoppingBagShipping){
+    shoppingBagShipping.innerHTML = order.attributes.formatted_shipping_amount
+  })
+}
+
+function updateShoppingBagPayment(order) {
+  let shoppingBagPayments = document.querySelectorAll('.clayer-shopping-bag-payment')
+  shoppingBagPayments.forEach(function(shoppingBagPayment){
+    shoppingBagPayment.innerHTML = order.attributes.formatted_payment_method_amount
+  })
+}
+
+function updateShoppingBagTaxes(order) {
+  let shoppingBagTaxes = document.querySelectorAll('.clayer-shopping-bag-taxes')
+  shoppingBagTaxes.forEach(function(shoppingBagTax){
+    shoppingBagTax.innerHTML = order.attributes.formatted_total_tax_amount
+  })
+}
+
+function updateShoppingBagDiscount(order) {
+  let shoppingBagDiscounts = document.querySelectorAll('.clayer-shopping-bag-discount')
+  shoppingBagDiscounts.forEach(function(shoppingBagDiscount){
+    shoppingBagDiscount.innerHTML = order.attributes.formatted_discount_amount
+  })
+}
+
 module.exports = {
-  enableElement: function(el) {
-    if (el) {
-      el.classList.remove("disabled")
-    }
-  },
-  disableElement: function(el) {
-    if (el) {
-      el.classList.add("disabled")
-    }
-  },
-  setElementHTML(parent, selector, html) {
-    el = parent.querySelector(selector)
-    if (el) {
-      el.innerHTML = html
-    }
-  },
-  displayElement: function(el) {
-    if (el) {
-      el.style.display = 'block'
-    }
-  },
-  hideElement: function(el) {
-    if (el) {
-      el.style.display = 'none'
-    }
-  },
-  updatePrices: function(skus) {
-    for (k = 0; k < skus.length; k++) {
-      priceAmount = document.querySelector('[data-sku-code="' + skus[k].code + '"] > .amount')
+  updatePrice(sku, priceContainerId) {
+    priceContainer = document.querySelector(`#${priceContainerId}`)
+    if (priceContainer) {
+      priceAmount = priceContainer.querySelector('.amount')
       if (priceAmount) {
-        priceAmount.innerHTML = skus[k].prices[0].formatted_amount
+        priceAmount.innerHTML = sku.prices[0].formatted_amount
       }
-      priceCompareAmount = document.querySelector('[data-sku-code="' + skus[k].code + '"] > .compare-at-amount')
+      priceCompareAmount = priceContainer.querySelector('.compare-at-amount')
       if (priceCompareAmount) {
-        if (skus[k].prices[0].compare_at_amount_cents > skus[k].prices[0].amount_cents) {
-          priceCompareAmount.innerHTML = skus[k].prices[0].formatted_compare_at_amount
+        if (sku.prices[0].compare_at_amount_cents > sku.prices[0].amount_cents) {
+          priceCompareAmount.innerHTML = sku.prices[0].formatted_compare_at_amount
         }
@@ -45,80 +102,87 @@ }
   },
-  updateAddToBagSKU: function(skuId, skuName) {
-    let addToBag = document.querySelector(".clayer-add-to-bag")
+  updatePrices: function(skus) {
+    skus.forEach( function(sku){
+      priceAmounts = document.querySelectorAll('[data-sku-code="' + sku.code + '"] > .amount')
+      priceAmounts.forEach(function (priceAmount) {
+        priceAmount.innerHTML = sku.prices[0].formatted_amount
+      })
+      priceCompareAmounts = document.querySelectorAll('[data-sku-code="' + sku.code + '"] > .compare-at-amount')
+      priceCompareAmounts.forEach(function (priceCompareAmount) {
+        if (sku.prices[0].compare_at_amount_cents > sku.prices[0].amount_cents) {
+          priceCompareAmount.innerHTML = sku.prices[0].formatted_compare_at_amount
+        }
+      })
+    })
+  },
+  updateVariants: function(skus) {
+    let allVariants = document.querySelectorAll('.clayer-variant')
+    allVariants.forEach(function (variant) {
+      disableElement(variant)
+    })
+    skus.forEach( function(sku){
+      let variants = document.querySelectorAll('.clayer-variant[data-sku-code="' + sku.code + '"]')
+      variants.forEach(function (variant) {
+        variant.value = sku.id
+        enableElement(variant)
+      })
+    })
+  },
+  updateAddToBags: function(skus) {
+    let allAddToBags = document.querySelectorAll('.clayer-add-to-bag')
+    allAddToBags.forEach(function (addToBag) {
+      disableElement(addToBag)
+    })
+    skus.forEach(function(sku){
+      let addToBags = document.querySelectorAll('.clayer-add-to-bag[data-sku-code="' + sku.code + '"]')
+      addToBags.forEach(function (addToBag){
+        addToBag.dataset.skuId = sku.id
+        enableElement(addToBag)
+      })
+    })
+  },
+  updateAddToBagSKU: function(skuId,skuName,skuReference,skuImageUrl,addToBagId) {
+    let addToBag = document.querySelector(`#${addToBagId}`)
     if (addToBag) {
       addToBag.dataset.skuId = skuId
       addToBag.dataset.skuName = skuName
+      addToBag.dataset.skuReference = skuReference
+      addToBag.dataset.skuImageUrl = skuImageUrl
     }
   },
-  enableAddToBag: function() {
-    let addToBag = document.querySelector(".clayer-add-to-bag")
+  enableAddToBag: function(addToBagId) {
+    let addToBag = document.querySelector(`#${addToBagId}`)
     if (addToBag) {
-      this.enableElement(addToBag)
+      enableElement(addToBag)
     }
   },
-  disableAddToBag: function() {
-    let addToBag = document.querySelector(".clayer-add-to-bag")
+  disableAddToBag: function(addToBagId) {
+    let addToBag = document.querySelector(`#${addToBagId}`)
     if (addToBag) {
-      this.disableElement(addToBag)
+      disableElement(addToBag)
     }
   },
-  updateAvailabilityMessage: function(inventory) {
-
-    let container = document.querySelector('#clayer-availability-message-container')
-
-    if (container) {
-
-      first_level = utils.getInventoryFirstAvailableLevel(inventory)
-
+  updateAvailabilityMessage: function(inventory, availabilityMessageContainerId) {
+    let availabilityMessageContainer = document.querySelector(`#${availabilityMessageContainerId}`)
+    if (availabilityMessageContainer) {
+      let first_level = utils.getInventoryFirstAvailableLevel(inventory)
       if (first_level.quantity > 0) {
-
-        dlt = first_level.delivery_lead_times[0]
-
-        qty = first_level.quantity
-        minDays = dlt.min.days
-        maxDays = dlt.max.days
-        shippingMethodName = dlt.shipping_method.name
-        shippingMethodPrice = dlt.shipping_method.formatted_price_amount
-        this.displayAvailableMessage(qty, minDays, maxDays, shippingMethodName, shippingMethodPrice)
+        this.displayAvailableMessage(availabilityMessageContainer, first_level)
       } else {
-        this.displayUnavailableMessage()
+        this.displayUnavailableMessage(availabilityMessageContainer)
       }
     }
   },
-
   updateShoppingBagSummary: function(order) {
-    let shoppingBagItemsCount = document.querySelector('#clayer-shopping-bag-items-count')
-    if (shoppingBagItemsCount) {
-      shoppingBagItemsCount.innerHTML = order.attributes.skus_count
-    }
-    let shoppingBagTotal = document.querySelector('#clayer-shopping-bag-total')
-    if (shoppingBagTotal) {
-      shoppingBagTotal.innerHTML = order.attributes.formatted_total_amount_with_taxes
-    }
-    let shoppingBagSubtotal = document.querySelector('#clayer-shopping-bag-subtotal')
-    if (shoppingBagSubtotal) {
-      shoppingBagSubtotal.innerHTML = order.attributes.formatted_subtotal_amount
-    }
-    let shoppingBagShipping = document.querySelector('#clayer-shopping-bag-shipping')
-    if (shoppingBagShipping) {
-      shoppingBagShipping.innerHTML = order.attributes.formatted_shipping_amount
-    }
-    let shoppingBagPayment = document.querySelector('#clayer-shopping-bag-payment')
-    if (shoppingBagPayment) {
-      shoppingBagPayment.innerHTML = order.attributes.formatted_payment_method_amount
-    }
-    let shoppingBagTaxes = document.querySelector('#clayer-shopping-bag-taxes')
-    if (shoppingBagTaxes) {
-      shoppingBagTaxes.innerHTML = order.attributes.formatted_total_tax_amount
-    }
-    let shoppingBagDiscount = document.querySelector('#clayer-shopping-bag-discount')
-    if (shoppingBagDiscount) {
-      shoppingBagDiscount.innerHTML = order.attributes.formatted_discount_amount
-    }
+    updateShoppingBagItemsCount(order)
+    updateShoppingBagTotal(order)
+    updateShoppingBagSubtotal(order)
+    updateShoppingBagShipping(order)
+    updateShoppingBagPayment(order)
+    updateShoppingBagTaxes(order)
+    updateShoppingBagDiscount(order)
   },
-
   updateShoppingBagCheckout: function(order) {
-    let shoppingBagCheckout = document.querySelector('#clayer-shopping-bag-checkout')
-    if (shoppingBagCheckout) {
-      normalized_order = /*normalize(order)*/order.get([
+    let shoppingBagCheckouts = document.querySelectorAll('.clayer-shopping-bag-checkout')
+    shoppingBagCheckouts.forEach(function(shoppingBagCheckout){
+      normalized_order = order.get([
         'line_items.id',
@@ -129,42 +193,46 @@ 'checkout_url'
       if (normalized_order.line_items) {
-        this.enableElement(shoppingBagCheckout)
+        enableElement(shoppingBagCheckout)
         shoppingBagCheckout.href = normalized_order.checkout_url
       } else {
         shoppingBagCheckout.href = ''
-        this.disableElement(shoppingBagCheckout)
+        disableElement(shoppingBagCheckout)
       }
-    }
+    })
   },
-  displayAvailableMessage: function(qty, minDays, maxDays, shippingMethodName, shippingMethodPrice) {
-    let container = document.querySelector('#clayer-availability-message-container')
+  displayAvailableMessage: function(container, stockLevel) {
 
+    dlt = stockLevel.delivery_lead_times[0]
+    qty = stockLevel.quantity
+    minDays = dlt.min.days
+    maxDays = dlt.max.days
+    shippingMethodName = dlt.shipping_method.name
+    shippingMethodPrice = dlt.shipping_method.formatted_price_amount
+
     if (container) {
-      let tmp = document.querySelector('#clayer-availability-message-available-template')
+      let template = document.querySelector('#clayer-availability-message-available-template')
 
-      if (tmp) {
+      if (template) {
 
-        let el = utils.getElementFromTemplate(tmp)
+        let element = utils.getElementFromTemplate(template)
 
-        this.setElementHTML(el, '.clayer-availability-message-available-qty', qty)
-        this.setElementHTML(el, '.clayer-availability-message-available-min-days', minDays)
-        this.setElementHTML(el, '.clayer-availability-message-available-max-days', maxDays)
-        this.setElementHTML(el, '.clayer-availability-message-available-shipping-method-name', shippingMethodName)
-        this.setElementHTML(el, '.clayer-availability-message-available-shipping-method-price', shippingMethodPrice)
+        setElementHTML(element, '.clayer-availability-message-available-qty', qty)
+        setElementHTML(element, '.clayer-availability-message-available-min-days', minDays)
+        setElementHTML(element, '.clayer-availability-message-available-max-days', maxDays)
+        setElementHTML(element, '.clayer-availability-message-available-shipping-method-name', shippingMethodName)
+        setElementHTML(element, '.clayer-availability-message-available-shipping-method-price', shippingMethodPrice)
 
         container.innerHTML = ''
-        container.appendChild(el)
+        container.appendChild(element)
+        displayElement(container)
       }
     }
   },
-  displayUnavailableMessage: function() {
-
-    let container = document.querySelector('#clayer-availability-message-container')
-
+  displayUnavailableMessage: function(container) {
     if (container) {
-      let tmp = document.querySelector('#clayer-availability-message-unavailable-template')
-
-      if (tmp) {
-        let el = utils.getElementFromTemplate(tmp)
+      let template = document.querySelector('#clayer-availability-message-unavailable-template')
+      if (template) {
+        let element = utils.getElementFromTemplate(template)
         container.innerHTML = ''
-        container.appendChild(el)
+        container.appendChild(element)
+        displayElement(container)
       }
@@ -195,11 +263,11 @@ }
     if(document.querySelector('#clayer-shopping-bag-items-container')){
-      document.querySelector('#clayer-shopping-bag-items-container').innerHTML = '';
+      document.querySelector('#clayer-shopping-bag-items-container').innerHTML = ''
     }
   },
-  displayShoppingBagUnavailableMessage: function() {
-    this.displayElement(document.querySelector('.clayer-shopping-bag-unavailable-message'))
-  },
-  hideShoppingBagUnavailableMessage: function() {
-    this.hideElement(document.querySelector('.clayer-shopping-bag-unavailable-message'))
+  hideAvailabilityMessages: function() {
+    let allAvailabilityMessageContainers = document.querySelectorAll('.clayer-availability-message-container')
+    allAvailabilityMessageContainers.forEach(function(container){
+      hideElement(container)
+    })
   }
 }

src/utils.js

@@ -6,6 +6,6 @@ const config = require('./config')
   getOrderCookieName: function() {
-    return `order_token_${config.clientId()}_${config.marketId()}_${config.countryCode()}`
+    return `order_token_${config.clientId}_${config.marketId}_${config.countryCode}`
   },
   getAccessTokenCookieName: function() {
-    return `access_token_${config.clientId()}_${config.marketId()}`
+    return `access_token_${config.clientId}_${config.marketId}`
   },
@@ -12,0 +12,0 @@ getAccessTokenRetryLockCookieName: function() {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

325955

increased by8.35%

Lines of code

2132

increased by4.2%

Worsened metrics

Number of package files

12

decreased by-20%

Dependency changes

• Updated@commercelayer/sdk@^1.5.1