{
                let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
                query = queryString
                loading = true;
            fetch(`/${this.urlParams.pathname.split('/')[1] === 'fr' ? this.urlParams.pathname.split('/')[1] + '/' : ''}collections/feeding-america-donation?` + queryString)
              .then(response => response.text())
              .then(data => {
                let html_div = document.createElement('div');
                html_div.innerHTML = data;
                let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
                document.querySelector('#ProductGridContainer').innerHTML = html_dom;
                // update url without refreshing the page
                history.pushState(null, null, '?' + queryString);
                if ($event.target.checked){
                  currentColor.push($event.target.value)
                }else{
                  const indexToRemove = currentColor.indexOf($event.target.value);
                  if (indexToRemove !== -1) {
                      currentColor.splice(indexToRemove, 1);
                  }
                }
                document.querySelectorAll('#product_grid details').forEach((details) => {
                  if (window.matchMedia('(min-width: 990px)').matches) {
                    details.open = false
                  } else {
                    details.open = false
                  }
                })
                const elements = document.querySelectorAll('.product_card--content');
                let maxHeight = 0;
                elements.forEach(element => {
                    const height = element.clientHeight;
                    if (height > maxHeight) {
                        maxHeight = height;
                    }
                });
                if (window.innerWidth <= 991){
                    elements.forEach(element => {
                        element.style.minHeight = maxHeight + 'px'
                   });
                 }
              })
              .catch(error => console.error('Error:', error))
              .finally(() => loading = false);
      })
    "
            @filter-clear.window="
      $nextTick(() => {
        loading = true;
        fetch(`/${this.urlParams.pathname.split('/')[1] === 'fr' ? this.urlParams.pathname.split('/')[1] + '/' : ''}collections/feeding-america-donation`)
          .then(response => response.text())
          .then(data => {
            let html_div = document.createElement('div');
            html_div.innerHTML = data;
            let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
            document.querySelector('#ProductGridContainer').innerHTML = html_dom;
            // update url without refreshing the page
            history.pushState(null, null, '/collections/feeding-america-donation');
            document.querySelectorAll('#product_grid details').forEach((details) => {
              if (window.matchMedia('(min-width: 990px)').matches) {
                details.open = true
              } else {
                details.open = false
              }
            })
            const elements = document.querySelectorAll('.product_card--content');
            let maxHeight = 0;
            elements.forEach(element => {
                const height = element.clientHeight;
                if (height > maxHeight) {
                    maxHeight = height;
                }
            });
            if (window.innerWidth <= 991){
                elements.forEach(element => {
                    element.style.minHeight = maxHeight + 'px'
                });
              }
          })
          .catch(error => console.error('Error:', error))
          .finally(() => {
           let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
            query = queryString
          loading = false
          });
              
      })
    "
            @filter-push.window="
            $nextTick(() => {
        loading = true;
        fetch($event.detail.new_url)
          .then(response => response.text())
          .then(data => {
            let html_div = document.createElement('div');
            html_div.innerHTML = data;
            let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
            document.querySelector('#ProductGridContainer').innerHTML = html_dom;
            // update url without refreshing the page
            history.pushState(null, null, $event.detail.new_url);
            document.querySelectorAll('#product_grid details').forEach((details) => {
              if (window.matchMedia('(min-width: 990px)').matches) {
                details.open = true
              } else {
                details.open = false
              }
            })
            const elements = document.querySelectorAll('.product_card--content');
            let maxHeight = 0;
            elements.forEach(element => {
                const height = element.clientHeight;
                if (height > maxHeight) {
                    maxHeight = height;
                }
            });
              if (window.innerWidth <= 991){
                elements.forEach(element => {
                    element.style.minHeight = maxHeight + 'px'
                });
              }
          })
          .catch(error => console.error('Error:', error))
          .finally(() => {
            let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
            query = queryString
            loading = false
          });
  
      })
    "
            @filter-more.window="
      $nextTick(() => {
        loading = true;
        fetch($event.detail.new_url)
          .then(response => response.text())
          .then(data => {
            let html_div = document.createElement('div');
            html_div.innerHTML = data;
            const button = document.querySelector('#product_pagination .button');
            const href = button.getAttribute('href');
            const url = new URL(href, window.location.origin);
            const pageValue = url.searchParams.get('page');
            if(pageValue && parseInt(pageValue) === parseInt(button.getAttribute('data-total-pages'))) {
              document.querySelector('#product_pagination').style.display = 'none';
            }
            let html_dom = html_div.querySelector('#product_grid').innerHTML;
            document.querySelector('#product_grid').innerHTML += html_dom;
            //document.querySelector('#product_grid').innerHTML = html_dom;
            let pagination_dom = html_div.querySelector('#product_pagination').innerHTML;
            if(document.querySelector('#product_pagination')) {
              document.querySelector('#product_pagination').innerHTML = pagination_dom;
            }
            document.querySelectorAll('#product_grid details').forEach((details) => {
              if (window.matchMedia('(min-width: 990px)').matches) {
                details.open = true
              } else {
                details.open = false
              }
            })
            const elements = document.querySelectorAll('.product_card--content');
            let maxHeight = 0;
            elements.forEach(element => {
                const height = element.clientHeight;
                if (height > maxHeight) {
                    maxHeight = height;
                }
            });
            elements.forEach(element => {
                element.style.minHeight = maxHeight + 'px'
            });
          })
          .catch(error => console.error('Error:', error))
          .finally(() => loading = false);
  
      })
    "
    >