https://www.boyzshop.com/cdn/shop/t/316/assets/collection-filter.js?v=78542925442335971831789750874

1class CollectionFilter extends HTMLElement{constructor(){super(),this.filterDropdown=this.querySelector("[js-filter-dropdown]"),this.filterContent=this.querySelector("[js-filter-content]"),this.dropdownItems=this.querySelectorAll("[js-dropdown-filter-title]"),this.dropdownContents=this.querySelectorAll("[js-dropdown-filter-content]"),this.filterItems=this.querySelectorAll("[js-filter-item]"),this.sortElement=this.querySelector("[js-filter-sort]"),this.activeItemCounts=this.querySelectorAll("[js-active-filter]"),this.activeTotalCount=this.querySelector("[js-active-total-count]"),this.isContain=!1,this.init()}init(){this.renderFilters(),this.sortEvents()}renderFilters(){let selectedFilter=null;const handle=this.getAttribute("data-collection-handle")?this.getAttribute("data-collection-handle"):"";(handle!=""||this.getAttribute("data-template").includes("search"))&&(collection_filters.forEach(filter=>{filter.handles.forEach(item=>{item==handle&&(selectedFilter=filter.filters)})}),selectedFilter==null&&(selectedFilter=collection_filters[0].filters),this.dropdownContents.forEach(content=>{let totalHtml="";const title=content.getAttribute("data-title"),prefix=content.getAttribute("data-filter-prefix"),filters=selectedFilter[title];filters&&(filters.forEach(filter=>{const html=`
2              <div class="filter-content--item" js-filter-item data-param="filter.p.tag">
3                <input class="hidden" type="checkbox" name="filter.p.tag" value="${encodeURIComponent(prefix+filter)}"/>
4                <label>${filter}</label>
5              </div>
6            `;totalHtml+=html}),content.innerHTML=totalHtml)})),this.filterItems=this.querySelectorAll("[js-filter-item]"),this.renderActiveFilters(),this.eventButtons(),this.eventFilters()}renderActiveFilters(){const url=window.location.href;if(url.split("?").length>0&&url.split("?")[1]){const facetItems=url.split("?")[1].split("&");let total_url="",arr=[];facetItems.forEach(facet=>{if(facet!=""){const param=facet.split("=")[0],val=facet.split("=")[1];if(param=="filter.p.tag"){const obj={param,value:val};arr.push(obj)}}}),arr.forEach(item=>{this.filterItems.forEach(filterItem=>{const input=filterItem.querySelector("input");item.value==input.value&&item.param==filterItem.getAttribute("data-param")&&(input.checked=!0)})});let total_count=0;this.activeItemCounts.forEach(countItem=>{let count=0;const title=countItem.getAttribute("data-title");this.filterItems.forEach(filterItem=>{title==filterItem.parentNode.getAttribute("data-title")&&filterItem.querySelector("input").checked&&count++}),countItem.setAttribute("data-count",count),count!=0&&(countItem.innerHTML=`(${count})`),total_count+=count}),this.activeTotalCount&&(this.activeTotalCount.innerHTML=total_count)}}eventButtons(){this.filterDropdown&&(document.body.addEventListener("click",e=>{this.filterDropdown.contains(e.target)?this.isContain=!0:this.filterContent.contains(e.target)?this.isContain=!0:this.isContain=!1,this.isContain||(this.filterDropdown.classList.remove("open"),this.filterContent.classList.remove("open"))}),this.filterDropdown.addEventListener("click",e=>{e.preventDefault(),this.filterDropdown.classList.contains("open")?(this.filterDropdown.classList.remove("open"),this.filterContent.classList.remove("open")):(this.filterDropdown.classList.add("open"),this.filterContent.classList.add("open"))})),this.dropdownItems.forEach(item=>{item.addEventListener("click",e=>{const title=item.getAttribute("data-title");this.dropdownItems.forEach(rmItem=>{rmItem.getAttribute("data-title")!=title&&rmItem.classList.remove("open")});let isOpen=!1;item.classList.contains("open")?item.classList.remove("open"):(item.classList.add("open"),isOpen=!0),this.dropdownContents.forEach(content=>{const content_title=content.getAttribute("data-title");title==content_title&&isOpen?content.classList.add("open"):content.classList.remove("open")})})})}eventFilters(){this.filterItems.forEach(filter=>{filter.addEventListener("click",e=>{e.preventDefault();const input=filter.querySelector("input");input.checked=!input.checked,input.checked?this.updateParams(filter):this.removeParam

6s(filter)})})}sortEvents(){this.sortElement&&(this.sortElement.addEventListener("change",e=>{e.preventDefault(),this.sortFunc()}),this.sortElement.addEventListener("click",e=>{e.preventDefault(),this.filterDropdown.classList.remove("open"),this.filterContent.classList.remove("open")}))}sortFunc(){let filter_str="",url="";const w_url=window.location.href;if(w_url.split("?").length>0){let filter_strs=w_url.split("?")[1];const sortElement=this.querySelector("[js-filter-sort]");if(sortElement){const sort_param=sortElement.name,sort_val=sortElement.value;let is_sort=!1;filter_strs&&filter_strs.includes("&")&&filter_strs.includes("filter.")&&filter_strs.split("&").forEach(filter=>{if(filter!=""){const param_name=filter.split("=")[0],value=filter.split("=")[1];param_name=="sort_by"?(is_sort=!0,filter_str+=`${sort_param}=${sort_val}&`):filter_str+=`${param_name}=${value}&`}}),is_sort||(filter_str+=`${sort_param}=${sort_val}&`),url=`${window.location.pathname}?${filter_str}`;let template_val="collection";template_val=this.getAttribute("data-template"),template_val.includes("collection")||(url+=`type=product&q=${this.getAttribute("data-search")}&`),fetch(`${url}view=json`).then(res=>res.text()).then(text=>{const cHtml=document.getElementById("ProductGridContainer");cHtml&&(cHtml.innerHTML=text),window.history.pushState(null,"",url),this.changePaginationLinks()})}}}removeParams(activeFilter){const param_name=activeFilter.getAttribute("data-param"),value=activeFilter.querySelector("input").value,url=window.location.href;if(url.split("?").length>0&&url.split("?")[1]){const facetItems=url.split("?")[1].split("&");let total_url="";facetItems.forEach(facet=>{if(facet!=""){const param=facet.split("=")[0],val=facet.split("=")[1];param_name==param&&value==val?console.log("Same parameter!"):total_url+=`${param}=${val}&`}});let arr=[];if(total_url.split("&").forEach(item=>{if(item&&!item.includes("sort_by=")&&!item.includes("type=")&&!item.includes("q=")&&!item.includes("page=")){const val=item.split("filter.p.tag=")[1],obj={id:param_name,value:val};arr.push(obj)}}),activeFilter){const title=activeFilter.parentNode.getAttribute("data-title");this.activeItemCounts.forEach(itemCount=>{const itemTitle=itemCount.getAttribute("data-title");if(title==itemTitle){let count=Number(itemCount.getAttribute("data-count"));count-1==0?(itemCount.innerHTML="",itemCount.setAttribute("data-count",0)):(itemCount.innerHTML=`(${count-1})`,itemCount.setAttribute("data-count",count-1))}})}if(this.activeTotalCount){let totalCount=Number(this.activeTotalCount.innerHTML);this.activeTotalCount.innerHTML=totalCount-1}this.renderHtml(arr)}}updateParams(activeFilter){let arr=[];if(this.filterItems.forEach(element=>{const input=element.querySelector("input");let option={id:input.name,value:input.value};input.checked&&arr.push(option)}),activeFilter){const title=activeFilter.parentNode.getAttribute("data-title");this.activeItemCounts.forEach(itemCount=>{const itemTitle=itemCount.getAttribute("data-title");if(title==itemTitle){let count=Number(itemCount.getAttribute("data-count"));itemCount.innerHTML=`(${count+1})`,itemCount.setAttribute("data-count",count+1)}})}if(this.activeTotalCount){let totalCount=Number(this.activeTotalCount.innerHTML);this.activeTotalCount.innerHTML=totalCount+1}this.renderHtml(arr)}renderHtml(filters,is_price=!1){let filter_str="",url="";if(is_price){const w_url=window.location.href;if(w_url.split("?").length>0){let filter_strs=w_url.split("?")[1];if(filter_strs&&filter_strs.includes("&")&&filter_strs.includes("filter.")&&filter_strs.split("&").forEach(filter=>{if(filter!=""){const param_name=filter.split("=")[0],value=filter.split("=")[1];param_name=="filter.v.price.lte"||param_name=="filter.v.price.gte"?filters.forEach(item=>{item.id==param_name&&(filter_str+=`${item.id}=${item.value}&`)}):filter_str+=`${param_name}=${value}&`}}),filter_str.includes("filter.v.price"))url=`${window.location.pathname}?${filter_str}`;else{const min_price=this.querySelector("[js-filter-min-price]"),max_price=this.querySelector("[js-filter-max-price]");url=`${window.location.pathname}?${filter_str}filter.v.price.gte=${min_price.value}&filter.v.price.lte=${max_price.value}&`}}}

6else{filters.forEach(filter=>{filter_str+=`${filter.id}=${filter.value}&`});const min_price=this.querySelector("[js-filter-min-price]"),max_price=this.querySelector("[js-filter-max-price]");min_price&&max_price?url=`${window.location.pathname}?${filter_str}filter.v.price.gte=${min_price.value}&filter.v.price.lte=${max_price.value}&`:url=`${window.location.pathname}?${filter_str}`}const sortElement=document.querySelector("[js-filter-sort]"),sort_param=sortElement.name,sort_val=sortElement.value;url+=`${sort_param}=${sort_val}&`;let template_val="collection";template_val=this.getAttribute("data-template"),template_val.includes("collection")||(url+=`type=product&q=${this.getAttribute("data-search")}&`),console.log("url = ",url),fetch(`${url}view=json`).then(res=>res.text()).then(text=>{let cHtml=document.getElementById("ProductGridContainer");cHtml&&(cHtml.innerHTML=text),window.history.pushState(null,"",url),this.changePaginationLinks()})}changePaginationLinks(){document.querySelectorAll(".pagination-wrapper li a").forEach(link=>{link.href.includes("&view=json")&&(link.href=link.href.split("&view=json")[0])})}}customElements.define("collection-filter",CollectionFilter);
7//# sourceMappingURL=/cdn/shop/t/316/assets/collection-filter.js.map?v=78542925442335971831789750874