{
                  let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
                  const index = selectedFilters.indexOf($event.target.value);
                  const name = $event.target.name;
                  const value = $event.target.value;
                  if (index > -1) { // only splice array when item is found
                    selectedFilters.splice(index, 1); // 2nd parameter means remove one item only
                  }else{
                    selectedFilters.push($event.target.value.trim())
                  }
                  if (!queryString.includes('availability')){
                    query = queryString + '&filter.v.availability=1'
                  }else{
                    query = queryString
                  }
                  loading = true;
                  localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
                  if (!selectedFilters.length){
                      query = ''
                    }
              fetch(`/collections/trino-cozy-crew?` + query)
                .then(response => response.text())
                .then(data => {
                  let html_div = document.createElement('div');
                  html_div.innerHTML = data;
                  const urlParams = new URLSearchParams(query);
                  const sorty_by_param = 'sort_by';
                  if (name == 'sort_by') {
                    const sort_by = html_div.querySelector(`[value=${value}]`);
                    sort_by.checked = true;
                    sort_by.setAttribute('checked','checked');
                  } else if (urlParams.has(`${sorty_by_param}`)) {
                    const sort_by_value = urlParams.get(`${sorty_by_param}`);
                    const sort_by = html_div.querySelector(`[value=${sort_by_value}]`);
                    sort_by.checked = true;
                    sort_by.setAttribute('checked','checked');
                  }
                  let html_dom = html_div.querySelector('#ProductGridContainer').innerHTML;
                  document.querySelector('#ProductGridContainer').innerHTML = html_dom;
                  // update url without refreshing the page
                  history.pushState(null, null, '?' + query);
                  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) => {
                    details.open=window.matchMedia('(min-width: 990px)').matches;
                  })
                  setTimeout(() => {
                    hideOutOfStockProducts(getSelectedSizes());
                  }, 100);
                  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;
          selectedFilters = []
          localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
          fetch(`/collections/trino-cozy-crew`)
            .then(response => response.text())
            .then(data => {
              let html_div = document.createElement('div');
              html_div.innerHTML = data;
              html_div.querySelector(`[name=\'recommended\']`).setAttribute('checked','checked');
              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/trino-cozy-crew');
              document.querySelectorAll('#product_grid details').forEach((details) => {
                if (window.matchMedia('(min-width: 990px)').matches) {
                  details.open = true
                } else {
                  details.open = false
                }
              })
              setTimeout(() => {
                const productItems = document.querySelectorAll('.product-grid-item');
                productItems.forEach(item => {
                  item.style.display = '';
                });
              }, 100);
              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;
          console.log(selectedFilters)
          const index = selectedFilters.indexOf($event.target.getAttribute('data-selected-filter-value'));
          if (index > -1) { // only splice array when item is found
            selectedFilters.splice(index, 1); // 2nd parameter means remove one item only
          }
          localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
          let fetchUrl = ''
          if (!selectedFilters.length){
            fetchUrl = $event.detail.new_url.split('?').slice(0, -1)[0]
          }else{
            fetchUrl = $event.detail.new_url
          }
          fetch(fetchUrl)
            .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, fetchUrl);
              document.querySelectorAll('#product_grid details').forEach((details) => {
                if (window.matchMedia('(min-width: 990px)').matches) {
                  details.open = true
                } else {
                  details.open = false
                }
              })
              setTimeout(() => {
                const productItems = document.querySelectorAll('.product-grid-item');
                productItems.forEach(item => {
                  item.style.display = '';
                });
              }, 100);
              setTimeout(() => {
                hideOutOfStockProducts(getSelectedSizes());
              }, 100);
              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('[data-product-pagination] [data-load-more]');
              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 unicTitles = document.querySelectorAll('.product-grid-item');
              let unicResults = [];
              unicTitles.forEach(unic => {
                if (!unicResults.includes(unic.getAttribute('data-swatch-collection-handle'))) {
                  unicResults.push(unic.getAttribute('data-swatch-collection-handle'));
                }
                else {
                  unic.style.display = 'none';
                }
              });
              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
                }
              })
              setTimeout(() => {
                const productItems = document.querySelectorAll('.product-grid-item');
                productItems.forEach(item => {
                  item.style.display = '';
                });
              }, 100);
              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);
        })
      "
      @filter-apply.window="
        $nextTick(() => {
                  let queryString = new URLSearchParams(new FormData($refs.filter_form)).toString();
                  const index = selectedFilters.indexOf($event.target.value);
                  if (index > -1) { // only splice array when item is found
                    selectedFilters.splice(index, 1); // 2nd parameter means remove one item only
                  }else{
                    selectedFilters.push($event.target.value.trim())
                  }
                  if (!queryString.includes('availability')){
                    query = queryString + '&filter.v.availability=1'
                  }else{
                    query = queryString
                  }
                  loading = true;
                  localStorage.setItem('selected_filters', JSON.stringify(selectedFilters))
                  if (!selectedFilters.length){
                      query = ''
                    }
              fetch(`/collections/trino-cozy-crew?` + query)
                .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, '?' + query);
                  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) => {
                    details.open=window.matchMedia('(min-width: 990px)').matches;
                  })
                  setTimeout(() => {
                    hideOutOfStockProducts(getSelectedSizes());
                  }, 100);
                  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);
          document.getElementById('facet-toggle').click();
        })
      "
    >
  
    
  