@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 i,H as e,a}from"./p-BQQ2x3w_.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(i){t(this,i),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:i}=t.values;t.values=[5,4,3,2,1].filter((t=>t>=i||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 i=new URLSearchParams(window.location.search),e=!1;for(let t of i.keys())if(t.includes("filters")){e=!0;break}if("product.index"==salla.config.get("page.slug")&&0==Object.keys(s).length&&!e){let t=window.location.href,i=salla.config.get("page.id"),e=-1!==t.indexOf("?")?"&":"?",a=t+e+"filters[category_id]="+i;s.category_id=i,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),i=t.search.split("&").filter((t=>!t.includes("filters"))).join("&");t.search=i?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 i=[];for(const e in t)if(Object.prototype.hasOwnProperty.call(t,e)){const a=t[e],l=s?`${s}[${e}]`:e;if(Array.isArray(a))for(let t=0;t<a.length;t++)i.push(`${l}[${t}]=${a[t]}`);else i.push("object"==typeof a&&null!==a?this.encodeFilters(a,l):`${l}=${a}`)}return i.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("&"),i=s?`${window.location.pathname}?${s}`:window.location.pathname;window.history.pushState({},"",i)}handleOptionChange(t,s,i){s.type===l.RANGE&&(this.filtersData[s.key]=i);let e=t.target.checked;s.type===l.VARIANTS?(this.filtersData.variants=this.filtersData.variants||{},e&&(this.filtersData.variants[s.key]=i),e||delete this.filtersData.variants[s.key]):"radio"==t.target.type?(e&&(this.filtersData[s.key]=i),e||delete this.filtersData[s.key]):"checkbox"==t.target.type&&(this.filtersData[s.key]=this.filtersData[s.key]||[],e&&this.filtersData[s.key].push(i),this.filtersData[s.key]=this.filtersData[s.key].filter((t=>t!=i))),this.applyFilters()}render(){return i(e,{key:"3b38160573591da8249606b8c12b72b58d03551d"},this.filters?.map((t=>i("salla-filters-widget",{option:t,filtersData:this.filtersData,onChanged:({detail:{event:t,option:s,value:i}})=>{this.handleOptionChange(t,s,i)}}))),this.filters?.length?i("div",{class:"s-filters-footer"},i("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}