Woocommerce Filter replace for laserintima.cl

woocommerce-filter.js

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()}`;
    }
  }

}

woocommerce-filter.min.js

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

https://gist.github.com/matiaslopezd/688ccddd6b5cf8d88ead1d6df67693cf#file-woocommerce-filter-js-L176