If you are looking to add checkbox in Layered navigation filter on the category page in Magento 2 then you are on the correct page.
Here I will explain how we can simply add the checkbox filter on the list page and from the designer perspective you will also have a custom class on the Magento 2 Layered navigation filter.
You just have to copy the below code and then paste it in your theme and you check your result amazingly will see that the checkbox filter is coming on the list page.
Magento 2 Checkbox Filter in Layered Navigation
Go to the Magento installation directory:
app/design/frontend/Theme_Vendor/Theme_Name/Magento_LayeredNavigation/templates/layer/filter.phtml
app/design/frontend/Theme_Vendor/Theme_Name/Magento_LayeredNavigation/templates/layer/view.phtml
How To Add Checkbok in Layered Navigation Filter in Magento 2
app/design/frontend/Theme_Vendor/Theme_Name/Magento_LayeredNavigation/templates/layer/filter.phtml
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
?>
<?php
/** @var \Magento\LayeredNavigation\Block\Navigation\FilterRenderer $block */
/** @var \Magento\Framework\Escaper $escaper */
/** @var \Magento\LayeredNavigation\ViewModel\Layer\Filter $viewModel */
$viewModel = $block->getData('product_layer_view_model');
?>
<?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="item">
<?php if ($filterItem->getCount() > 0): ?>
<form>
<span class="check-box">
<input type="checkbox" name="vehicle" onclick='window.location.assign("<?php echo $escaper->escapeUrl($filterItem->getUrl()) ?>")'/>
</span>
<a
href="<?= $escaper->escapeUrl($filterItem->getUrl()) ?>"
rel="nofollow"
><?= /* @noEscape */ $filterItem->getLabel() ?><?php
if ($viewModel->shouldDisplayProductCountOnLayer()): ?><span
class="count"><?= /* @noEscape */ (int) $filterItem->getCount() ?><span
class="filter-count-label"><?php
if ($filterItem->getCount() == 1): ?>
<?= $escaper->escapeHtml(__('item')) ?><?php
else:
?><?= $escaper->escapeHtml(__('item')) ?><?php
endif;?></span></span>
<?php endif; ?></a></form>
<?php else: ?>
<form>
<span class="check-box">
<input type="checkbox" name="vehicle" onclick='window.location.assign("<?php echo $escaper->escapeUrl($filterItem->getUrl()) ?>")'/>
</span>
<span>
<?= /* @noEscape */ $filterItem->getLabel() ?><?php
if ($viewModel->shouldDisplayProductCountOnLayer()): ?><span
class="count"><?= /* @noEscape */ (int) $filterItem->getCount() ?><span
class="filter-count-label"><?php
if ($filterItem->getCount() == 1): ?>
<?= $escaper->escapeHtml(__('items')) ?><?php
else:
?><?= $escaper->escapeHtml(__('items')) ?><?php
endif;?></span></span>
<?php endif; ?>
</span>
</form>
<?php endif; ?>
</li>
<?php endforeach ?>
</ol>
<?php endif;?>
Step 2:
app/design/frontend/Theme_Vendor/Theme_Name/Magento_LayeredNavigation/templates/layer/view.phtml
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?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 /* @escapeNotVerified */ $cstring = preg_replace("/[^a-zA-Z]+/", "", $filter->getName()); ?>
<?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 filter-options-title <?php echo strtolower($cstring); ?>" >
<div data-role="title" class="filter-options-title <?php echo strtolower($cstring); ?>"><?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 cache:clean php bin/magento cache:flush
Hire Magento 2 Expert Developer to Develop Your Store
Related Post:
Custom Shipping Text Filed: Show Custom Text Magento 2
Search AutoComplete: Magento 2 Module Add All Category for Search
Share Product on WhatsApp: With Products Image And URL 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