Upgrade to ES6+ syntax (#25)

Author: dlerm

assets/Wishlist.js

@@ -1,118 +1,120 @@
-var LOCAL_STORAGE_WISHLIST_KEY = 'shopify-wishlist';
-var LOCAL_STORAGE_DELIMITER = ',';
-var BUTTON_ACTIVE_CLASS = 'active';
-var GRID_LOADED_CLASS = 'loaded';
+const LOCAL_STORAGE_WISHLIST_KEY = 'shopify-wishlist';
+const LOCAL_STORAGE_DELIMITER = ',';
+const BUTTON_ACTIVE_CLASS = 'active';
+const GRID_LOADED_CLASS = 'loaded';
 
-var selectors = {
+const selectors = {
   button: '[button-wishlist]',
   grid: '[grid-wishlist]',
   productCard: '.product-card',
 };
 
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', () => {
   initButtons();
   initGrid();
 });
 
-document.addEventListener('shopify-wishlist:updated', function (event) {
+document.addEventListener('shopify-wishlist:updated', (event) => {
   console.log('[Shopify Wishlist] Wishlist Updated ✅', event.detail.wishlist);
   initGrid();
 });
 
-document.addEventListener('shopify-wishlist:init-product-grid', function (event) {
+document.addEventListener('shopify-wishlist:init-product-grid', (event) => {
   console.log('[Shopify Wishlist] Wishlist Product List Loaded ✅', event.detail.wishlist);
 });
 
-document.addEventListener('shopify-wishlist:init-buttons', function (event) {
+document.addEventListener('shopify-wishlist:init-buttons', (event) => {
   console.log('[Shopify Wishlist] Wishlist Buttons Loaded ✅', event.detail.wishlist);
 });
 
-var setupGrid = function (grid) {
-  var wishlist = getWishlist();
-  var requests = wishlist.map(function (handle) {
-    var productTileTemplateUrl = '/products/' + handle + '?view=card';
-    return fetch(productTileTemplateUrl)
-    .then(function (res) { return res.text() })
-    .then(function (res) {
-      var text = res;
-      var parser = new DOMParser();
-      var htmlDocument = parser.parseFromString(text, "text/html");
-      var productCard = htmlDocument.documentElement.querySelector(selectors.productCard);
-      return productCard.outerHTML;
-    });
-  });
-  Promise.all(requests).then(function (responses) {
-    var wishlistProductCards = responses.join('');
-    grid.innerHTML = wishlistProductCards;
-    grid.classList.add(GRID_LOADED_CLASS);
-    initButtons();
-
-    var event = new CustomEvent('shopify-wishlist:init-product-grid', {
-      detail: { wishlist: wishlist }
-    });
-    document.dispatchEvent(event);
+const fetchProductCardHTML = (handle) => {
+  const productTileTemplateUrl = `/products/${handle}?view=card`;
+  return fetch(productTileTemplateUrl)
+  .then((res) => res.text())
+  .then((res) => {
+    const text = res;
+    const parser = new DOMParser();
+    const htmlDocument = parser.parseFromString(text, 'text/html');
+    const productCard = htmlDocument.documentElement.querySelector(selectors.productCard);
+    return productCard.outerHTML;
+  })
+  .catch((err) => console.error(`[Shopify Wishlist] Failed to load content for handle: ${handle}`, err));
+};
+
+const setupGrid = async (grid) => {
+  const wishlist = getWishlist();
+  const requests = wishlist.map(fetchProductCardHTML);
+  const responses = await Promise.all(requests);
+  const wishlistProductCards = responses.join('');
+  grid.innerHTML = wishlistProductCards;
+  grid.classList.add(GRID_LOADED_CLASS);
+  initButtons();
+
+  const event = new CustomEvent('shopify-wishlist:init-product-grid', {
+    detail: { wishlist: wishlist }
   });
+  document.dispatchEvent(event);
 };
 
-var setupButtons = function (buttons) {
-  buttons.forEach(function (button) {
-    var productHandle = button.dataset.productHandle || false;
+const setupButtons = (buttons) => {
+  buttons.forEach((button) => {
+    const productHandle = button.dataset.productHandle || false;
     if (!productHandle) return console.error('[Shopify Wishlist] Missing `data-product-handle` attribute. Failed to update the wishlist.');
     if (wishlistContains(productHandle)) button.classList.add(BUTTON_ACTIVE_CLASS);
-    button.addEventListener('click', function () {
+    button.addEventListener('click', () => {
       updateWishlist(productHandle);
       button.classList.toggle(BUTTON_ACTIVE_CLASS);
     });
   });
 };
 
-var initGrid = function () {
-  var grid = document.querySelector(selectors.grid) || false;
+const initGrid = () => {
+  const grid = document.querySelector(selectors.grid) || false;
   if (grid) setupGrid(grid);
 };
 
-var initButtons = function () {
-  var buttons = document.querySelectorAll(selectors.button) || [];
+const initButtons = () => {
+  const buttons = document.querySelectorAll(selectors.button) || [];
   if (buttons.length) setupButtons(buttons);
   else return;
-  var event = new CustomEvent('shopify-wishlist:init-buttons', {
+  const event = new CustomEvent('shopify-wishlist:init-buttons', {
     detail: { wishlist: getWishlist() }
   });
   document.dispatchEvent(event);
 };
 
-var getWishlist = function () {
-  var wishlist = localStorage.getItem(LOCAL_STORAGE_WISHLIST_KEY) || false;
+const getWishlist = () => {
+  const wishlist = localStorage.getItem(LOCAL_STORAGE_WISHLIST_KEY) || false;
   if (wishlist) return wishlist.split(LOCAL_STORAGE_DELIMITER);
   return [];
 };
 
-var setWishlist = function (array) {
-  var wishlist = array.join(LOCAL_STORAGE_DELIMITER);
+const setWishlist = (array) => {
+  const wishlist = array.join(LOCAL_STORAGE_DELIMITER);
   if (array.length) localStorage.setItem(LOCAL_STORAGE_WISHLIST_KEY, wishlist);
   else localStorage.removeItem(LOCAL_STORAGE_WISHLIST_KEY);
 
-  var event = new CustomEvent('shopify-wishlist:updated', {
+  const event = new CustomEvent('shopify-wishlist:updated', {
     detail: { wishlist: array }
   });
   document.dispatchEvent(event);
 
   return wishlist;
 };
 
-var updateWishlist = function (handle) {
-  var wishlist = getWishlist();
-  var indexInWishlist = wishlist.indexOf(handle);
+const updateWishlist = (handle) => {
+  const wishlist = getWishlist();
+  const indexInWishlist = wishlist.indexOf(handle);
   if (indexInWishlist === -1) wishlist.push(handle);
   else wishlist.splice(indexInWishlist, 1);
   return setWishlist(wishlist);
 };
 
-var wishlistContains = function (handle) {
-  var wishlist = getWishlist();
-  return wishlist.indexOf(handle) !== -1;
+const wishlistContains = (handle) => {
+  const wishlist = getWishlist();
+  return wishlist.includes(handle);
 };
 
-var resetWishlist = function () {
+const resetWishlist = () => {
   return setWishlist([]);
 };