How can I access the product reviews object in the liquid layer?

cprater
Tourist
3 0 1

Hi all,

I'm a Front End Developer using the Shopify Product Reviews app for a client. The needs require me to heavily modify the markup generated for each review to the point where css isn't really a reliable option...


My question is: Is there a way for me to access the product reviews object in either the liquid layer or even via ajax request? The intent here would be to get the review data but display it using my own liquid snippet.


Any response is greatly appreciated, thanks!

Replies 5 (5)

Jason
Shopify Expert
11196 226 2287

Sort of.

The Shopify review app stores some content in a metafield, and stores the rest on the apps server. You can grab metafields no problem, and you can use AJAX to grab content from the same url that the app does.

The risk: It's very possible for the app devs to change the urls or endpoints which would break your own code. Hence the "sort of" response. Whatever you do here will be a little hacky so assume it will break at some point. Not something I'd want to see go into production without being ready for a failure.

I made a blog post a while ago that might help - there's code in it:
https://freakdesign.com.au/blogs/news/show-multiple-shopify-product-reviews-on-one-page

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★

cprater
Tourist
3 0 1

Thanks for the quick reply, I'm actually using ShopifyFD too!

Thinking out loud here...maybe the endpoints could be stored as a Shopify setting, so when they do break, it's a simple content entry change. Now if the data structure changes...well that's a different story.

I should get back to this in the afternoon and post an update here...

In the meantime, do you know of/have any recommendations for a Product Reviews app that does allow for a completely custom review snippet?

cprater
Tourist
3 0 1

Jason,

I was able to get your mentioned method working just fine. As you mentioned the endpoints changing, I've just moved the url into Shopifys `settings_schema.json` so it's easily replaceable.

Luckily I've got a small custom front-end running ontop, so I have access to jQuery and ES6. Here basically how I've implemented it, condensed for brevity's sake:

```

  /**
   * loadReviewsScript - Setup the Reviews Script
   * urls and ids are stored as data attributes
   *
   */

  loadReviewsScript() {
    const baseUrl = this.data.get('url');
    const shop = this.data.get('shop');
    const productId = this.data.get('productId');
    const tag = document.createElement('script');
    window.callback = this.handleReviewData.bind(this);

    tag.src = `${baseUrl}?callback=callback&shop=${shop}&product_id=${productId}`;
    tag.async = true;

    document.body.appendChild(tag);
  }
 

  handleReviewData(data) {
    const reviewData = this.parseReviewData(data);

    // Use reviewData here to insert custom review markup into the DOM
  }

  parseReviewData(data) {
    return $(data.reviews).map((i, el) => {
      const $el = $(el);

      return {
        'author': $el.find('.spr-review-header-byline').text(),
        'body': $el.find('.spr-review-content-body').text(),
        'title': $el.find('.spr-review-header-title').text()
      };
    });
  }
```

The main drawback here is the lack of any serverside rendering for the reviews, eliminating some of liquid's helpers. Otherwise the solution works fine as expected.

myupchar
Visitor
1 0 0

Is there a way to use the reviews given to a product in a .liquid file.
I tried to use product.metafields.spr.reviews but it doesn't give me a list of arrays or a list of hash.
Can you help?

TomBud
Shopify Partner
1 0 0