Power Reviews Shopify Single Product and Related Products Widget
Posted by Cameron Shaw on
Recently in a Shopify project I was working quite a bit with getter Power Reviews to pull in both the reviews listing and widget for the main product, but also to show the review stars for a related products widget down below. Here's the code that I used to pass in an array of objects for it to render in the POWERREVIEWS.display.render() function.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
make sure when this is called the {{ product }} object is the correct one on the product page (e.g. nothing else has called {% assign product = ... %} | |
In your collection of products or when you loop through the related/recommended products, just get those IDs and include them in the power_reviews_ids variable | |
E.g. | |
{% for related_product in product_collections.products %} | |
{% assign product = related_product %} | |
{% include 'product-grid-item' %} | |
{% if power_reviews_ids == '' %} | |
{% assign power_reviews_ids = product.id %} | |
{% else %} | |
{% assign power_reviews_ids = power_reviews_ids | append: ',' | append: product.id %} | |
{% endif %} | |
{% endfor %} | |
{% endcomment %} | |
<!-- start_review_render_code_js_section --> | |
<script src="//ui.powerreviews.com/stable/4.0/ui.js"></script> | |
{% assign id_array = power_reviews_ids | split: ',' %} | |
<script id="power-reviews-product-load-script"> | |
POWERREVIEWS.display.render( | |
[ | |
{ | |
api_key: "xxxxxxx-xxxxxx-xxx-xxxxxx-xxxxx", | |
locale: "en_US", | |
merchant_group_id: "xxxxx", | |
merchant_id: "xxxxxxx", | |
page_id: "{{ product.id }}", | |
structured_data_product_id: "{{ handle }}#{{ product.id }}", | |
review_wrapper_url: "https://YOURSHOPIFYURL.myshopify.com/pages/write-a-review/?pr_page_id={{ product.id }}", | |
product: { | |
name: "{{ product.title | escape }}", | |
url: "https://upspringbaby-usa.myshopify.com{{ product.url }}", | |
image_url: "https:{{ product.featured_image | product_img_url: "large" }}", | |
description: "{{ product.description | strip_html | strip_newlines | escape }}", | |
category_name: {% if product.type != '' %}"{{ product.type }}"{% else %} "Default" {% endif %}, | |
upc: {% if product.variants.size == 1 and product.variants.first.title == 'Default Title' and product.variants.first.barcode != blank %}"{{ product.variants.first.barcode }}"{% else %}"{{ product.barcode }}"{% endif %}, | |
brand_name: "{{ product.vendor }}", | |
price: "{{ product.price | money_without_currency }}", | |
{% unless product.variants.size == 1 and product.variants.first.title == 'Default Title' %} | |
variants: [{% for variant in product.variants %}{ | |
name: "{{ variant.title | escape }}", | |
description: "{{ variant.title | escape }}", | |
page_id_variant: "{{variant.id}}", | |
upc: "{{ variant.barcode }}" | |
}{% if forloop.last == false %}, {% endif %} {% endfor %} | |
],{% endunless %} | |
in_stock: "{{ product.available }}" | |
}, | |
on_read_reviews_click: function() { | |
$('html, body').animate({scrollTop: $("#reviews-widget-container").offset().top}, 1000); | |
}, | |
components: { | |
ReviewDisplay: "pr-reviewdisplay", | |
ReviewSnippet: 'pr-reviewdsnippt', | |
} | |
}, | |
{% for power_reviews_id in id_array %} | |
{ | |
api_key: 'xxxxxxxxx-xxxxxxx-xxx-xxxxxxx-xxxx', | |
locale: 'en_US', | |
merchant_group_id: 'xxxxx', | |
merchant_id: 'xxxxx', | |
page_id: '{{ power_reviews_id }}', | |
components: { | |
CategorySnippet: 'snippet-{{ power_reviews_id }}' | |
} | |
} {% if forloop.last == false %}, {% endif %} | |
{% endfor %} | |
] | |
); | |
</script> | |
<!-- end_review_render_code_js_section --> |