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>
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);
    });

});
  • It works! There's only a little problem: sidebar (also other content) is loading very slowly. – domfitty Oct 27 '15 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>
  • It does not work also adding jQuery.noConflict(); in the script – domfitty Oct 27 '15 at 10:20
  • is it showing any js error in console? – Akhilesh Patel Oct 27 '15 at 10:34
  • Yes... Uncaught TypeError: Cannot read property 'each' of null – domfitty Oct 27 '15 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. – Akhilesh Patel Oct 27 '15 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 '16 at 13:41

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.