commercelayer - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

package.json

 {
   "name": "commercelayer",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "The official Commerce Layer JS library",
@@ -5,0 +5,0 @@ "main": "./src/main.js",

src/main.js

@@ -0,1 +1,2 @@
+const elements = require('./elements')
 const axios = require('axios')
@@ -7,6 +8,7 @@ const normalize = require('json-api-normalize')
 const ui = require('./ui')
+const listeners = require('./listeners')
 
 function getPrices() {
 
-  var $prices = Array.prototype.slice.call(document.querySelectorAll('.price'), 0);
+  var $prices = elements.prices
 
@@ -54,33 +56,8 @@ if ($prices.length > 0) {
 
+function getVariants() {
 
-function getOrder() {
-  return axios
-    .get('/api/orders?include=line_items&filter[token]=' + utils.getOrderToken())
-    .then(function(response) {
-      if (response.data.data.length > 0) {
-        ui.hideShoppingBagUnavailableMessage()
-        updateShoppingBagPreview(response.data.data[0])
-        updateShoppingBagTable(response.data)
-        updateShoppingBagCheckoutLink(response.data)
-        return response.data.data[0]
-      }
-    })
-}
+  ui.disableElement(elements.addToBag)
 
-function refreshOrder() {
-  var orderToken = utils.getOrderToken()
-  if (orderToken) {
-    getOrder().then(function(order) {
-      if (order && order.attributes.status == 'placed') {
-        createOrder()
-        getOrder()
-      }
-    })
-  }
-}
+  var $variants = elements.variants
 
-function getVariants() {
-
-  var $variants = Array.prototype.slice.call(document.querySelectorAll('.variant'), 0);
-
   if ($variants.length > 0) {
@@ -90,4 +67,5 @@
 
-    $variants.forEach(function ($variant) {
-      skuCodes.push($variant.dataset.skuCode)
+    $variants.forEach(function (variant) {
+      ui.disableElement(variant)
+      skuCodes.push(variant.dataset.skuCode)
     })
@@ -108,3 +86,3 @@
             variant.value = skus[i].id
-            variant.removeAttribute('disabled')
+            ui.enableElement(variant)
           }
@@ -118,31 +96,26 @@
 
-function getInventory() {
+function getOrder() {
+  return axios
+    .get('/api/orders?include=line_items&filter[token]=' + utils.getOrderToken())
+    .then(function(response) {
+      if (response.data.data.length > 0) {
+        ui.hideShoppingBagUnavailableMessage()
+        updateShoppingBagPreview(response.data.data[0])
+        updateShoppingBagTable(response.data)
+        updateShoppingBagCheckoutLink(response.data)
+        return response.data.data[0]
+      }
+    })
+}
 
-  var $variantSelect = document.querySelector('.variant-select')
-
-  if ($variantSelect) {
-
-    $variantSelect.addEventListener('change', function () {
-
-      var skuId = this.value
-      var skuOptionText = this.options[this.selectedIndex].text;
-
-      axios
-        .get('/api/skus/' + skuId)
-        .then(function(response) {
-          var sku = normalize(response.data).get([
-            'id',
-            'inventory'
-          ])
-
-          if (sku.inventory.available) {
-            ui.updateAddToBagLink(skuId, skuOptionText)
-            ui.displayAvailableMessage(sku.inventory)
-          }
-        })
-
+function refreshOrder() {
+  var orderToken = utils.getOrderToken()
+  if (orderToken) {
+    getOrder().then(function(order) {
+      if (order && order.attributes.status == 'placed') {
+        createOrder()
+        getOrder()
+      }
     })
-
   }
-
 }
@@ -155,3 +128,4 @@
 function setupAddToShoppingBag() {
-  var $addToBag = document.querySelector(".add-to-bag")
+  var $addToBag = elements.addToBag
+
   if ($addToBag) {
@@ -435,5 +409,6 @@ $addToBag.addEventListener('click', function(event){
   getPrices()
+  getVariants()
+  listeners.updateVariantSelect()
 
   // refreshOrder()
-  // getVariants()
   // getInventory()
@@ -440,0 +415,0 @@ // setupAddToShoppingBag()

src/ui.js

@@ -0,3 +1,30 @@
+const elements = require('./elements')
+
 module.exports = {
-
+  enableElement: function(el) {
+    if (el) {
+      el.removeAttribute('disabled')
+    }
+  },
+  disableElement: function(el) {
+    if (el) {
+      el.setAttribute("disabled","disabled")
+    }
+  },
+  setElementHTML(selector, html) {
+    var $el = document.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) {
@@ -15,17 +42,18 @@ for (var k = 0; k < skus.length; k++) {
   },
-  toggleShoppingBag: function() {
-    document.querySelector('#shopping-bag').classList.toggle("open");
-    document.querySelector('#main').classList.toggle("open");
+  updateAddToBag: function(skuId, skuOptionText) {
+
+    var $addToBag = elements.addToBag
+
+    if ($addToBag) {
+      $addToBag.dataset.skuId = skuId
+      $addToBag.dataset.skuName = $addToBag.dataset.productName + ' (' + skuOptionText + ')'
+      this.enableElement($addToBag)
+    }
   },
-  openShoppingBag: function() {
-    document.querySelector('#shopping-bag').classList.add("open");
-    document.querySelector('#main').classList.add("open");
-  },
-  closeShoppingBag: function() {
-    document.querySelector('#shopping-bag').classList.remove("open");
-    document.querySelector('#main').classList.remove("open");
-  },
-  displayAvailableMessage: function(inventory) {
-    var $availableMessage = document.querySelector('.available-message')
+  updateAvailableMessage: function(inventory) {
+    var $availableMessage = elements.availableMessage
+    var $unavailableMessage = elements.unavailableMessage
 
+    this.hideElement($unavailableMessage)
+
     if ($availableMessage) {
@@ -47,50 +75,33 @@
         first_delivery_lead_time = first_level.delivery_lead_times[0]
-
-        var $availableMessageQty = document.querySelector('.available-message-qty')
-        if ($availableMessageQty) {
-          $availableMessageQty.innerHTML = first_level.quantity
-        }
-
-        var $availableMessageMinDays = document.querySelector('.available-message-min-days')
-        if ($availableMessageMinDays) {
-          $availableMessageMinDays.innerHTML = first_delivery_lead_time.min.days
-        }
-
-        var $availableMessageMaxDays = document.querySelector('.available-message-max-days')
-        if ($availableMessageMaxDays) {
-          $availableMessageMaxDays.innerHTML = first_delivery_lead_time.max.days
-        }
-
-        var $availableMessageShippingPrice = document.querySelector('.available-message-shipping-price')
-        if ($availableMessageShippingPrice) {
-          $availableMessageShippingPrice.innerHTML = first_delivery_lead_time.shipping_method.formatted_price_amount
-        }
-
-        $availableMessage.style.display = 'block'
-
+        this.setElementHTML('.available-message-qty', first_level.quantity)
+        this.setElementHTML('.available-message-min-days', first_delivery_lead_time.min.days)
+        this.setElementHTML('.available-message-max-days', first_delivery_lead_time.max.days)
+        this.setElementHTML('.available-message-shipping-price', first_delivery_lead_time.shipping_method.formatted_price_amount)
+        this.displayElement($availableMessage)
       }
 
     }
-
-    document.querySelector('.unavailable-message').style.display = 'none'
   },
   displayUnavailableMessage: function() {
-    document.querySelector('.available-message').style.display = 'none'
-    document.querySelector('.unavailable-message').style.display = 'block'
+    hideElement(elements.availableMessage)
+    displayElement(elements.unavailableMessage)
   },
+  toggleShoppingBag: function() {
+    elements.shoppingBag.classList.toggle("open")
+    elements.main.classList.toggle("open")
+  },
+  openShoppingBag: function() {
+    elements.shoppingBag.classList.add("open")
+    elements.main.classList.add("open")
+  },
+  closeShoppingBag: function() {
+    elements.shoppingBag.classList.remove("open")
+    elements.main.classList.remove("open")
+  },
   displayShoppingBagUnavailableMessage: function() {
-    document.querySelector('.shopping-bag-unavailable-message').style.display = 'block'
+    displayElement(elements.shoppingBagUnavailableMessage)
   },
   hideShoppingBagUnavailableMessage: function() {
-    document.querySelector('.shopping-bag-unavailable-message').style.display = 'none'
+    hideElement(elements.shoppingBagUnavailableMessage)
   },
-  updateAddToBagLink: function(skuId, skuOptionText) {
-    var $addToBag = document.querySelector(".add-to-bag")
-
-    if ($addToBag) {
-      $addToBag.dataset.skuId = skuId
-      $addToBag.dataset.skuName = $addToBag.dataset.productName + ' (' + skuOptionText + ')'
-      $addToBag.removeAttribute('disabled')
-    }
-  },
   addTableColText: function(tableRow, text, className) {
@@ -97,0 +108,0 @@ var tableCol = document.createElement('td')

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

20677

increased by2.41%

Number of package files

8

increased by33.33%

Lines of code

620

increased by5.62%

No dependency changes