add custom pagination snippets

vikrantnegi · Nov 20, 2017 · bdc86ab · bdc86ab
1 parent 96427e6
commit bdc86ab
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ This is a list of useful Shopify Snippets that I often reference while developin
 * [Back or Continue Shopping link on Cart](#back-or-continue-shopping-link-on-cart)
 * [Calculate Discount on Products](#calculate-discount-on-products)
 * [Call a Product on any page](#call-a-product-on-any-page)
+* [Custom Pagination](#custom-pagination)
 * [Display Articles in a Blog](#display-articles-in-a-blog)
 * [Display Links in a Linklist](#display-links-in-a-linklist)
 * [Display all tags in a blog](#display-all-tags-in-a-blog)
@@ -87,6 +88,15 @@ Inset the following code inside items loop in cart template.
 ```
 Then do anything with product object like ```{{ product.title }}```
 
+## Custom Pagination
+Add `pagination-count` and `pagination-tabs` from the snippet folder to your Shopify Theme Snippet folder
+```liquid
+{% if paginate.pages > 1 %}
+  {% include 'pagination-count' %}
+  {% include 'pagination-tabs' %}
+{% endif %}
+```
+
 ## Display Articles in a Blog
 ```html
 {% for article in blogs.blog-name.articles limit:1 %}

diff --git a/snippets/pagination-count.liquid b/snippets/pagination-count.liquid
@@ -0,0 +1,5 @@
+<ul class="list--inline pagination">
+  <li class="pagination__text">
+    {{ 'general.pagination.current_page' | t: current: paginate.current_page, total: paginate.pages }}
+  </li>
+</ul>
diff --git a/snippets/pagination-tabs.liquid b/snippets/pagination-tabs.liquid
@@ -0,0 +1,6 @@
+{% capture my_supa_pagination_variable %}
+{{ paginate | default_pagination }}
+{% endcapture %}
+<div id="paginate" class="paginate">
+  {{ my_supa_pagination_variable }}
+</div>