@salla.sa/twilight-components
Version:
Salla Web Component
4 lines • 4.5 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import{r as t,c as s,h as e,H as i,a}from"./p-Dbv0I4re.js";import{F as l}from"./p-DL4h2bc3.js";import{H as r}from"./p-CHf8XdiS.js";import"./p-CgtvEd63.js";const o=class{constructor(e){t(this,e),this.changed=s(this,"changed"),this.isReady=!1,this.filtersData={},salla.event.on("filters::hidden",(()=>this.host.style.display="none")),salla.lang.onLoaded((()=>{this.apply=salla.lang.get("pages.checkout.apply"),this.reset=salla.lang.get("pages.categories.filters_reset")})),salla.event.on("filters::fetched",(({filters:t})=>{this.host.style.display="";let s={};this.filters=t.map((t=>{if(t.label={category_id:salla.lang.get("common.titles.categories"),brand_id:salla.lang.get("common.titles.brands"),rating:salla.lang.get("pages.categories.filter_rating"),price:salla.lang.get("pages.categories.filter_price")}[t.key]||t.label,"rating"==t.key){t.type=l.VALUES;let{max:s,min:e}=t.values;t.values=[5,4,3,2,1].filter((t=>t>=e||t<=s))}this.filtersData.variants&&t.type==l.VARIANTS&&(s.variants=this.filtersData.variants),this.filtersData[t.key]&&t.type!==l.VARIANTS&&(s[t.key]=this.filtersData[t.key]);let e=new URLSearchParams(window.location.search),i=!1;for(let t of e.keys())if(t.includes("filters")){i=!0;break}if("product.index"==salla.config.get("page.slug")&&0==Object.keys(s).length&&!i){let t=window.location.href,e=salla.config.get("page.id"),i=-1!==t.indexOf("?")?"&":"?",a=t+i+"filters[category_id]="+e;s.category_id=e,window.history.pushState({path:a},"",a)}return t})),this.filtersData=s,this.host.childNodes.forEach((async t=>t.setWidgetHeight&&await t.setWidgetHeight()))}))}async componentWillLoad(){try{const t=new URLSearchParams(window.location.search);this.filtersData=await r.extractFiltersFromUrl(t)}catch(t){console.warn("failed to get filters from URL",t.message)}}async getFilters(){return this.filtersData}async applyFilters(){if(!this.isReady)return;let t=Object.keys(this.filtersData).length>0;setTimeout((()=>{if(t){let t=new URL(window.location.href);for(const[s]of t.searchParams.entries())s.startsWith("filters")&&t.searchParams.delete(s);let s=this.encodeFilters(this.filtersData),e=t.search.split("&").filter((t=>!t.includes("filters"))).join("&");t.search=e?t.search.split("&filters")[0]+"&"+s:`?${s}`,window.history.pushState({},"",t.href)}else{let t=new URL(window.location.href);t.searchParams?.delete("filters"),window.history.pushState({},"",t.toString())}salla.event.emit("salla-filters::changed",this.filtersData),this.changed.emit(this.filtersData)}),300)}encodeFilters(t,s="filters"){const e=[];for(const i in t)if(Object.prototype.hasOwnProperty.call(t,i)){const a=t[i],l=s?`${s}[${i}]`:i;if(Array.isArray(a))for(let t=0;t<a.length;t++)e.push(`${l}[${t}]=${a[t]}`);else e.push("object"==typeof a&&null!==a?this.encodeFilters(a,l):`${l}=${a}`)}return e.join("&")}async resetFilters(){return this.removeFiltersQueryParams(),this.filtersData={},this.host.childNodes.forEach((t=>t.reset&&t.reset())),salla.event.emit("salla-filters::reset"),this.applyFilters()}removeFiltersQueryParams(){const t=new URLSearchParams(window.location.search),s=Array.from(t.keys()).filter((t=>!t.startsWith("filters["))).map((s=>`${encodeURIComponent(s)}=${encodeURIComponent(t.get(s))}`)).join("&"),e=s?`${window.location.pathname}?${s}`:window.location.pathname;window.history.pushState({},"",e)}handleOptionChange(t,s,e){s.type===l.RANGE&&(this.filtersData[s.key]=e);let i=t.target.checked;s.type===l.VARIANTS?(this.filtersData.variants=this.filtersData.variants||{},i&&(this.filtersData.variants[s.key]=e),i||delete this.filtersData.variants[s.key]):"radio"==t.target.type?(i&&(this.filtersData[s.key]=e),i||delete this.filtersData[s.key]):"checkbox"==t.target.type&&(this.filtersData[s.key]=this.filtersData[s.key]||[],i&&this.filtersData[s.key].push(e),this.filtersData[s.key]=this.filtersData[s.key].filter((t=>t!=e))),this.applyFilters()}render(){return e(i,{key:"f3c454fc20472dca6fe646c9121028a2c045808f"},this.filters?.map((t=>e("salla-filters-widget",{option:t,filtersData:this.filtersData,onChanged:({detail:{event:t,option:s,value:e}})=>{this.handleOptionChange(t,s,e)}}))),this.filters?.length?e("div",{class:"s-filters-footer"},e("salla-button",{color:"gray",fill:"outline",onClick:()=>this.resetFilters()},this.reset)):"")}componentDidLoad(){this.isReady=!0}get host(){return a(this)}};o.style=":host{display:block}.s-rating-stars-small{line-height:12px}.s-filters-radio{background-image:none !important}";export{o as salla_filters}