Friday 28 April 2017

Pagination on shopify collection page with linklist

<h1 class="desktop-6 desktop-push-3 tablet-3 mobile-3">
  {% if collection.handle == 'all' %}{{ 'collections.general.all_products' | t }}
  {% elsif collection.handle == 'e-juice' %}
      E JUICE BRANDS
  {% elsif collection.handle == 'a-d' %}
      E JUICE BRANDS
  {% elsif collection.handle == 'e-i' %}
      E JUICE BRANDS
  {% elsif collection.handle == 'j-m' %}
      E JUICE BRANDS
  {% elsif collection.handle == 'n-z' %}
      E JUICE BRANDS
  {% else %}
  {{ collection.title }}
  {% endif %}
</h1>



<div class="clear"></div>
{% if linklists[collection.handle].links.size > 0 %}

<div class="collsn_img_link">
    {% if collection.image %}
    <img src="{{ collection | img_url: 'master' }}"  alt="{{ collection.title | escape }}" />
    {% endif %}
  </div>

<div class="rte">
    {{ collection.description | remove: "[banner]" }}
  
  </div>
{% endif %}
{% if linklists[collection.handle].links.size > 0 %}

<div class="desktop-12 tablet-6 mobile-3 collecsn-linklist ">
  {% comment %}
   <p class="chose-categry">Choose a sub category:-</p>
  {% endcomment %}
      {% assign collections = linklists[collection.handle].links %}
    {% paginate collections by 40 %}
     {% assign currentpage = paginate.current_page %}
      {% assign current_offset = paginate.current_offset %}
    {% assign offset_limit = paginate.current_offset | plus:40 %}
  <ul id="myList" >
  {% for collection_link in collections %}
    {% assign forindex = forloop.index %}
    {% if current_offset < forindex and offset_limit >= forindex %}
    <li class="desktop-3 tablet-3 mobile-3 {% cycle ' first', '', '', ' last' %}">
      {% assign collection = collection_link.object %}
      {% if collection_link.type == 'collection_link' %}
      <div class="collection-image">
        <a href="{{ collection.url }}" title="{{ collection_title }}">
          {% if collection.image %}
          {{ collection.image.src | collection_img_url: 'large' | img_tag: collection_title }}
          {% else %}
          {{ collection.products.first.featured_image | product_img_url: 'large' | img_tag: collection_title }}
          {% endif %}
          <h3>{{ collection_link.title }}</h3>
        </a>    
      </div>
      {% else %}
        <div class="collection-info-inner">     
          <h3>{{ collection_link.title | link_to: collection_link.url }}</h3>
        </div>
      {% endif %}
<!--           <div class="collection-info-inner"> -->
<!--             <a href="{{ collection.url }}" title="{{ collection_title }} collection"> -->
<!--               <h3>{{ link.title | link_to: link.url }}</h3> -->
<!--             </a> -->
<!--        </div> -->
    </li>
    {% endif %}
    {% endfor %}
  </ul>
{% include 'pagination' %}
{% endpaginate %}
  <div class="clear"></div>
<!--   <div id="loadMore">See more</div> -->
  </div>
{% else %}
{% paginate collection.products by 40 %}
<!-- Start Sidebar -->
{% if settings.collection_sidebar %}
{% include 'collection-sidebar' %}
{% endif %}
<!-- End Sidebar -->


<div class="{% if settings.collection_sidebar %}desktop-9 tablet-6{% else %}desktop-12 tablet-6{% endif %} mobile-3">

  <div id="collection-description" class="desktop-12 tablet-6 mobile-3">

<div class="collsn_img">
    {% if collection.image and collection.handle != "candy"%}
    <img src="{{ collection | img_url: 'master' }}"  alt="{{ collection.title | escape }}" />
    {% endif %}
  </div>

<div class="rte" contenteditable="true" spellcheck="false">
    {{ collection.description | remove: "[banner]" }}
  
  </div>
</div>
  {% if settings.collection_sidebar == false %}
  {% if settings.filters %}
  <div id="full-width-filter" class="desktop-12 tablet-6 mobile-3">
    {% include 'filter' %}
  </div>
  {% endif %} 
  {% endif %}

 {% comment %} <div id="full-width-filter" class="desktop-12 tablet-6 mobile-3">
  {% include 'dropdown-filter' %}
  </div>  {% endcomment %}
  <div id="product-loop">
    <div id="product_collection">
    {% for product in collection.products %}
    {% assign products-per-row = settings.products-per-row %}
   
    <div id="product-listing-{{ product.id }}" class="product_price product-index {% if products-per-row == "6" %}desktop-2{% elsif products-per-row == "4" %}desktop-3{% elsif products-per-row == "3" %}desktop-4{% elsif products-per-row == "5" %}desktop-fifth{% elsif products-per-row == "2" %}desktop-6{% endif %} tablet-half mobile-half" data-alpha="{{ product.title }}" data-price="{{ product.price | money_without_currency }}">          
      {% include 'product-listing' %}
    </div>
    {% endfor %}
    </div>
  </div>
</div>
{% include 'pagination' %}
{% endpaginate %}

{% endif %}


<script>

 $( document ).ready(function() {
 
    (function($){
      function fixButtonHeights() {
        var heights = new Array();

        // Loop to get all element heights
        $('.product-index').each(function() {
         
          // Need to let sizes be whatever they want so no overflow on resize
          $(this).css('min-height', '0');
          $(this).css('max-height', 'none');
          $(this).css('height', 'auto');
         
          // Then add size (no units) to array
          heights.push($(this).height());
        
//         alert(heights);
        });

        // Find max height of all elements
        var max = Math.max.apply( Math, heights );
//         alert(max);

        // Set all heights to max height
        $('.product-index').each(function() {
        
          $(this).css('height', max + 'px');
          // Note: IF box-sizing is border-box, would need to manually add border
               

        });
      }

      $(window).load(function() {
        // Fix heights on page load
        setTimeout(function() {
        fixButtonHeights();
        }, 3000);
        // Fix heights on window resize
        $(window).resize(function() {
          // Needs to be a timeout function so it doesn't fire every ms of resize
          setTimeout(function() {
            fixButtonHeights();
          }, 100);
        });
      });
    })(jQuery);
     
  });
 
</script>
<style>
 
</style>
<script>

</script>
<!-- <script>
  $(document).ready(function () {
    size_li = $("#myList li").size();
    x=40;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+40 <= size_li) ? x+40 : size_li;
      if(x == size_li || x >= size_li){
        $('#loadMore').hide();
      }
        $('#myList li:lt('+x+')').show();
    });
});
</script> -->