Here you will find the steps to implement Shopper Approved's survey code and display widgets
Step 1: Thank you page survey code
Your Thank You page is the page that your customers are sent to immediately after they buy. Once you add the code, you need to test it to make sure that it is working properly.
Now to place the code, go to Settings > Advanced > Data solutions > Web Analytics > Affiliate Conversion Tracking
Thank you page survey Code - Merchant and Product Bolt-on code
Note: Don’t forget to change the Site ID and Site Token
<!-- New/Correct Shopper Approved code -->
<script>
const saRegex = /.*\//gm;
const saStr = location.pathname;
const saSubst = '';
var saURL = saStr.replace(saRegex, saSubst);
if (saURL == 'order-confirmation' || saURL == 'finishorder.php' || saURL == 'finish-order.php') { //initial site information
var oInfo;
var cusName;
var sa_values = {};
var siteID = 00000; // CHANGE IT TO YOUR SITE ID
var siteToken = 'abcdefg8'; // CHANGE IT TO YOUR SITE TOKEN
fetch('/api/storefront/order/%%ORDER_ID%%', {credentials: 'include'})
.then(function(response) {
return response.json();
})
.then(function(myJson) {
oInfo = myJson;
sa_products={};
var prodData=oInfo.lineItems.physicalItems;
for(var i=0; i < prodData.length;i++){
var prodD=prodData[i];
sa_products[prodD.productId]=prodD.name; //prodD.sku or prodD.productId
}
cusName = oInfo.billingAddress.firstName + ' ' + oInfo.billingAddress.lastName;
sa_values = {
'site': siteID,
'token': siteToken,
'orderid': '%%ORDER_ID%%',
'email': '%%ORDER_EMAIL%%',
'name': cusName
};
function saLoadScript(src) { var js = window.document.createElement('script'); js.src = src; js.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(js); } var d = new Date(); if (d.getTime() - 172800000 > 1477399567000) saLoadScript('//www.shopperapproved.com/thankyou/rate/' + siteID + '.js'); else saLoadScript('//direct.shopperapproved.com/thankyou/rate/' + siteID + '.js?d=' + d.getTime());
});
}
</script>
<!-- End New/Corrected Shopper Approved code -->
TYP Code - Merchant Code Only
Note: Don’t forget to change the Site ID and Site Token
<!-- New/Correct Shopper Approved code -->
<script>
const saRegex = /.*\//gm;
const saStr = location.pathname;
const saSubst = '';
var saURL = saStr.replace(saRegex, saSubst);
if (saURL == 'order-confirmation' || saURL == 'finishorder.php' || saURL == 'finish-order.php') { //initial site information
var oInfo;
var cusName;
var sa_values = {};
var siteID = 00000; // CHANGE IT TO YOUR SITE ID
var siteToken = 'abcdefg8'; // CHANGE IT TO YOUR SITE TOKEN
fetch('/api/storefront/order/%%ORDER_ID%%', {credentials: 'include'})
.then(function(response) {
return response.json();
})
.then(function(myJson) {
oInfo = myJson;
cusName = oInfo.billingAddress.firstName + ' ' + oInfo.billingAddress.lastName;
sa_values = {
'site': siteID,
'token': siteToken,
'orderid': '%%ORDER_ID%%',
'email': '%%ORDER_EMAIL%%',
'name': cusName
};
function saLoadScript(src) { var js = window.document.createElement('script'); js.src = src; js.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(js); } var d = new Date(); if (d.getTime() - 172800000 > 1477399567000) saLoadScript('//www.shopperapproved.com/thankyou/rate/' + siteID + '.js'); else saLoadScript('//direct.shopperapproved.com/thankyou/rate/' + siteID + '.js?d=' + d.getTime());
});
}
</script>
<!-- End New/Corrected Shopper Approved code -->
Step 2: Reviews Page Widget
Go to Storefront > Web Pages > Create a Web Page > Page Name = “Reviews”
2. Click the HTML button to place the reviews page widget code. Save it and you’re done!
3. View the page and see the output.
To add the reviews link, you can go to your theme’s footer template and place an html code for it. Usually the footer template is located on templates/components/common/footer.html but it varies what theme you’ve used.
Step 3: Shopper Approved Seal
Go to your theme’s template files and find the header / footer template to place it to the header or footer. Usually it is located in these 2 files below:
templates/components/common/footer.html
templates/components/common/header.html
Step 4: Category Code
"Cannon" Script
This script should be placed in the page template footer for category pages, or any other page in which you are using the category code to place stars (such as "you might also like..." carousels.) It should only be on the page once.
Typically, you can put the code before the ending body tag </body> on templates/layout/base.html
<script type="text/javascript">
const sacatRegex = /.*\//gm;
const sacatStr = location.pathname;
const sacatSubst = '';
var sacatURL = sacatStr.replace(sacatRegex, sacatSubst);
if (sacatURL != 'order-confirmation' && sacatURL != 'finishorder.php' && sacatURL != 'finish-order.php') {
function saLoadScript(src) { var js = window.document.createElement('script'); js.src = src; js.type = 'text/javascript'; document.getElementsByTagName("head")[0].appendChild(js); } saLoadScript("https://www.shopperapproved.com/widgets/group2.0/34456.js"); // Change this to your site's category code.
}
</script>
Star "Targets"
These tags will be found by the Cannon script and will be updated with the reviews and star rating of the product.
Typically, you can put the code below the product title on templates/components/products/card.html
<div class="star_container {{id}}"></div>
Step 4: Product Page Code
Overall Star Rating Code
This code is for the stars and review count that typically is placed at the top of your product page next to the product name and pricing.
Put the code on templates/components/products/product-view.html
<div id="product_just_stars" class="reg aside"></div>
Product Page Review Widget
This code is for your Product Review Widget that typically is placed toward the bottom of your product pages.
Put the code on templates/components/products/product-view.html
Change the code below to your site’s product page code and put back the {{product.id}} placeholder to get the product id on the product page.
<div id="SA_review_wrapper" ></div><script type="text/javascript">var sa_product = '{{product.id}}'; var sa_interval = 5000;function saLoadScript(src) { var js = window.document.createElement('script'); js.src = src; js.type = 'text/javascript'; document.getElementsByTagName("head")[0].appendChild(js); } if (typeof(shopper_first) == 'undefined') saLoadScript('//www.shopperapproved.com/widgets/38151/product/'+sa_product+'/product-widget/87cxGL6yPH7v.js'); </script>