I am trying to add the custom category filter in the PLP page in the site in Magento 2.4. Currently, the category filter is coming in the layered navigation, but the same thing we want in the top of the page in PLP page, with AJAX functionality. Can anyone has an idea about it ?
-
you can refer this module structure and if you need something similar then you can add a simple form on page and the can add ajax call on that module like: amasty.com/product-parts-finder-for-magento-2.html– Bibhu AsishCommented Mar 18 at 13:30
-
hello dear can you explain more details. so i understand better i will try to help you.– mohit vamjaCommented Mar 19 at 12:46
-
@mohitvamja Just so you know, calling people "dear" in English sounds either a little condescending or overly familiar in the context of a public place like this. I know you probably didn't intend this, but I would avoid this in the future.– General GrievanceCommented Mar 19 at 16:30
-
@Mitul Vadalia please check my answer.– mohit vamjaCommented Mar 20 at 8:52
Add a comment
|
1 Answer
i will get a solution I think that is helpful for you so please check the below step.
if your current theme has a parent theme luma, follow below the below.
please go to
/var/www/html/project/vendor/magento/theme-frontend-luma/Magento_LayeredNavigation/templates/layer/view.phtml
copy this file and paste into your theme.
/var/www/html/project/app/design/frontend/Hidden/shopkartlite/Magento_LayeredNavigation/layer/view.phtml
<?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="<?= /* @noEscape */ $filtered ?>">
<strong data-role="title"><?= $block->escapeHtml(__('Shop By')); ?></strong>
</div>
<div class="block-content filter-content">
<?= $block->getChildHtml('state') ?>
<?php if ($block->getLayer()->getState()->getFilters()) : ?>
<div class="block-actions filter-actions">
<a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action clear filter-clear">
<span><?= $block->escapeHtml(__('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"><?= $block->escapeHtml(__('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; ?>
<?php if($filter->getName() == "Category"):?>
<div class="filter-options-content filter-cat"><?= /* @noEscape */ $block->getChildBlock('renderer')->render($filter) ?></div>
<?php else :?>
<div data-role="collapsible" class="filter-options-item">
<div data-role="title" class="filter-options-title"><?= $block->escapeHtml(__($filter->getName())) ?></div>
<div data-role="content" class="filter-options-content"><?= /* @noEscape */ $block->getChildBlock('renderer')->render($filter) ?></div>
</div>
<?php endif; ?>
<?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; ?>
<script type="text/javascript">
require(['jquery'],function($){
jQuery(document).ready(function($){
$('.filter-cat').insertAfter('.page-title');
$('.filter-cat .count').hide();
});
});
</script>
please check below luma theme-related screenshot.
Step 2 if your current theme has not a parent theme luma, follow below the below.
/var/www/html/project/vendor/magento/module-layered-navigation/view/frontend/templates/layer/view.phtml
copy this file and paste into your theme.
/var/www/html/project/app/design/frontend/Hidden/shopkartlite/Magento_LayeredNavigation/layer/view.phtml
<?PHP
/**
* Category layered navigation
*
* @var $block \Magento\LayeredNavigation\Block\Navigation
*/
?>
<?php if ($block->canShowBlock()) : ?>
<div class="block filter">
<div class="block-title filter-title">
<strong><?= $block->escapeHtml(__('Shop By')) ?></strong>
</div>
<div class="block-content filter-content">
<?= $block->getChildHtml('state') ?>
<?php if ($block->getLayer()->getState()->getFilters()) : ?>
<div class="block-actions filter-actions">
<a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action clear filter-clear"><span><?= $block->escapeHtml(__('Clear All')) ?></span></a>
</div>
<?php endif; ?>
<?php $wrapOptions = false; ?>
<?php foreach ($block->getFilters() as $filter) : ?>
<?php if (!$wrapOptions) : ?>
<strong role="heading" aria-level="2" class="block-subtitle filter-subtitle"><?= $block->escapeHtml(__('Shopping Options')) ?></strong>
<dl class="filter-options" id="narrow-by-list">
<?php $wrapOptions = true;
endif; ?>
<?php if($filter->getName() == "Category"):?>
<div class="filter-options-content filter-cat"><?= /* @noEscape */ $block->getChildBlock('renderer')->render($filter) ?></div>
<?php else :?>
<?php if ($filter->getItemsCount()) : ?>
<dt role="heading" aria-level="3" class="filter-options-title"><?= $block->escapeHtml(__($filter->getName())) ?></dt>
<dd class="filter-options-content"><?= /* @noEscape */ $block->getChildBlock('renderer')->render($filter) ?></dd>
<?php endif; ?>
<?php endif;?>
<?php endforeach; ?>
<?php if ($wrapOptions) : ?>
</dl>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<script type="text/javascript">
require(['jquery'],function($){
jQuery(document).ready(function($){
$('.filter-cat').insertAfter('.page-title');
$('.filter-cat .count').hide();
});
});
</script>
below screen shot without luma theme related.
check below screenshot is both full page with luma theme and without luma theme.
I hope that is works. so please accept my answer and upvote me.
