Merge pull request #36 from TheCodeRaccoons/Issue-35-adding-reset-ix-for-elements-only

FFEATURE: adding reset ix for filtered elements only

Author: JorchCortez

Dist/WebflowOnly/CMSFilter.js

@@ -33,6 +33,7 @@ class CMSFilter {
         this.sortOptions = document.querySelector('[wt-cmsfilter-element="sort-options"]');
         this.resultCount = document.querySelector('[wt-cmsfilter-element="results-count"]');
         this.emptyElement = document.querySelector('[wt-cmsfilter-element="empty"]');
+        this.resetIx2 = this.listElement.getAttribute('wt-cmsfilter-resetix2') || false;
 
         //Data Tracking Values
         this.allItems = [];
@@ -206,6 +207,7 @@ class CMSFilter {
                 const currentPage = this.filteredItems.slice(currentSlice, currentSlice + this.itemsPerPage);
                 currentPage.forEach(item => {
                     this.listElement.appendChild(item);
+                    if(this.resetIx2) this.ResetInteraction(item);
                 });
             }
         } else {
@@ -214,10 +216,6 @@ class CMSFilter {
             });
         }
 
-        var webflow = window.Webflow || [];
-        if(webflow) {
-            webflow.require('ix2').init();
-        }
         this.ToggleEmptyState();
         this.UpdatePaginationDisplay();
     }
@@ -292,7 +290,6 @@ class CMSFilter {
         this.SetActiveTags();
     }
 
-
     ShowResultCount() {
         if(!this.resultCount) return;
         this.resultCount.innerText = this.GetResults();
@@ -369,7 +366,6 @@ class CMSFilter {
         return filters;
     }
 
-
     GetDataSet(str) {
         return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
             return index === 0 ? word.toLowerCase() : word.toUpperCase();
@@ -565,6 +561,37 @@ class CMSFilter {
         this.ApplyFilters();
     }
 
+    ResetInteraction(element) {
+        if (!element) {
+            console.error('Element not found');
+            return;
+        }
+
+        const WebflowIX2 = window.Webflow && Webflow.require('ix2');
+        if (!WebflowIX2) {
+            console.error('Webflow IX2 engine not found.');
+            return;
+        }
+
+        const targetElement = element.hasAttribute('data-w-id') 
+            ? element 
+            : element.querySelector('[data-w-id]');
+        
+        if (!targetElement) {
+            console.warn('No IX2 interaction found on the element or its children.');
+            return;
+        }
+
+        const dataWId = targetElement.getAttribute('data-w-id');
+        if (dataWId) {
+            targetElement.removeAttribute('data-w-id');
+            targetElement.setAttribute('data-w-id', dataWId);
+
+            WebflowIX2.init();
+        } else {
+            console.warn('No valid data-w-id attribute found.');
+        }
+    }
 
     GetFilterData() {
         let filterData = {