0

I tried this jqery code and try to put "li" instead of "a"...but sometimes button works with this error in console"Uncaught error jquery is not defined"

but most of the times it's not working with no error in console.

File path: /app/design/frontend/theme/mycompany/Magento_LayeredNavigation/templates/layer/filter.phtml

<style>
.more{
width:100%;
background:#87C540;
height:2em ;
display:block;
border-radius:3px;
color:white;
padding:5px 0 0 0;
text-align:center;
}
a.term-list.toggleable{
width:100%;
}
</style>
<ol class="items lay-nav-filter">
    <?php foreach ($filterItems as $filterItem): ?>
            <?php if ($filterItem->getCount() > 0): ?>
                <a  href="<?= $block->escapeUrl($filterItem->getUrl()) ?>" class="term-list">
                    <li class="item">
                   <?= /* @escapeNotVerified */ $filterItem->getLabel() ?>
                    <?php if ($this->helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
                        <span class="count"><?= /* @escapeNotVerified */ $filterItem->getCount() ?><span class="filter-count-label">
                            <?php if ($filterItem->getCount() == 1):?> <?= /* @escapeNotVerified */ __('item') ?><?php else:?> <?= /* @escapeNotVerified */ __('items') ?><?php endif;?></span></span>
                    <?php endif; ?>
            <?php else:?>
                <?= /* @escapeNotVerified */ $filterItem->getLabel() ?>
                <?php if ($this->helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
                    <span class="count"><?= /* @escapeNotVerified */ $filterItem->getCount() ?><span class="filter-count-label">
                        <?php if ($filterItem->getCount() == 1):?><?= /* @escapeNotVerified */ __('item') ?><?php else:?><?= /* @escapeNotVerified */ __('items') ?><?php endif;?></span></span>
                <?php endif; ?>
            <?php endif; ?>
                    </li>
                </a>
    <?php endforeach ?>
</ol>

<script>
jQuery(document).ready(function() {

    jQuery('ol.lay-nav-filter').each(function(){

        if( jQuery(this).find('a').length >= 10){    
           jQuery('a', this).eq(10).nextAll().hide().addClass('toggleable');
           jQuery(this).append('<a class="more">Show More</a>');    
        }
        jQuery(this).on('click','.more', toggleShow);
    });

});
function toggleShow(){
  var opened = jQuery(this).hasClass('less');  
  jQuery(this).text(opened ? 'Show More' : 'Show Less').toggleClass('less', !opened);    
  jQuery(this).siblings('a.toggleable').slideToggle();

}

</script>
0

Add your jquery code within require(['jquery'], function($){ }); & replace jQuery with $

| improve this answer | |
  • i tried but its still the same – Izhar Mehdi Aug 17 '19 at 16:15
  • require(['jquery'], function($){ $('ol.lay-nav-filter').each(function(){ if( $(this).find('a').length >= 10){ $('a', this).eq(10).nextAll().hide().addClass('toggleable'); $(this).append('<a class="more">Show More</a>'); } $(this).on('click','.more', toggleShow); }); function toggleShow(){ var opened = $(this).hasClass('less'); $(this).text(opened ? 'Show More' : 'Show Less').toggleClass('less', !opened); $(this).siblings('a.toggleable').slideToggle(); } }); – Izhar Mehdi Aug 17 '19 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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