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.
npm install @oc-shopaholic/shopaholic-filter
Class will allow you to quickly filter by price with ajax request in your project.
<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();
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
Redeclare default selector of filter input. Default value is "_shopaholic-price-filter".
const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setInputSelector('price_filter').init();
Redeclare default event type. Default value is "change".
const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setEventType('blur').init();
Redeclare default input name with min price. Default value is "filter-min-price".
const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setInputMinPriceName('min-price').init();
Redeclare default input name with max price. Default value is "filter-max-price".
const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setInputMaxPriceName('max-price').init();
Redeclare default URL filed name. Default value is "price".
const obFilterPrice = new ShopaholicFilterPrice();
obFilterPrice.setFieldName('price-filter').init();
Class will allow you to quickly filter panel with ajax request in your project.
<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();
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
Redeclare default selector of filter input. Default value is "_shopaholic-filter-wrapper".
const obFilterPanel = new ShopaholicFilterPanel();
obFilterPanel.setWrapperSelector('price_filter').init();
Redeclare default event type. Default value is "change".
const obFilterPanel = new ShopaholicFilterPanel();
obFilterPanel.setEventType('blur').init();
Redeclare default URL filed name. Default value is "property".
const obFilterPanel = new ShopaholicFilterPanel();
obFilterPanel.setFieldName('filter').init();
© 2024, oc-shopaholic under GNU GPL v3.
Developed by Andrei Kharanenka.