Add wishlist event hooks (#19) (#20)

Author: dlerm

assets/Wishlist.js

@@ -1,18 +1,29 @@
 var LOCAL_STORAGE_WISHLIST_KEY = 'shopify-wishlist';
 var LOCAL_STORAGE_DELIMITER = ',';
 var BUTTON_ACTIVE_CLASS = 'active';
+var GRID_LOADED_CLASS = 'loaded';
 
 var selectors = {
   button: '[button-wishlist]',
   grid: '[grid-wishlist]',
 };
 
 document.addEventListener('DOMContentLoaded', function () {
-  var buttons = document.querySelectorAll(selectors.button) || [];
-  if (buttons.length) setupButtons(buttons);
+  initButtons();
+  initGrid();
+});
 
-  var grid = document.querySelector(selectors.grid) || false;
-  if (grid) setupGrid(grid);
+document.addEventListener('shopify-wishlist:updated', function (event) {
+  console.log('[Shopify Wishlist] Wishlist Updated ✅', event.detail.wishlist);
+  initGrid();
+});
+
+document.addEventListener('shopify-wishlist:init-product-grid', function (event) {
+  console.log('[Shopify Wishlist] Wishlist Product List Loaded ✅', event.detail.wishlist);
+});
+
+document.addEventListener('shopify-wishlist:init-buttons', function (event) {
+  console.log('[Shopify Wishlist] Wishlist Buttons Loaded ✅', event.detail.wishlist);
 });
 
 var setupGrid = function (grid) {
@@ -26,15 +37,20 @@ var setupGrid = function (grid) {
   Promise.all(requests).then(function (responses) {
     var wishlistProductCards = responses.join('');
     grid.innerHTML = wishlistProductCards;
-    var buttons = grid.querySelectorAll(selectors.button) || [];
-    if (buttons.length) setupButtons(buttons);
+    grid.classList.add(GRID_LOADED_CLASS);
+    initButtons();
+
+    var 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;
-    if (!productHandle) return console.error('[Wishlist] Missing `data-product-handle` attribute. Failed to update the wishlist.');
+    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 () {
       updateWishlist(productHandle);
@@ -43,6 +59,21 @@ var setupButtons = function (buttons) {
   });
 };
 
+var initGrid = function () {
+  var grid = document.querySelector(selectors.grid) || false;
+  if (grid) setupGrid(grid);
+};
+
+var initButtons = function () {
+  var buttons = document.querySelectorAll(selectors.button) || [];
+  if (buttons.length) setupButtons(buttons);
+  else return;
+  var 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;
   if (wishlist) return wishlist.split(LOCAL_STORAGE_DELIMITER);
@@ -53,6 +84,12 @@ var setWishlist = function (array) {
   var 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', {
+    detail: { wishlist: array }
+  });
+  document.dispatchEvent(event);
+
   return wishlist;
 };
 

tasks/copy.js

@@ -8,6 +8,7 @@ const liquidPaths = [
   '*snippets/**/*',
   '*sections/**/*',
   '*templates/**/*',
+  '*layout/**/*',
 ];
 
 function renameHiddenFiles (path) {