0

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 ? enter image description here

4
  • 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 Mar 18 at 13:30
  • hello dear can you explain more details. so i understand better i will try to help you. 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. Mar 19 at 16:30
  • @Mitul Vadalia please check my answer. Mar 20 at 8:52

1 Answer 1

0

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. enter image description here

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.

enter image description here

check below screenshot is both full page with luma theme and without luma theme.

enter image description here enter image description here

I hope that is works. so please accept my answer and upvote me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.