Filter panel for Shopaholic package

Package adds helper methods for integration with Filter for Shopaholic and Shopaholic plugins.

Package will allow you to quickly add filter panel in your project.

installation

npm install @oc-shopaholic/shopaholic-filter

shopaholic-filter-price

Class will allow you to quickly filter by price with ajax request in your project.

Basic usage

<div class="_shopaholic-price-filter">
    <input type="number" name="filter-min-price">
    <input type="number" name="filter-max-price">
</div>

import ShopaholicProductList from "@oc-shopaholic/shopaholic-product-list/shopaholic-product-list";
import ShopaholicFilterPrice from "@oc-shopaholic/shopaholic-filter-panel/shopaholic-filter-price";

const obListHelper = new ShopaholicProductList();
obListHelper.setAjaxRequestCallback((obRequestData) => {
  obRequestData.update = {'catalog/catalog-ajax': `.catalog_wrapper`};

  return obRequestData;
});

const obFilterPrice = new ShopaholicFilterPrice(obListHelper);
obFilterPrice.setEventType('blur').init();

Methods

init()

Method adds event handler on inputs with price filter and send ajax request with using ShopaholicProductList class object. Method adds "price" param in your search string. For example: http::site.com/catalog?price=10|25

setInputSelector()

Redeclare default selector of filter input. Default value is "_shopaholic-price-filter".

const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setInputSelector('price_filter').init();

setEventType()

Redeclare default event type. Default value is "change".

const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setEventType('blur').init();

setInputMinPriceName()

Redeclare default input name with min price. Default value is "filter-min-price".

const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setInputMinPriceName('min-price').init();

setInputMaxPriceName()

Redeclare default input name with max price. Default value is "filter-max-price".

const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setInputMaxPriceName('max-price').init();

setFieldName()

Redeclare default URL filed name. Default value is "price".

const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setFieldName('price-filter').init();

shopaholic-filter-panel

Class will allow you to quickly filter panel with ajax request in your project.

Basic usage

<div class="_shopaholic-filter-wrapper" data-filter-type="checkbox" data-property-id="2">
<b>Size</b>
<ul>
    <li>
        <input type="checkbox" value="M">
    </li>
    <li>
        <input type="checkbox" value="L">
    </li>
    <li>
        <input type="checkbox" value="XL">
    </li>
</ul>
</div>

import ShopaholicProductList from "@oc-shopaholic/shopaholic-product-list/shopaholic-product-list";
import ShopaholicFilterPanel from "@oc-shopaholic/shopaholic-filter-panel/shopaholic-filter-panel";

const obListHelper = new ShopaholicProductList();
obListHelper.setAjaxRequestCallback((obRequestData) => {
  obRequestData.update = {'catalog/catalog-ajax': `.catalog_wrapper`};

  return obRequestData;
});

const obFilterPanel = new ShopaholicFilterPanel(obListHelper);
obFilterPanel.init();

Methods

init()

Method adds event handler on inputs, selects with filter and send ajax request with using ShopaholicProductList class object. Method adds "property" param in your search string. For example: http::site.com/catalog?property[2]=M|S|XL&property[5]=blue

setWrapperSelector()

Redeclare default selector of filter input. Default value is "_shopaholic-filter-wrapper".

const obFilterPanel = new ShopaholicFilterPanel();
obFilterPanel.setWrapperSelector('price_filter').init();

setEventType()

Redeclare default event type. Default value is "change".

const obFilterPanel = new ShopaholicFilterPanel();
obFilterPanel.setEventType('blur').init();

setFieldName()

Redeclare default URL filed name. Default value is "property".

const obFilterPanel = new ShopaholicFilterPanel();
obFilterPanel.setFieldName('filter').init();

License

© 2024, oc-shopaholic under GNU GPL v3.

Developed by Andrei Kharanenka.