2

I'm trying to apply this code snippet (http://jsbin.com/binarenimi/edit?html,js,output) to my layered navigation with no success.. Where I'm wrong?

    <ol class="term-list">
<?php foreach ($this->getItems() as $_item): ?>
    <li class="term-item ">
        <?php if ($_item->getCount() > 0): ?>
        <?php  
            $url = $_item->getUrl();
            $onclick = "ajaxFilter('".$url."')";
            echo '<a class="ajaxLayer"  onclick = "'.$onclick.'" >'. $_item->getLabel() . '</a>';
         ?> 
        <?php else: echo $_item->getLabel() ?>
        <?php endif; ?>
        (<?php echo $_item->getCount() ?>)
    </li>
<?php endforeach ?>
</ol>

<script type="text/javascript">
$('ol.term-list').each(function(){
  if( $(this).find('li').length > 3){    
    $('li', this).eq(2).nextAll().hide().addClass('toggleable');
    $(this).append('<li class="more">Tutti</li>');    
  }
  $(this).on('click','.more', toggleShow);
});


function toggleShow(){
  var opened = $(this).hasClass('less');  
  $(this).text(opened ? 'Tutti' : 'Riduci').toggleClass('less', !opened);    
  $(this).siblings('li.toggleable').slideToggle();
}
</script>

2 Answers 2

1

You can't use the $ sign, it's used by Prototype.

Replace every $(...) in your code with jQuery(...):

jQuery(document).ready(function() {

    jQuery('ol.term-list').each(function(){

        if( jQuery(this).find('li').length > 3){    
           jQuery('li', this).eq(2).nextAll().hide().addClass('toggleable');
           jQuery(this).append('<li class="more">Tutti</li>');    
        }
        jQuery(this).on('click','.more', toggleShow);
    });

});
1
  • It works! There's only a little problem: sidebar (also other content) is loading very slowly.
    – domfitty
    Oct 27, 2015 at 20:39
0

Not sure if this cause an issue. but try script inside document ready. Also make sure you have jQuery.noConflict() in your page.

<script type="text/javascript">

jQuery( document ).ready(function() {
$('ol.term-list').each(function(){
  if( $(this).find('li').length > 3){    
    $('li', this).eq(2).nextAll().hide().addClass('toggleable');
    $(this).append('<li class="more">Tutti</li>');    
  }
  $(this).on('click','.more', toggleShow);
});
});

function toggleShow(){
  var opened = $(this).hasClass('less');  
  $(this).text(opened ? 'Tutti' : 'Riduci').toggleClass('less', !opened);    
  $(this).siblings('li.toggleable').slideToggle();
}
</script>
5
  • It does not work also adding jQuery.noConflict(); in the script
    – domfitty
    Oct 27, 2015 at 10:20
  • is it showing any js error in console? Oct 27, 2015 at 10:34
  • Yes... Uncaught TypeError: Cannot read property 'each' of null
    – domfitty
    Oct 27, 2015 at 10:37
  • 1
    Not sure what conflict in your case. you can use github.com/eyemagine/Magento-LayeredNavLimit extension for your requirement.This might be help you. Oct 27, 2015 at 10:53
  • i am using above your code it's working fine but if we have 2 or more attrribute value than it's not working proper.
    – Nikul
    Sep 1, 2016 at 13:41

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.