Last active
October 18, 2019 17:39
-
-
Save matiaslopezd/688ccddd6b5cf8d88ead1d6df67693cf to your computer and use it in GitHub Desktop.
Woocommerce Filter replace for laserintima.cl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const keysProperties = { product: 'ixwpst[product_cat][]', brand: 'ixwpst[pa_marca][]' }; | |
class WoocommerceFilter { | |
constructor(debug) { | |
this.params = new ParamsParser(); | |
this.URL = this._parseURL(); | |
this.nodes = () => document.querySelectorAll('ul.product-categories > li'); | |
this.container = this._createContainer(); | |
this.buttons = []; | |
this.selected = this._selected(); | |
this.debug = debug; | |
this.filterDefault = [{key: "title", value: "1"}, {key: "excerpt", value: "1"}, {key: "content", value: "1"}, {key: "categories", value: "1"}, {key: "attributes", value: "1"}, {key: "tags", value: "1"}, {key: "sku", value: "1"}, {key: "ixwpsf[taxonomy][pa_marca][show]", value: "all"}, {key: "ixwpsf[taxonomy][pa_marca][multiple]", value: "1"}, {key: "ixwpsf[taxonomy][pa_marca][filter]", value: "1"}, {key: "ixwpsf[taxonomy][product_cat][show]", value: "set"}, {key: "ixwpsf[taxonomy][product_cat][multiple]", value: "1"}, {key: "ixwpsf[taxonomy][product_cat][filter]", value: "1"}]; | |
this.categories = []; | |
//this.interval = null; | |
} | |
init() { | |
// Set array | |
this._mapNodes().then(array => { | |
this._Redirect(); | |
this.buttons = array; | |
this._createButtons(); | |
}); | |
} | |
_parseURL() { | |
const search = (window.location.search !== '') && window.location.search.split('?')[1]; | |
return (search) && search.split('&'); | |
} | |
_selected() { | |
const array = []; | |
const categories = (this.URL) && this.URL.filter(x => x.includes(keysProperties.product)); | |
if (categories && categories.length > 0) categories.map(x => (!categories.includes(x)) && array.push(x.split('=')[1])); | |
return array; | |
} | |
parseCategory(value) { | |
const paramsNew = new ParamsParser(); | |
paramsNew.arrayParams = this.params.arrayParams; | |
if (!Array.isArray(value)) paramsNew.add(keysProperties.product, value); | |
else value.map(x => (x.value !== '') && paramsNew.add(keysProperties.product, x.value)); | |
return `${window.location.pathname}${paramsNew.parse()}`; | |
} | |
_debug(type, msg) { | |
if (this.debug) console[type](msg); | |
} | |
_removeHref(){ | |
const nodes = this.nodes(); | |
nodes.forEach(x => x.childNodes[0].setAttribute('href', 'javascript:;')); | |
} | |
_createContainer() { | |
// Create container | |
const foo = document.createElement('div'); | |
// Add class to container | |
foo.classList.add('list-filter-buttons'); | |
// Append container to filters categories container | |
this._appendAfter(foo); | |
// Return container | |
return foo; | |
} | |
_appendAfter(el) { | |
document.getElementById('product-search-filter-category-0').parentNode.insertBefore(el, document.getElementById('product-search-filter-category-0').nextSibling); | |
} | |
_createButton(value, label, selected) { | |
// Create button | |
const btn = document.createElement('div'); | |
// Add class to button | |
btn.classList.add('btn-filter'); | |
// Set id | |
btn.setAttribute('id', `btn-${value}`); | |
// Add selected CSs | |
if (selected) btn.classList.add('selected'); | |
// Add text | |
btn.innerText = label; | |
// Add onclick function | |
btn.onclick = () => { | |
if (Array.isArray(value) && window.location.search.includes('back-all')) window.history.back(); | |
else window.location.href = `${this.parseCategory(value)}&back-all`; | |
}; | |
// Return container | |
this.container.appendChild(btn); | |
// Return btn | |
return btn; | |
} | |
_mapNodes() { | |
console.group('_mapNodes()'); | |
return new Promise((resolve) => { | |
// Create temp array | |
const array = []; | |
// Get nodes | |
const nodes = this.nodes(); | |
// Remove href of buttons | |
this._removeHref(); | |
nodes.forEach((n, i) => { | |
// Add category to array | |
this.categories.push({ label: n.childNodes[0].innerText, value: n.dataset.term }); | |
// Push value to array | |
array.push(n.dataset.term); | |
if (i === nodes.length - 1) resolve(array) | |
}); | |
// Create buttons | |
console.groupEnd(); | |
}); | |
} | |
_createButtons() { | |
return new Promise(resolve => { | |
this.categories.map((n, i) => { | |
if (n.value !== '') this._createButton(n.value, | |
n.label, | |
(this.categories.length !== this.selected.length | |
&& this.selected.includes(n.value))); | |
else this._createButton(this.categories, | |
'Todos', | |
(this.categories.length === this.selected.length)); | |
if (i === this.categories.length - 1) resolve(); | |
}); | |
}); | |
} | |
_Redirect() { | |
if (!this.URL) { | |
const params = new ParamsParser(); | |
this.categories.map(x => (x.value !== '') && params.add(keysProperties.product, x.value)); | |
this.filterDefault.map(x => params.add(x.key, x.value)); | |
window.location.href = `${window.location.pathname}${params.parse()}`; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const keysProperties={product:"ixwpst[product_cat][]",brand:"ixwpst[pa_marca][]"};class WoocommerceFilter{constructor(a){this.params=new ParamsParser,this.URL=this._parseURL(),this.nodes=()=>document.querySelectorAll("ul.product-categories > li"),this.container=this._createContainer(),this.buttons=[],this.selected=this._selected(),this.debug=a,this.filterDefault=[{key:"title",value:"1"},{key:"excerpt",value:"1"},{key:"content",value:"1"},{key:"categories",value:"1"},{key:"attributes",value:"1"},{key:"tags",value:"1"},{key:"sku",value:"1"},{key:"ixwpsf[taxonomy][pa_marca][show]",value:"all"},{key:"ixwpsf[taxonomy][pa_marca][multiple]",value:"1"},{key:"ixwpsf[taxonomy][pa_marca][filter]",value:"1"},{key:"ixwpsf[taxonomy][product_cat][show]",value:"set"},{key:"ixwpsf[taxonomy][product_cat][multiple]",value:"1"},{key:"ixwpsf[taxonomy][product_cat][filter]",value:"1"}],this.categories=[]}init(){this._mapNodes().then(a=>{this._Redirect(),this.buttons=a,this._createButtons()})}_parseURL(){const a=""!==window.location.search&&window.location.search.split("?")[1];return a&&a.split("&")}_selected(){const a=[],b=this.URL&&this.URL.filter(a=>a.includes(keysProperties.product));return b&&0<b.length&&b.map(c=>!b.includes(c)&&a.push(c.split("=")[1])),a}parseCategory(a){const b=new ParamsParser;return b.arrayParams=this.params.arrayParams,Array.isArray(a)?a.map(a=>""!==a.value&&b.add(keysProperties.product,a.value)):b.add(keysProperties.product,a),`${window.location.pathname}${b.parse()}`}_debug(a,b){this.debug&&console[a](b)}_removeHref(){const a=this.nodes();a.forEach(a=>a.childNodes[0].setAttribute("href","javascript:;"))}_createContainer(){const a=document.createElement("div");return a.classList.add("list-filter-buttons"),this._appendAfter(a),a}_appendAfter(a){document.getElementById("product-search-filter-category-0").parentNode.insertBefore(a,document.getElementById("product-search-filter-category-0").nextSibling)}_createButton(a,b,c){const d=document.createElement("div");return d.classList.add("btn-filter"),d.setAttribute("id",`btn-${a}`),c&&d.classList.add("selected"),d.innerText=b,d.onclick=()=>{Array.isArray(a)&&window.location.search.includes("back-all")?window.history.back():window.location.href=`${this.parseCategory(a)}&back-all`},this.container.appendChild(d),d}_mapNodes(){return console.group("_mapNodes()"),new Promise(a=>{const b=[],c=this.nodes();this._removeHref(),c.forEach((d,e)=>{this.categories.push({label:d.childNodes[0].innerText,value:d.dataset.term}),b.push(d.dataset.term),e===c.length-1&&a(b)}),console.groupEnd()})}_createButtons(){return new Promise(a=>{this.categories.map((b,c)=>{""===b.value?this._createButton(this.categories,"Todos",this.categories.length===this.selected.length):this._createButton(b.value,b.label,this.categories.length!==this.selected.length&&this.selected.includes(b.value)),c===this.categories.length-1&&a()})})}_Redirect(){if(!this.URL){const a=new ParamsParser;this.categories.map(b=>""!==b.value&&a.add(keysProperties.product,b.value)),this.filterDefault.map(b=>a.add(b.key,b.value)),window.location.href=`${window.location.pathname}${a.parse()}`}}} |
Task:
- Check
all
load - Automatically redirect by regex location.href
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to use
With debug mode
Without debug mode
Before initialize is important check that exist
product-search-filter-category-0
like DOM Node.