Shopaholic package
Filter panel forPackage 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 @lovata/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 "@lovata/shopaholic-product-list/shopaholic-product-list";
import ShopaholicFilterPrice from "@lovata/shopaholic-product-list/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 "@lovata/shopaholic-product-list/shopaholic-product-list";
import ShopaholicFilterPanel from "@lovata/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
© 2019, LOVATA Group, LLC under GNU GPL v3.
Developed by Andrey Kharanenka.