commercelayer - npm Package Compare versions

Comparing version 1.1.6 to 1.1.7

package.json

 {
   "name": "commercelayer",
-  "version": "1.1.6",
-  "description": "The official Commerce Layer JS library",
+  "version": "1.1.7",
+  "description": "The Official Commerce Layer JS library",
   "main": "./src/main.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
@@ -16,3 +17,4 @@ "repository": {
     "headless",
-    "ecommerce"
+    "ecommerce",
+    "api"
   ],
@@ -28,3 +30,7 @@ "author": "Filippo Conforti",
     "json-api-normalize": "^1.1.5"
+  },
+  "devDependencies": {
+    "webpack": "^4.26.1",
+    "webpack-cli": "^3.1.2"
   }
 }

src/api.js

@@ -29,2 +29,4 @@ const elements = require('./elements')
         'prices.formatted_compare_at_amount',
+        'prices.amount_cents',
+        'prices.compare_at_amount_cents'
       ]
@@ -80,13 +82,25 @@
 
-            var variant = document.querySelector('.variant[data-sku-code=' + skus[i].code + ']')
+            var variant = document.querySelector('.clayer-variant[data-sku-code="' + skus[i].code + '"]')
             if (variant) {
               variant.value = skus[i].id
               ui.enableElement(variant)
+              if (skus.length == 1) {
+                module.exports.getInventory(variant.value, variant.dataset.skuName)
+              }
             }
-
           }
         })
-
     }
   },
+  getInventory: function(skuId, skuName) {
+    axios
+      .get('/api/skus/' + skuId + '?fields[skus]=inventory')
+      .then(function(response) {
+        var sku = response.data.data
+        if (sku.attributes.inventory.available) {
+          ui.updateAddToBag(skuId, skuName)
+          ui.updateAvailableMessage(sku.attributes.inventory)
+        }
+      })
+  },
   createOrder: function() {
@@ -121,2 +135,3 @@ return axios
           utils.deleteOrderToken()
+          ui.clearShoppingBag()
         }
@@ -203,6 +218,6 @@ })
   },
