Pagination

Solved
New Member
25 0 0

Hi !

I would like to show reviews from my Etsy shops. I have imported all reviews and have created a file that is basically a json array. 

From there, I would like to make a new page in my Shopify shop. This page should have a pagination showing only a few numbers of reviews per page. I am wondering if there is a kind of template somewhere. 

BTW, I am using the Debut theme and do not want to use an external app.
Many thanks for your help,

M

0 Likes
Shopify Partner
1843 170 525

Hi there,

 

I am not aware of any template that's out there for your specific use case. I mean, it is very specific as you have some JSON data of reviews in some, to us unknown, object shape. What I suggest you do first is figure out how you want to store and retrieve that JSON data. I'd suggest storing that JSON array in a metafield of your shop. Then it's a question of writing up the liquid code that gets the shop's metafield, read in the JSON which is simple too as explained here and iterating through your array of reviews. I'd do that part in Liquid for first N reviews so we make Google happy, the rest I'd page using Javascript - not sure you even can use paginate Liquid filter for arrays?

 

Hope some or any of this made sense. Best wishes!

I turn coffee in to code - since 1998
0 Likes
New Member
25 0 0

Thanks for the quick reply. I understand it is very dependent on my Json array. 

I was not very clear. 

I was  looking for a liquid page template calling a specific Json array using Javascript. This example could be for a particular Json (I would then modify it my self).
Best

0 Likes
Highlighted

Success.

Shopify Partner
1843 170 525

Heya, had to escape the keyboard for a while. So back to the issue at hand.

 

The easiest way I can think of is simply store the JSON reviews in the shop metafields. How are you with metafields? You can use some metafield apps though you don't have to (I prefer not to) and can simply make a one-off (or occasional when updating) POST to the Shopify API to create a new metafield for the shop resource. For example, using the API it would be

 

 

{
  "metafield": {
    "namespace": "reviews",
    "key": "etsy",
    "value_type": "json_string",
    "value": "{\"reviews\":[{\"id\":1,\"content\":\"great stuff\",\"user\":\"lucy\"}]}"
  }
}

 

POST https://mystorename.shopify.com/admin/metafields.json

 

I created such and gave it a namespace reviews and key etsy, value type json_string and the value an escaped JSON string of reviews.

 

Great, with that in place I followed up by creating an alternative page template called page.reviews.liquid. More about the code in a bit, but first I also created a new page called Reviews, added some description and assigned above alternative template to it. So what code do we have in that page template for reviews?

 

 

{% assign etsy_reviews = shop.metafields.reviews['etsy']['reviews'] %}
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>
      <div class="rte">
        {{ page.content }}
      </div>
      <dl>
      {% for review in etsy_reviews %}
        <dt>{{ review.user }}</dt>
        <dd>{{ review.content }}</dd>
      {% endfor %}
      </dl>
      <script id="reviews" type="application/json">
        {{ reviews | json }}
      </script>
      <script>
        (function() {
          var reviews = JSON.parse(document.getElementById('reviews').innerHTML);
          console.log(reviews);
        })();
      </script>
    </div>
  </div>
</div>

 

Code inside the alternative page template we created before called page.reviews.liquid

 

What's going on in there?

 

First I assign the contents of the metafield JSON to the etsy_eviews variable in Liquid. Then there's some off the shelf HTML for page that was already there. Further down I showcase how you can loop through the reviews in Liquid. You will not be able to page that though because Liquid paginate does not work on arbitrary arrays. Even so, it is helpful to render the first 5 or so reviews via Liquid on the server for SEO happiness.

 

Next I have this script tag of type application/json where I simply dump the reviews variable with a json filter. It literally just writes out the JSON string. With that we can now use that JSON in Javascript as well as I show in the next and last script tag (check your browser console to see the log).

 

Those are the basics. With that in place you can go wild and use pure JS or jQuery or whatever other JS framework to read, render and paginate over those reviews.

 

Let me know if anything isn't clear and enjoy coding!

I turn coffee in to code - since 1998
0 Likes
New Member
25 0 0

Oh oh oh !!!!

Big Thanks for this solution.

0 Likes
Shopify Partner
1843 170 525

No problem. Glad if it helps.

I turn coffee in to code - since 1998
0 Likes