Multiple add to compare and add to wishlist

Author: jissereitsma

view/frontend/templates/script/component/category/add-to-compare.phtml

@@ -9,11 +9,17 @@ use Magento\Framework\View\Element\Template;
 ?>
 <script>
     document.addEventListener('alpine:init', () => {
-        const forms = document.querySelectorAll('[data-js-component="LumaAddToCompare"]');
-        if (!forms) {
+        const elements = [...document.querySelectorAll('[data-js-component="LumaAddToCompare"]')];
+        if (!elements) {
             return;
         }
 
-        console.log('add to compare');
+        elements.forEach(element => {
+            element.addEventListener('click', (e) => {
+                e.preventDefault();
+
+                LokiDataPost(element);
+            });
+        })
     });
 </script>

view/frontend/templates/script/component/category/add-to-wishlist.phtml

@@ -8,21 +8,23 @@ use Magento\Framework\View\Element\Template;
 ?>
 <script>
     document.addEventListener('alpine:init', () => {
-        const element = document.querySelector('[data-js-component="LumaAddToWishlist"]');
-        if (!element) {
+        const elements = [...document.querySelectorAll('[data-js-component="LumaAddToWishlist"]')];
+        if (!elements.length > 0) {
             return;
         }
 
-        element.addEventListener('click', (e) => {
-            e.preventDefault();
+        elements.forEach((element) => {
+            element.addEventListener('click', (e) => {
+                e.preventDefault();
 
-            const customerSection = Alpine.store('LokiLocalStorage').get('customer');
-            if (!customerSection.fullname) {
-                Alpine.store('LokiMessageStore').addNoticeMessage('<?= __('You need to login to use the wishlist') ?>');
-                return;
-            }
+                const customerSection = Alpine.store('LokiLocalStorage').get('customer');
+                if (!customerSection.fullname) {
+                    Alpine.store('LokiMessageStore').addNoticeMessage('<?= __('You need to login to use the wishlist') ?>');
+                    return;
+                }
 
-            LokiDataPost(element);
+                LokiDataPost(element);
+            });
         })
     });
 </script>