Big Commerce - Product Review Integration - Catalog Ingestion & Review Display Kevin Miller
I. Disable BigCommerce native product review solution.
-
Navigate to your BigCommerce dashboard.
-
In your dashboard, click Advanced Settings on the left tab --> Comments --> "Built-in Settings"
-
Uncheck the product review box.
II. Adding the Product Review Scripts for Catalog Ingestion and Review Display
-
Click on Advanced Settings to take you back to the main menu
-
Click Script Manager
-
Click Create New Script
4. Make sure the settings follow the guide above.
5. Place the following script:
<script>
const ProductVariants = [];
var __RRPRWidget_Settings = {};
fetch('/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer {{ settings.storefront_api.token }}'
},
body: JSON.stringify({
query:`
query SingleProduct {
site {
products (entityIds : [{{ product.id }}]) {
edges {
node {
variants {
edges {
node {
entityId
sku
defaultImage {
url(width: 500, height: 500)
}
}
}
}
}
}
}
}
}
`
}),
})
.then(res => res.json())
.then(function(response) {
if(response) {
var ParentContainer = document.getElementsByClassName("productView-product")[0];
if(ParentContainer)
{
var RR_PR_Widget = document.createElement('div');
RR_PR_Widget.setAttribute('id', 'RR_PR_Widget_Wrapper');
ParentContainer.appendChild(RR_PR_Widget);
}
var productTabs = document.querySelector('ul.tabs');
var productTabContents = document.querySelector('div.tabs-contents');
if(productTabs != null && productTabContents != null )
{
var RRReviewsTabLi = document.createElement('li');
RRReviewsTabLi.setAttribute('class','tab');
var RRReviewsTabAnchor = document.createElement('a');
RRReviewsTabAnchor.setAttribute('class','tab-title');
RRReviewsTabAnchor.setAttribute('href','#tab-reviews');
RRReviewsTabAnchor.setAttribute('id','PR_link');
RRReviewsTabAnchor.textContent = 'Reviews';
RRReviewsTabLi.appendChild(RRReviewsTabAnchor);
productTabs.appendChild(RRReviewsTabLi);
var RRReviewsContent = document.createElement('div');
RRReviewsContent.setAttribute('class', 'tab-content');
RRReviewsContent.setAttribute('id', 'tab-reviews');
RRReviewsContent.setAttribute('aria-hidden', 'true');
var RRReviewsWrapper = document.createElement('div');
RRReviewsWrapper.setAttribute('id', 'RR_PR_Frame_Wrapper');
RRReviewsContent.appendChild(RRReviewsWrapper);
productTabContents.appendChild(RRReviewsContent);
}
for (var i = 0; i < response.data.site.products.edges.length; i++) {
for (var index = 0; index < response.data.site.products.edges[i].node.variants.edges.length; index++) {
ProductVariants.push({
name: "{{product.title}}",
sku: response.data.site.products.edges[i].node.variants.edges[index].node.sku,
img: "{{getImage product.main_image 'thumb_size' (cdn theme_settings.default_image_product)}}",
url: "{{product.url}}",
brand: "{{product.brand.name}}",
category: "{{product.category}}",
parent_id: "{{product.id}}",
parent_name: "{{product.title}}"
});
}
}
var rr_product_sku =("{{product.sku}}" !== "") ? "{{product.sku}}" : ProductVariants[0].sku;
__RRPRWidget_Settings = {
name: "{{product.title}}",
sku: rr_product_sku,
img: "{{getImage product.main_image 'thumb_size' (cdn theme_settings.default_image_product)}}",
url: "{{product.url}}",
brand: "{{product.brand.name}}",
category: "{{product.category}}",
parent_id: "{{product.id}}",
parent_name: "{{product.title}}",
products: ProductVariants,
onclick: function(){
$('html').animate({
scrollTop: $('#PR_link').offset().top - 50
}, 700);
document.getElementById('PR_link').click();
}
};
var s=document.createElement('script');s.type='text/javascript';
s.defer=true;
s.src="https://www.resellerratings.com/productreviews/widget/javascript/YOUR_SEO_NAME.js?sku="+rr_product_sku;
var ss=document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s,ss);
}
});
</script>
If your package includes Social Q&A - please include this version of the script in the Script Manager
<script>
const ProductVariants = [];
var __RRPRWidget_Settings = {};
fetch('/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer {{ settings.storefront_api.token }}'
},
body: JSON.stringify({
query:`
query SingleProduct {
site {
products (entityIds : [{{ product.id }}]) {
edges {
node {
variants {
edges {
node {
entityId
sku
defaultImage {
url(width: 500, height: 500)
}
}
}
}
}
}
}
}
}
`
}),
})
.then(res => res.json())
.then(function(response) {
if(response) {
var ParentContainer = document.getElementsByClassName("productView-product")[0];
if(ParentContainer)
{
var RR_PR_Widget = document.createElement('div');
RR_PR_Widget.setAttribute('id', 'RR_PR_Widget_Wrapper');
ParentContainer.appendChild(RR_PR_Widget);
}
var productTabs = document.querySelector('ul.tabs');
var productTabContents = document.querySelector('div.tabs-contents');
if(productTabs != null && productTabContents != null )
{
var RRReviewsTabLi = document.createElement('li');
RRReviewsTabLi.setAttribute('class','tab');
var RRReviewsTabAnchor = document.createElement('a');
RRReviewsTabAnchor.setAttribute('class','tab-title');
RRReviewsTabAnchor.setAttribute('href','#tab-reviews');
RRReviewsTabAnchor.setAttribute('id','PR_link');
RRReviewsTabAnchor.textContent = 'Reviews';
RRReviewsTabLi.appendChild(RRReviewsTabAnchor);
productTabs.appendChild(RRReviewsTabLi);
var RRReviewsContent = document.createElement('div');
RRReviewsContent.setAttribute('class', 'tab-content');
RRReviewsContent.setAttribute('id', 'tab-reviews');
RRReviewsContent.setAttribute('aria-hidden', 'true');
var RRReviewsWrapper = document.createElement('div');
RRReviewsWrapper.setAttribute('id', 'RR_PR_Frame_Wrapper');
RRReviewsContent.appendChild(RRReviewsWrapper);
productTabContents.appendChild(RRReviewsContent);
var RRQNATabLi = document.createElement('li');
RRQNATabLi.setAttribute('class','tab');
var RRQNATabAnchor = document.createElement('a');
RRQNATabAnchor.setAttribute('class','tab-title');
RRQNATabAnchor.setAttribute('href','#tab-qna');
RRQNATabAnchor.setAttribute('id','QNA_link');
RRQNATabAnchor.textContent = 'Questions and Answers';
RRQNATabLi.appendChild(RRQNATabAnchor);
productTabs.appendChild(RRQNATabLi);
var RRQNAContent = document.createElement('div');
RRQNAContent.setAttribute('class', 'tab-content');
RRQNAContent.setAttribute('id', 'tab-qna');
RRQNAContent.setAttribute('aria-hidden', 'true');
var RRQNAWrapper = document.createElement('div');
RRQNAWrapper.setAttribute('id', 'rr_soqa_widget');
RRQNAContent.appendChild(RRQNAWrapper);
productTabContents.appendChild(RRQNAContent);
}
for (var i = 0; i < response.data.site.products.edges.length; i++) {
for (var index = 0; index < response.data.site.products.edges[i].node.variants.edges.length; index++) {
ProductVariants.push({
name: "{{product.title}}",
sku: response.data.site.products.edges[i].node.variants.edges[index].node.sku,
img: "{{getImage product.main_image 'thumb_size' (cdn theme_settings.default_image_product)}}",
url: "{{product.url}}",
brand: "{{product.brand.name}}",
category: "{{product.category}}",
parent_id: "{{product.id}}",
parent_name: "{{product.title}}"
});
}
}
var rr_product_sku =("{{product.sku}}" !== "") ? "{{product.sku}}" : ProductVariants[0].sku;
__RRPRWidget_Settings = {
name: "{{product.title}}",
sku: rr_product_sku,
img: "{{getImage product.main_image 'thumb_size' (cdn theme_settings.default_image_product)}}",
url: "{{product.url}}",
brand: "{{product.brand.name}}",
category: "{{product.category}}",
parent_id: "{{product.id}}",
parent_name: "{{product.title}}",
products: ProductVariants,
onclick: function(){
$('html').animate({
scrollTop: $('#PR_link').offset().top - 50
}, 700);
document.getElementById('PR_link').click();
}
};
var s=document.createElement('script');s.type='text/javascript';
s.defer=true;
s.src="https://www.resellerratings.com/productreviews/widget/javascript/RRBigCommerce_Demo.js?sku="+rr_product_sku;
var ss=document.getElementsByTagName('script')[0];
ss.parentNode.insertBefore(s,ss);
}
});
</script>
6. Make sure to update YOUR_SEO_NAME at the bottom of this script with your unique SEO name for ResellerRatings. Please contact your account manager to receive this information.
7. Click Save
Did this answer your question?