-  updateShoppingBagTable: function(order) {
+  updateShoppingBagItems: function(order) {
     var api = this
-    var $shoppingBagTable = elements.shoppingBagTable
-    if ($shoppingBagTable) {
+    var $shoppingBagItemsContainer = elements.shoppingBagItemsContainer
+    if ($shoppingBagItemsContainer) {
 
@@ -228,3 +243,3 @@ var normalized_order = normalize(order).get([
 
-        $shoppingBagTable.innerHTML = ''
+        $shoppingBagItemsContainer.innerHTML = ''
 
@@ -237,52 +252,61 @@ for (var i = 0; i < normalized_order.line_items.length; i++) {
 
-            var tableRow = document.createElement('tr')
+            $shoppingBagItemTemplate = elements.shoppingBagItemTemplate
 
-            ui.addTableColImage(tableRow, line_item.image_url, 'shopping-bag-col-image')
+            if ($shoppingBagItemTemplate) {
 
-            ui.addTableColText(tableRow, line_item.name, 'shopping-bag-col-name')
+              if ($shoppingBagItemTemplate.tagName == "TEMPLATE") {
+                $shoppingBagItem = $shoppingBagItemTemplate.content.cloneNode(true)
+              } else {
+                $shoppingBagItem = $shoppingBagItemTemplate.cloneNode(true)
+              }
 
-            var quantitySelect = document.createElement('select')
-            quantitySelect.dataset.lineItemId = line_item.id
+              // image
+              $shoppingBagItemImage = $shoppingBagItem.querySelector('.clayer-shopping-bag-item-image')
+              $shoppingBagItemImage.src = line_item.image_url
 
-            for (var qty = 1; qty <= 10; qty++) {
-                var option = document.createElement("option");
-                option.value = qty;
-                option.text = qty;
-                if (qty == line_item.quantity) {
-                  option.selected = true
-                }
-                quantitySelect.appendChild(option)
-            }
+              // name
+              $shoppingBagItemName = $shoppingBagItem.querySelector('.clayer-shopping-bag-item-name')
+              $shoppingBagItemName.innerHTML = line_item.name
 
-            quantitySelect.addEventListener('change', function(event){
-              api.updateLineItemQty(this.dataset.lineItemId, this.value)
-            })
+              // qty
+              $shoppingBagItemQtyContainer = $shoppingBagItem.querySelector('.clayer-shopping-bag-item-qty-container')
+              $qtySelect = document.createElement('select')
+              $qtySelect.dataset.lineItemId = line_item.id
 
-            var quantitySelectWrap = document.createElement('div')
-            quantitySelectWrap.classList.add('select')
-            quantitySelectWrap.appendChild(quantitySelect)
+              for (var qty = 1; qty <= 10; qty++) {
+                  $option = document.createElement("option")
+                  $option.value = qty
+                  $option.text = qty
+                  if (qty == line_item.quantity) {
+                    $option.selected = true
+                  }
+                  $qtySelect.appendChild($option)
+              }
 
-            ui.addTableColElement(tableRow, quantitySelectWrap, 'shopping-bag-col-qty')
+              $qtySelect.addEventListener('change', function(event){
+                api.updateLineItemQty(this.dataset.lineItemId, this.value)
+              })
+              $shoppingBagItemQtyContainer.appendChild($qtySelect)
 
+              // unit_amount
+              $shoppingBagItemUnitAmount = $shoppingBagItem.querySelector('.clayer-shopping-bag-item-unit-amount')
+              $shoppingBagItemUnitAmount.innerHTML = line_item.formatted_unit_amount
 
-            ui.addTableColText(tableRow, line_item.formatted_total_amount, 'shopping-bag-col-total')
+              // total_amount
+              $shoppingBagItemTotalAmount = $shoppingBagItem.querySelector('.clayer-shopping-bag-item-total-amount')
+              $shoppingBagItemTotalAmount.innerHTML = line_item.formatted_total_amount
 
-            // remove
-            var removeLink = document.createElement('a')
-            var removeLinkText = document.createTextNode('X')
-            removeLink.appendChild(removeLinkText)
-            removeLink.dataset.lineItemId = line_item.id
-
-            removeLink.addEventListener('click', function(event){
-              event.preventDefault()
-              this.parentElement.parentElement.remove()
-              api.deleteLineItem(this.dataset.lineItemId).then(function(lineItem){
-                api.getOrder()
+              // remove
+              $shoppingBagItemRemove = $shoppingBagItem.querySelector('.clayer-shopping-bag-item-remove')
+              $shoppingBagItemRemove.dataset.lineItemId = line_item.id
+              $shoppingBagItemRemove.addEventListener('click', function(event){
+                event.preventDefault()
+                api.deleteLineItem(this.dataset.lineItemId).then(function(lineItem){
+                  api.getOrder()
+                })
               })
-            })
-            ui.addTableColElement(tableRow, removeLink, 'shopping-bag-col-remove')
 
+              $shoppingBagItemsContainer.appendChild($shoppingBagItem)
 
-            $shoppingBagTable.appendChild(tableRow)
-
+            }
           }
@@ -302,3 +326,3 @@ }
         if (response.data.data.length > 0) {
-          api.updateShoppingBagTable(response.data)
+          api.updateShoppingBagItems(response.data)
           ui.hideShoppingBagUnavailableMessage()
@@ -305,0 +329,0 @@ ui.updateShoppingBagPreview(response.data.data[0])

src/auth.js

@@ -5,2 +5,6 @@ const axios = require('axios')
 
+function accessTokenCookieName() {
+  return 'access_token_${config.clientId()}_${config.marketId()}'
+}
+
 function getAccessToken() {
@@ -14,3 +18,3 @@ return axios
     .then(function (response) {
-      utils.setCookie('access_token_' + config.marketId(), response.data.access_token, response.data.expires_in)
+      utils.setCookie(accessTokenCookieName(), response.data.access_token, response.data.expires_in)
       return response.data.access_token
@@ -26,3 +30,3 @@ })
 axios.interceptors.request.use(function (requestConfig) {
-  requestConfig.headers.Authorization = 'Bearer ' + utils.getCookie('access_token_' + config.marketId())
+  requestConfig.headers.Authorization = 'Bearer ' + utils.getCookie(accessTokenCookieName())
   return requestConfig
@@ -29,0 +33,0 @@ }, function (error) {

src/config.js

@@ -0,56 +1,31 @@
+const elements = require('./elements')
+
 module.exports = {
   baseUrl: function() {
-    var $baseUrl = document.querySelector('#commercelayer[data-base-url]')
-    if ($baseUrl) {
-      return $baseUrl.dataset.baseUrl
-    }
+    return elements.config.dataset.baseUrl
   },
   clientId: function() {
-    var $cliendId = document.querySelector('#commercelayer[data-client-id]')
-    if ($cliendId) {
-      return $cliendId.dataset.clientId
-    }
+    return elements.config.dataset.clientId
   },
   marketId: function() {
-    var $market = document.querySelector('#commercelayer[data-market-id]')
-    if ($market) {
-      return $market.dataset.marketId
-    }
+    return elements.config.dataset.marketId
   },
   countryCode: function() {
-    var $country = document.querySelector('#commercelayer[data-country-code]')
-    if ($country) {
-      return $country.dataset.countryCode
-    }
+    return elements.config.dataset.countryCode
   },
   languageCode: function() {
-    var $language = document.querySelector('#commercelayer[data-language-code]')
-    if ($language) {
-      return $language.dataset.languageCode.split("-")[0]
-    }
+    return elements.config.dataset.languageCode.split("-")[0]
   },
   cartUrl: function() {
-    var $cartUrl = document.querySelector('#commercelayer[data-cart-url]')
-    if ($cartUrl) {
-      return $cartUrl.dataset.cartUrl
-    }
+    return elements.config.dataset.cartUrl
   },
   returnUrl: function() {
-    var $returnUrl = document.querySelector('#commercelayer[data-return-url]')
-    if ($returnUrl) {
-      return $returnUrl.dataset.cartUrl
-    }
+    return elements.config.dataset.returnUrl
   },
   privacyUrl: function() {
-    var $privacyUrl = document.querySelector('#commercelayer[data-privacy-url]')
-    if ($privacyUrl) {
-      return $privacyUrl.dataset.privacyUrl
-    }
+    return elements.config.dataset.privacyUrl
   },
   termsUrl: function() {
-    var $termsUrl = document.querySelector('#commercelayer[data-terms-url]')
-    if ($termsUrl) {
-      return $termsUrl.dataset.termsUrl
-    }
+    return elements.config.dataset.termsUrl
   }
 }

src/elements.js

 module.exports = {
-  addToBag: document.querySelector(".add-to-bag"),
-  availableMessage: document.querySelector('.available-message'),
-  main: document.querySelector('#main'),
-  prices: Array.prototype.slice.call(document.querySelectorAll('.price'), 0),
-  shoppingBag: document.querySelector('#shopping-bag'),
-  shoppingBagCheckout: document.querySelector('#shopping-bag-checkout'),
-  shoppingBagClose: document.querySelector('#shopping-bag-close'),
-  shoppingBagPreviewCount: document.querySelector('#shopping-bag-preview-count'),
-  shoppingBagPreviewTotal: document.querySelector('#shopping-bag-preview-total'),
-  shoppingBagTable: document.querySelector('#shopping-bag-table'),
-  shoppingBagToggle: document.querySelector('#shopping-bag-toggle'),
-  shoppingBagUnavailableMessage: document.querySelector('.shopping-bag-unavailable-message'),
-  unavailableMessage: document.querySelector('.unavailable-message'),
-  variants: Array.prototype.slice.call(document.querySelectorAll('.variant'), 0)
+  addToBag: document.querySelector(".clayer-add-to-bag"),
+  availableMessage: document.querySelector('.clayer-available-message'),
+  config: document.querySelector('#clayer-config'),
+  main: document.querySelector('#clayer-main'),
+  prices: Array.prototype.slice.call(document.querySelectorAll('.clayer-price'), 0),
+
+  shoppingBagContainer: document.querySelector('#clayer-shopping-bag-container'),
+  shoppingBagItemsContainer: document.querySelector('#clayer-shopping-bag-items-container'),
+  shoppingBagItemTemplate: document.querySelector('#clayer-shopping-bag-item-template'),
+
+  shoppingBagCheckout: document.querySelector('#clayer-shopping-bag-checkout'),
+  shoppingBagClose: document.querySelector('#clayer-shopping-bag-close'),
+
+  shoppingBagPreviewCount: document.querySelector('#clayer-shopping-bag-preview-count'),
+  shoppingBagPreviewTotal: document.querySelector('#clayer-shopping-bag-preview-total'),
+  shoppingBagToggle: document.querySelector('#clayer-shopping-bag-toggle'),
+
+  shoppingBagUnavailableMessage: document.querySelector('.clayer-shopping-bag-unavailable-message'),
+  unavailableMessage: document.querySelector('.clayer-unavailable-message'),
+  variants: Array.prototype.slice.call(document.querySelectorAll('.clayer-variant'), 0),
+
+  variantSelect: document.querySelector('.clayer-variant-select')
 }

src/listeners.js

 const elements = require('./elements')
 const axios = require('axios')
 const auth = require('./auth')
-
 const ui = require('./ui')
@@ -12,17 +11,11 @@ const api = require('./api')
 
-    var $variantSelect = document.querySelector('.variant-select')
+    var $variantSelect = elements.variantSelect
 
     if ($variantSelect) {
-      $variantSelect.addEventListener('change', function () {
-        var skuId = this.value
-        var skuOptionText = this.options[this.selectedIndex].text;
-        axios
-          .get('/api/skus/' + skuId + '?fields[skus]=inventory')
-          .then(function(response) {
-            var sku = response.data.data
-            if (sku.attributes.inventory.available) {
-              ui.updateAddToBag(skuId, skuOptionText)
-              ui.updateAvailableMessage(sku.attributes.inventory)
-            }
-          })
+      $variantSelect.addEventListener('change', api.getInventory($variantSelect.value, $variantSelect.options[this.selectedIndex].dataset.skuName))
+    } else { // radio
+      $variants = elements.variants
+      $variants.forEach(function (variant) {
+        console.log(variant)
+        variant.addEventListener('click', api.getInventory(variant.value, variant.dataset.skuName))
       })
@@ -29,0 +22,0 @@ }

src/main.js

 const api = require('./api')
 const listeners = require('./listeners')
+const utils = require('./utils')
 
 exports.init = function() {
-  api.refreshOrder()
   api.getPrices()
@@ -12,2 +12,3 @@ api.getVariants()
   listeners.setShoppingBagClose()
+  api.refreshOrder()
 }

src/ui.js

@@ -33,13 +33,15 @@ const elements = require('./elements')
     for (var k = 0; k < skus.length; k++) {
-      var priceAmount = document.querySelector('[data-sku-code=' + skus[k].code + '] > .amount')
+      var priceAmount = document.querySelector('[data-sku-code="' + skus[k].code + '"] > .amount')
       if (priceAmount) {
         priceAmount.innerHTML = skus[k].prices[0].formatted_amount
       }
-      var priceCompareAmount = document.querySelector('[data-sku-code=' + skus[k].code + '] > .compare-at-amount')
+      var priceCompareAmount = document.querySelector('[data-sku-code="' + skus[k].code + '"] > .compare-at-amount')
       if (priceCompareAmount) {
-        priceCompareAmount.innerHTML = skus[k].prices[0].formatted_compare_at_amount
+        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
+        }
       }
     }
   },
-  updateAddToBag: function(skuId, skuOptionText) {
+  updateAddToBag: function(skuId, skuName) {
 
@@ -50,3 +52,3 @@ var $addToBag = elements.addToBag
       $addToBag.dataset.skuId = skuId
-      $addToBag.dataset.skuName = $addToBag.dataset.productName + ' (' + skuOptionText + ')'
+      $addToBag.dataset.skuName = skuName
       this.enableElement($addToBag)
@@ -86,3 +88,2 @@ }
   },
-
   updateShoppingBagPreview: function(order) {
@@ -120,5 +121,5 @@ var $shoppingBagPreviewCount = elements.shoppingBagPreviewCount
   toggleShoppingBag: function() {
-    $shoppingBag = elements.shoppingBag
-    if ($shoppingBag) {
-      $shoppingBag.classList.toggle("open")
+    $shoppingBagContainer = elements.shoppingBagContainer
+    if ($shoppingBagContainer) {
+      $shoppingBagContainer.classList.toggle("open")
     }
@@ -131,5 +132,5 @@ $main = elements.main
   openShoppingBag: function() {
-    $shoppingBag = elements.shoppingBag
-    if ($shoppingBag) {
-      $shoppingBag.classList.add("open")
+    $shoppingBagContainer = elements.shoppingBagContainer
+    if ($shoppingBagContainer) {
+      $shoppingBagContainer.classList.add("open")
     }
@@ -142,5 +143,5 @@ $main = elements.main
   closeShoppingBag: function() {
-    $shoppingBag = elements.shoppingBag
-    if ($shoppingBag) {
-      $shoppingBag.classList.remove("open")
+    $shoppingBagContainer = elements.shoppingBagContainer
+    if ($shoppingBagContainer) {
+      $shoppingBagContainer.classList.remove("open")
     }
@@ -152,2 +153,5 @@ $main = elements.main
   },
+  clearShoppingBag: function() {
+    elements.shoppingBagItemsContainer.innerHTML = '';
+  },
   displayShoppingBagUnavailableMessage: function() {
@@ -154,0 +158,0 @@ this.displayElement(elements.shoppingBagUnavailableMessage)

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

54137

increased by143.02%

Number of package files

11

increased by22.22%

Lines of code

755

increased by16.33%

Worsened metrics

Dev dependency count

2

increased byInfinity%

No dependency changes