Customer experiences most important factor in any kind of business success. When it comes to Magento 2 Store category page then Price Slider in Layered Navigation also use to provide a great experience to the customer.
Wishusucess PriceSlider/ Range filter Magento 2 free extentions offers that kind of option to add these features in your store without doing any changes in the code.
This feature is complete with full features for the customer which provides an easy slide filter for the product in the Layered Navigation filter on the category list page.
Wishusucess Price Filter Works
When you enable these features then your customer easily can slide price from any minimum point to any number of maximum points and they can filter the product.
It's a fully Ajax Slider filter which don't load your whole page while filter slide-in navigation filter.
Ajax Price Slider Filter Basic File in Magento 2
In order to get these features on the category page, we have to create a minimum of seven files. and all these basic files are given below.
app/code/Wishusucess/Priceslider/registration.php
app/code/Wishusucess/Priceslider/etc/module.xml
app/code/Wishusucess/Priceslider/etc/di.xml
app/code/Wishusucess/Priceslider/Block/FilterRenderer.php
app/code/Wishusucess/Priceslider/view/frontend/layout/catalog_category_view_type_layered.xml
app/code/Wishusucess/Priceslider/view/frontend/templates/filter.phtml
app/code/Wishusucess/Priceslider/view/frontend/templates/view.phtml
Importance of Price Slider Filter on List Page
This option gives the best way for customers to respond to price.
If we will check to analyze the data then you will get like 85% of customers do online price research so it's showing that price is the most popular sorting option which can increase your sales or decrease your sales if these options will be not good.
Most retail customers always have their budget in the mind for a price range for an item. So if your store will have more options to choose from then it means you will have more sales.
Step 1: Registration of Your Module
app/code/Wishusucess/Priceslider/registration.php
<?php /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ /* |-------------------------------------------------------------------------- | Wishsucess PriceSlider Filter |-------------------------------------------------------------------------- | | PriceSlider Filter | | @author Hemant Singh | http://www.wishusucess.com/ */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Wishusucess_Priceslider', __DIR__ );
Step 2: Give Basic Information of Module
app/code/Wishusucess/Priceslider/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> <module name="Wishusucess_Priceslider" setup_version="0.0.2"></module> </config>
Step 3:
app/code/Wishusucess/Priceslider/etc/di.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd"> <preference for="Magento\LayeredNavigation\Block\Navigation\FilterRenderer" type="Wishusucess\Priceslider\Block\FilterRenderer" /> <type name="Wishusucess\Priceslider\Block\FilterRenderer"> <plugin name="swatches_layered_renderer" type="Magento\Swatches\Model\Plugin\FilterRenderer" sortOrder="1" /> </type> </config>
Magento 2 Get Price Range for Price Slider Filter
Here in this step, we have to create a block that will get the price range in layered navigation and return to filter price.
app/code/Wishusucess/Priceslider/Block/FilterRenderer.php
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
/*
|--------------------------------------------------------------------------
| Wishsucess PriceSlider Filter
|--------------------------------------------------------------------------
|
| PriceSlider Filter
|
| @author Hemant Singh
| http://www.wishusucess.com/
*/
namespace Wishusucess\Priceslider\Block;
use Magento\Catalog\Model\Layer\Filter\FilterInterface;
class FilterRenderer extends \Magento\LayeredNavigation\Block\Navigation\FilterRenderer
{
/**
* @param FilterInterface $filter
* @return string
*/
public function render(FilterInterface $filter)
{
$this->assign('filterItems', $filter->getItems());
$this->assign('filter' , $filter);
$html = $this->_toHtml();
$this->assign('filterItems', []);
return $html;
}
public function getPriceRange($filter){
$Filterprice = array('min' => 0 , 'max'=>0);
if($filter instanceof \Magento\CatalogSearch\Model\Layer\Filter\Price){
$priceArr = $filter->getResource()->loadPrices(10000000000);
$Filterprice['min'] = reset($priceArr);
$Filterprice['max'] = end($priceArr);
}
return $Filterprice;
}
public function getFilterUrl($filter){
$query = ['price'=> ''];
return $this->getUrl('*/*/*', ['_current' => true, '_use_rewrite' => true, '_query' => $query]);
}
}
Set Price Slider Template in Catalog Navigation Filter
app/code/Wishusucess/Priceslider/view/frontend/layout/catalog_category_view_type_layered.xml
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="catalog.navigation.renderer"> <action method="setTemplate"> <argument name="template" xsi:type="string">Wishusucess_Priceslider::filter.phtml</argument> </action> </referenceBlock> </body> </page>
Step 6:
app/code/Wishusucess/Priceslider/view/frontend/templates/filter.phtml
<?php /** * Template for filter items block * * @var $block \Magento\LayeredNavigation\Block\Navigation\FilterRenderer */ /* |-------------------------------------------------------------------------- | Wishsucess PriceSlider Filter |-------------------------------------------------------------------------- | | PriceSlider Filter | | @author Hemant Singh | http://www.wishusucess.com/ */ ?>
<?php
/**
* Template for filter items block
*
* @var $block \Magento\LayeredNavigation\Block\Navigation\FilterRenderer
*/
?>
<?php
?>
<?php if($filter instanceof Magento\CatalogSearch\Model\Layer\Filter\Price ):?>
<?php $range = $this->getPriceRange($filter);?>
<?php $url = $this->getFilterUrl($filter);?>
<script>
var price_url = "<?=$url;?>";
require([
'jquery',
'priceUtils',
"jquery/ui",
'domReady!'
], function($,utils){
updateLabel = function() {
var priceFormat = <?php /* @escapeNotVerified */ echo $this->helper('Magento\Tax\Helper\Data')->getPriceFormat($block->getStore()); ?>;
var min = utils.formatPrice($( "#price-slider" ).slider( "values", 0 ), priceFormat);
var max = utils.formatPrice($( "#price-slider" ).slider( "values", 1 ), priceFormat);
$( "#amount" ).val(min + " - " + max);
};
$("div#price-slider").slider({
range: true,
min: <?=$range['min']?>,
max: <?=$range['max']?>,
values: [ <?=$range['min']?>, <?=$range['max']?> ],
slide: function( event, ui ) {
updateLabel();
},
change: function( event, ui ) {
window.location.href = price_url.replace("price=","price="+ui.values[0]+"-"+ui.values[1]);
}
});
updateLabel();
});
</script>
<p>
<label for="amount"><?= __('Price range:') ?></label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="price-slider"></div>
<?php else:?>
<ol class="items">
<?php foreach ($filterItems as $filterItem): ?>
<li class="my item">
<?php if ($filterItem->getCount() > 0): ?>
<a href="<?php echo $block->escapeUrl($filterItem->getUrl()) ?>">
<?php /* @escapeNotVerified */ echo $filterItem->getLabel() ?>
<?php if ($this->helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
<span class="count"><?php /* @escapeNotVerified */ echo $filterItem->getCount()?><span class="filter-count-label">
<?php if ($filterItem->getCount() == 1):?> <?php /* @escapeNotVerified */ echo __('item')?><?php else:?> <?php /* @escapeNotVerified */ echo __('items') ?><?php endif;?></span></span>
<?php endif; ?>
</a>
<?php else:?>
<?php /* @escapeNotVerified */ echo $filterItem->getLabel() ?>
<?php if ($this->helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
<span class="count"><?php /* @escapeNotVerified */ echo $filterItem->getCount()?><span class="filter-count-label">
<?php if ($filterItem->getCount() == 1):?><?php /* @escapeNotVerified */ echo __('item')?><?php else:?><?php /* @escapeNotVerified */ echo __('items') ?><?php endif;?></span></span>
<?php endif; ?>
<?php endif; ?>
</li>
<?php endforeach ?>
</ol>
<?php endif;?>
Step 7:
app/code/Wishusucess/Priceslider/view/frontend/templates/view.phtml
<?php
/**
* Category layered navigation
*
* @var $block \Magento\LayeredNavigation\Block\Navigation
*/
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
/*
|--------------------------------------------------------------------------
| Wishsucess PriceSlider Filter
|--------------------------------------------------------------------------
|
| PriceSlider Filter
|
| @author Hemant Singh
| http://www.wishusucess.com/
*/
?>
<?php
/**
* Category layered navigation
*
* @var $block \Magento\LayeredNavigation\Block\Navigation
*/
?>
<?php if ($block->canShowBlock()): ?>
<div class="block filter" id="layered-filter-block" data-mage-init='{"collapsible":{"openedState": "active", "collapsible": true, "active": false, "collateral": { "openedState": "filter-active", "element": "body" } }}'>
<?php $filtered = count($block->getLayer()->getState()->getFilters()) ?>
<div class="block-title filter-title" data-count="<?php /* @escapeNotVerified */ echo $filtered; ?>">
<strong data-role="title"><?php /* @escapeNotVerified */ echo __('Shop By') ?></strong>
</div>
<div class="block-content filter-content">
<?php echo $block->getChildHtml('state') ?>
<?php if ($block->getLayer()->getState()->getFilters()): ?>
<div class="block-actions filter-actions">
<a href="<?php /* @escapeNotVerified */ echo $block->getClearUrl() ?>" class="action clear filter-clear"><span><?php /* @escapeNotVerified */ echo __('Clear All') ?></span></a>
</div>
<?php endif; ?>
<?php $wrapOptions = false; ?>
<?php foreach ($block->getFilters() as $filter): ?>
<?php if ($filter->getItemsCount()): ?>
<?php if (!$wrapOptions): ?>
<strong role="heading" aria-level="2" class="block-subtitle filter-subtitle"><?php /* @escapeNotVerified */ echo __('Shopping Options') ?></strong>
<div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": false}}'>
<?php $wrapOptions = true; endif; ?>
<div data-role="collapsible" class="filter-options-item">
<div data-role="title" class="filter-options-title"><?php /* @escapeNotVerified */ echo __($filter->getName()) ?></div>
<div data-role="content" class="filter-options-content"><?php /* @escapeNotVerified */ echo $block->getChildBlock('renderer')->render($filter); ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php if ($wrapOptions): ?>
</div>
<?php else: ?>
<script>
require([
'jquery'
], function ($) {
$('#layered-filter-block').addClass('filter-no-options');
});
</script>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
Now, Run Following Command:
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deplpy -f php bin/magento cache:clean
Download Link:
Wishusucess PriceSlider Extension in Magento 2
Hire Magento 2 Expert Developer to Develop Your Store
Related Post:
Wishusucess AdminMenu: How to Create Magento 2 Admin Menu Module
Search AutoComplete: Magento 2 Module Add All Category for Search
Sort By Price: Add Sort By Price High to Low & Low To High in Magento 2
Recommended Post:
Magento 2.4 Installation Guide: How to Install Magento 2.4.2
Magento Store: Best 36 Magento Websites Example in The World
SEO Packages: How Much Do SEO Packages Cost in India, SEO Pricing