Pagination Not Working

Solved
Praveen_gowda
Tourist
15 0 1

Hi Dear Shopify Folks,

Pagination is not working on my website, it showing all my products(almost 1000 products) in the same page.

Thanks in advance!

Collections link: http://www.ispirit.com.au/collections/kurtis

here is the code for collection.liquid:

 

<div id="collectionpage">
{% paginate collection.products by 50 %}

<div class="collection-description">
    <h1>{{ collection.title }}</h1>
    {{ collection.description }}
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
   $(".collection-description img").addClass("scale-with-grid"); 
});
</script>
</div>

{% if paginate.pages > 1 %}
<div id="paginate-bar" class="row">
    <span class="left">
    </span>
    <div id="pagination">
{% if paginate.previous %}  {{ 'prev' | link_to: paginate.previous.url }} | {% endif %} Page {{ paginate.current_page }} of {{ paginate.pages }} {% if paginate.next %} | {{ 'Next' | link_to: paginate.next.url }}{% endif %}
    </div>
</div>
{% endif %}

<div class="clear"></div>

<div id="sorting-hat" class="row">
{% include 'sort' %}
</div>

<ul id="three-column-collectionlist"> 

    {% for product in collection.products %}
    <li class="collectionitem one-third column" data-alpha="{{product.title}}" data-price="{{product.price}}">     
        <div class="three-column-collection-image">
        {% if product.price < product.compare_at_price %}<div class="sale"></div>{% endif %}
        {% if product.available %}{% else %}<div class="gone"></div>{% endif %}
        
        {% if product.images.size > 1 %}      
        <script type="text/javascript" charset="utf-8">
        $(function(){
            $('.three-column-collection-image').each(function(){
                if($(this).find('img').length > 1) {
                    $(this).find('.img2').hide().css('visibility', 'visible');
                    $(this).hover(function(){
                        $(this).find('.img2').stop(true,true).fadeIn("1000");
                        $(this).find('.img1').stop(true,true).fadeOut("1000");
                    }, function(){
                        $(this).find('.img2').stop(true,true).fadeOut("1000");
                        $(this).find('.img1').stop(true,true).fadeIn("1000");
                    });
                }
            });
        }); 
        </script>
                  <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
                  <img class="img1 lazy scale-with-grid" src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
                  <img class="img2 scale-with-grid" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" /> 
                  </a>       
        {% else %}       
                <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
                  <img class="img1 lazy scale-with-grid" src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
                  </a>
        {% endif %}    
        
        </div>

        <div class="collection-products">
          <h2>
            <a href="{{ product.url | within: collection }}">{{ product.title | truncate: 70 }}<br /><span class="money">{{ product.price | money }}</span> {% if product.price < product.compare_at_price %} was <span class="red">{{ product.compare_at_price | money }}</span>{% endif %}</a>
          </h2>
        </div>
    </li>
  {% endfor %}
  </ul>

<div class="clear"></div>

</div>
{% endpaginate %}

   <script type="text/javascript" charset="utf-8"> 
      $('img').trigger('appear');
    function setLazy(){
        $('.lazy').lazyload({
            effect: "fadeIn",
            threshold: 200
        });
setTimeout(function () {
  window.scrollTo(0, 1);
}, 500);
    }
    
    setLazy();

 var products_count = {{ collection.products_count }},
      pages_count = Math.ceil(products_count / 50),   
      base_url = location.pathname + "?page=",  
      i = 2;
  if (pages_count > 1){
    $('#pagination').hide(); 

    var getItems = function(){
            var dfd = $.Deferred(),
       collection = $('#three-column-collectionlist');
      
      for (i = 2; i <= pages_count;i++ ){    
        $.get(base_url + i, function(data){   
          var items = $(data).find('li.collectionitem');  
          collection.append(items);  
          setLazy();
            if (i = pages_count){
            dfd.resolve();
                }
            });
        }
    return dfd.promise();
}
    
    getItems().done(function(){
        setLazy();
        $('#pagination').hide();
        window.scroll(0,1);
    });
    }
    
    </script>

 

Praveen Gowda | Akuna Technologies | www.akunatech.com
0 Likes
Praveen_gowda
Tourist
15 0 1

Any help?

Praveen Gowda | Akuna Technologies | www.akunatech.com
0 Likes
Praveen_gowda
Tourist
15 0 1

Anyone Please?

Praveen Gowda | Akuna Technologies | www.akunatech.com
0 Likes
Jason
Shopify Expert
10402 163 2046

The pagination is working but your theme dynamically loads the subsequent pages. Once the pages are loaded the pagination is hidden (so it's still there). This is not a bug, but a feature of your theme. Are you wanting to remove that feature?

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Praveen_gowda
Tourist
15 0 1

Jason Thanks for your valuable reply!

Ya i want to remove that feature,Just i want to display pagination.

Thanks,

Praveen Gowda | Akuna Technologies | www.akunatech.com
0 Likes
Jason
Shopify Expert
10402 163 2046

This is an accepted solution.

There could be an option in your theme settings to do this already but if not just wrap some js in a comment. The js to wrap is likely:

{% comment %}

var products_count = {{ collection.products_count }},
      pages_count = Math.ceil(products_count / 50),   
      base_url = location.pathname + "?page=",  
      i = 2;
  if (pages_count > 1){
    $('#pagination').hide(); 

    var getItems = function(){
            var dfd = $.Deferred(),
       collection = $('#three-column-collectionlist');
      
      for (i = 2; i <= pages_count;i++ ){    
        $.get(base_url + i, function(data){   
          var items = $(data).find('li.collectionitem');  
          collection.append(items);  
          setLazy();
            if (i = pages_count){
            dfd.resolve();
                }
            });
        }
    return dfd.promise();
}
    
    getItems().done(function(){
        setLazy();
        $('#pagination').hide();
        window.scroll(0,1);
    });
    }

{% endcomment %}

Be aware that this will likely break your name and price filtering (as that needs to load all products to work properly).

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Praveen_gowda
Tourist
15 0 1

Jason Thank you very Much! I will check :)

Thanks,

Praveen.

Praveen Gowda | Akuna Technologies | www.akunatech.com
0 Likes
Praveen_gowda
Tourist
15 0 1

Jason Solved the issue, Thank You very much!!!

 

Praveen Gowda | Akuna Technologies | www.akunatech.com
0 Likes