Magento Integration (Store and Product Reviews)

Please start by following along with our master integration guide here.

From there, you can follow the steps below to see where to place the code specifically on Magento.

Note: If you are collecting product reviews, it is important to provide us with a product feed before adding the code.

Step 1 - Add the Survey Code

Place the Thank you page code on your theme’s success.phtml template file via FTP access.

Common Locations:

app/design/frontend/{your_vendor_name}/{your_theme_name}/Magento_Checkout/templates/success.phtml
app/design/frontend/{your_vendor_name}/{your_theme_name}/Magento_InventoryInStorePickupFrontend/templates/success.phtml

Thank You Page Code (Store and Product Review code)

Note: Please update the siteID and siteToken values to your own. You will also need to update the product ID variables.

<!-- Shopper Approved TY Page Code -->
<?php

   $objectManager =  \Magento\Framework\App\ObjectManager::getInstance();
   $order = $objectManager->create('Magento\Sales\Model\Order')->loadByIncrementId($block->getOrderId());

if ($order->getCustomerIsGuest() && $order->getBillingAddress()) {
   $customerName = $order->getBillingAddress()->getName();
   //Use $order->getCustomerName() as a last resort
   if (!trim($customerName)) {
       $customerName = $order->getCustomerName();
   }
} else {
   $customerName = $order->getCustomerName();
}
$customerEmail = $order->getCustomerEmail();
$countryCode = $order->getShippingAddress()->getCountryId();
$customerCountry = $objectManager->create('\Magento\Directory\Model\Country')->load($countryCode)->getName();

$orderItems    = $order->getAllVisibleItems();
$orderItemData = [];
?>
<script type="text/javascript">
   var sa_products = {}; //declare sa_products object
   var itemtitle; //set variable for product name
   <?php foreach ($orderItems as $item) {
       $productSku = $item->getSku();
       $productSku = str_replace('"', "", $productSku);
       $productSku = str_replace("'", "", $productSku);
       $productSku = str_replace(" ", "", $productSku);
   ?>
       sa_products['<?= $productSku; ?>'] = '<?= $block->escapeHtml($item->getName()); ?>'; //populate sa_products object with key value pair of 'productid':'productname'
   <?php } ?>
</script>

<script type="text/javascript">var siteID = xxxx; var siteToken = "xxxx"; var sa_values = { "site":siteID, "token":siteToken, 'orderid':'<?= $block->getOrderId(); ?>', 'name':'<?= $customerName; ?>', 'email':'<?= $customerEmail; ?>', 'country':'<?= $customerCountry; ?>', 'state':'<?= $block->escapeHtml($order->getShippingAddress()->getRegionCode()); ?>' }; 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(); saLoadScript("https://www.shopperapproved.com/thankyou/rate/" + siteID + ".js?d=" + d.getTime()); </script>
<!-- END Shopper Approved TY Page Code -->

Once you collect store reviews, you will want to place a dedicated store reviews page on your site to display those reviews.

Step 2 - Place a Test Order

Next, place a test order to verify your integration is working as expected. Our How to Test Your Shopper Approved Survey guide walks you through the process, including how to verify the order information, submit a test review, and test the post-fulfillment survey.

Step 3 - Add a Store Reviews Page

Location: Magento Dashboard > Content > Pages > Add New Page

Enter the ‘Page Title’ and ‘Edit with Page Builder’ to integrate the reviews page code.

2. Add the reviews page code snippet inside the Page Builder.

Example Output:

3. Add a Reviews page link in the footer.

Go to your Magento Dashboard > Content > Blocks > and select the available footer blocks where you want to add the reviews page link.

For this example, select the ‘Footer Cms Content’ block, edit it with Page Builder to add the HTML code for the reviews link.

Example Output:

Step 4 - Add a Seal

Go to your Magento Dashboard > Content > Blocks > and choose the available footer and header blocks where you want to display your seal.

Step 5 - Add a Rotating Widget

Placement is typically above the footer on the home page.

Go to Magento Dashboard > Content > Pages > URL Key: home

2. Get the rotating widget code from the SA dashboard and add it through the HTML widget on the page builder.

Example Output:

Once you collect product reviews, you will want to display product reviews on collection pages and product pages.

Step 6 - Add Category Code

"Cannon" Script or Group 2.0 Script

Typically, this code is placed before the closing body tag </body>

Location:

app/design/frontend/{your_vendor_name}/{your_theme_name}/Magento_Theme/templates/html/footer.phtml

Please read the comments on the source below for what to change.

<script type="text/javascript">
var currentURL=window.location.href;if(currentURL.indexOf("checkout/onepage/success")==-1){
   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/xxxxx.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.

Locations:

app/design/frontend/{your_vendor_name}/{your_theme_name}/Magento_Catalog/templates/product/list.phtml
app/design/frontend/{your_vendor_name}/{your_theme_name}/Magento_Catalog/templates/product/grid.phtml