Adobe Commerce 1: Installing Yotpo Reviews

This guide will walk you through the process of integrating the Yotpo Reviews app into your Adobe Commerce store. 

To ensure the installation process goes smoothly, we recommend that you follow the instructions carefully and do not skip any of the steps.

Before you start

Before you get started, we recommend checking the Supported Platforms guide to ensure your hosted eCommerce platform and version are supported by Yotpo.

Installing Yotpo Reviews

Step 1: Check Compilation Status

1. Access your Adobe Commerce account.
2. Click System.
3. Click Tools.
4. Click Compilation.
   • If compilation is disabled, continue to Step 2.
   • If compilation is enabled, you’ll need to disable it:
     1. Access your Adobe Commerce admin.
     2. Click System.
     3. Click Tools.
     4. Click Compilation.
     5. Click Disable.
        You’ll be able to re-enable it again once you’ve finished the installation process.

Step 2: Install the Yotpo Products Reviews Extension

1. Search for Yotpo Reviews in the Adobe Marketplace or click here.
2. Add the Yotpo Reviews to your cart by clicking Add to Cart and proceed to checkout.
   The Yotpo Reviews Adobe Commerce extension is free of charge and there is no payment information required.
3. Find your Adobe Commerce Access Keys here.
4. Select Adobe Commerce 1, find Yotpo Reviews, and copy the access key.

5. Return to your Adobe Commerce admin.
6. Click System.
7. Click Adobe Commerce Connect.
8. Click Adobe Commerce Connect Manager.
9. Paste the access key you copied in previous steps in the input field under Install New Extensions.
10. Click Install, and then click Proceed.
    
    The following message should appear:
    
11. Log out of Adobe Commerce.12. Log back into Adobe Commerce.

Step 3: Install the Yotpo Reviews Widget

1. Return to your Adobe Commerce admin.
2. Click System.
3. Click Configuration.
4. Select your store view name from the Configuration Scope drop-down menu.
5. On the left sidebar, click Yotpo.
6. On the left sidebar, click the Yotpo Product Reviews Software tab.
   If you encounter a "404 page not found" error, log out of Adobe Commerce and log back in.
7. Under Yotpo Widget Configurations, enter your Yotpo App Key and Yotpo Secret Key.
   For instructions on how to find your App Key and your Secret Key, click here.
8. Click Save Config.
   Yotpo JavaScript, Conversion Tracking, Reviews Widget, and Star Rating on Product Pages are now automatically installed.

Step 4: Disable the Built-In Reviews System

1. Return to your Adobe Commerce admin.
2. Click System.
3. Click Configuration.
4. On the left sidebar, click Advanced. You may need to scroll down to see this.
5. If necessary, click Disable Modules output, to open the panel.
6. Set Mage Review to disable.
7. Click Save Config.

Step 5: Re-enable Compilation (optional)

This step is only relevant if Compilation was enabled before you installed Yotpo. If Compilation was disabled, skip to Step 6.

1. Return to your Adobe Commerce admin.
2. Click System.
3. Click Tools.
4. Click Compilation.
5. Click Enable.
6. Click Run Compilation Process.

Step 6: Import your reviews

1. Return to your Adobe Commerce Admin
2. Click Catalog.
3. Select Reviews and Ratings.
4. Select Customer Reviews.
5. Click Select All.
   
6. In the Actions menu, select Export Reviews.
7. Click Submit.
8. The file is downloaded to your local hard drive. You can edit the CSV file before submitting it.
9. Use the online support form to submit the files and Yotpo will import the reviews for you.

Manually installing Yotpo Review Widget

By default, the widget is installed beneath the product description on the product page. First of all, you need to disable to default position:

1. In the admin panel, go to System > Configuration
2. Click on the Yotpo Social Reviews tab on the left
3. Change the Disable Default Widget Position to 'Yes'
4. Click Save

Next, you’ll have to edit the file view.phtml:

Add the following code where you want the widget to appear:

<?php echo $this->helper('yotpo')->showWidget($this, $_product); ?>

Manually installing Yotpo Star Rating

The Yotpo Star Rating presents an aggregated star rating of your products on your product pages.

To add the widget to your product page, paste the following code to the view.phtml file where you want the star rating to appear:

<?php echo $this->helper('yotpo')->showBottomline($this, $_product); ?> 

We recommend adding the code below the next div structure:

<div class="product-name">...</div>

Exporting your existing reviews

1. Install the Yotpo plugin.
2. Log into your Adobe Commerce Admin.
3. Click on Catalog.
4. Select Reviews and Ratings.
5. Select Customer Reviews.
6. Click Select All.
7. Select Export Reviews in the Actions menu.
8. Click Submit. The file will be downloaded to your local hard drive. 
9. Use the online support form to submit the files and Yotpo will import the reviews for you.

Pulling your past orders

Yotpo will send out automatic review request emails to your past customers immediately after you activate the feature. If you don't want Automatic Review Requests to be sent out to your past customers, only to future ones, please contact our support team. To generate past orders:

1. Log into your Adobe Commerce Admin panel.
2. Click System.
3. Click Configuration.
4. Click Yotpo Product Reviews Software in the left-hand tab.
5. Under Yotpo Widget Configuration, click Generate Reviews for My Past Orders.

Exporting your store catalog

The Product Catalog Export Plugin allows you to quickly and easily export your store's catalog in Yotpo's product catalog format.

Once you have the product catalog file, you can use it to update products in your current shop or import products if you are switching to a new shop/platform.

The plugin supports Adobe Commerce multi-store and product attribute codes for unique identifiers (UPC, ISBN, MPN, and Brand).

Installing the plugin

1. Click here to download the installation file.
2. Click the download icon at the top right corner.
3. Open your Adobe Commerce store admin. 
4. Click on System > Magento Connect > Magento Connect Manager. 
5. Go to the Direct package file upload section.
6. Click on Choose file and choose the installation file you just downloaded.
7. Click on Upload.
8. Once the installation is complete, log out from the Adobe Commerce Admin and log in once again in order to refresh the admin's cache.

Accessing the plugin

To access the plugin go to System > Configuration and look for Export Product Catalog.

Exporting your product catalog

1. If you wish to include unique identifiers in your exported catalog, please fill the relevant attribute code field:
   
2. Click the Save Config button to save the information you added to the export.
3. Click the Download Product Catalog button to complete the process.

Where to find the correct attribute code

To find your attribute codes, Click on Catalog > Manage Attributes in your Adobe Commerce Admin Panel:You will then see a list of all your attribute codes. Locate the relevant code and paste it in the corresponding field in the catalog export plugin

Collecting reviews for grouped products

This section describes Yotpo support for configurable and grouped products.

Configurable products

By default reviews for a simple product are automatically shown on the parent page. For example - if the parent product is a Vans Atwood running shoe and the simple product is that same model of shoe in red then the review will be on the Vans Atwood main page.

Grouped products

By default, reviews for grouped products are shown on the simple product pages.To show reviews on the grouped product pages, edit the APIClient.php field.

Editing the APIClient.php file

1. Navigate to /app/code/community/Yotpo/Yotpo/Helper/
2. Open the file APIClient.php in a text editor.
3. Replace the following code:

$configurable_product_model = Mage::getModel('catalog/product_type_configurable');
$parentIds = $configurable_product_model->getParentIdsByChild($full_product->getId());
if (count($parentIds) > 0) {
    $full_product = Mage::getModel('catalog/product')->load($parentIds[0]);
}

with:

//configurable
$configurable_product_model = Mage::getModel('catalog/product_type_configurable');
$configurable_parentIds= $configurable_product_model->getParentIdsByChild($full_product->getId());

//grouped
$grouped_product_model = Mage::getModel('catalog/product_type_grouped');
$grouped_parentIds= $grouped_product_model->getParentIdsByChild($full_product->getId());

if (count($configurable_parentIds) > 0) {
    $full_product = Mage::getModel('catalog/product')->load($configurable_parentIds[0]);
} else if (count($grouped_parentIds) > 0) {
    $full_product = Mage::getModel('catalog/product')->load($grouped_parentIds[0]); 
}

4. Save the file

Troubleshooting

Export reviews tool is missing

If you are trying to export your past reviews from Adobe Commerce 1.X and you cannot find that option on your Adobe Commerce admin page, follow the instructions for the scenario that applies to you.

If using the Amasty extension: The Amasty extension overrides the default Adobe Commerce behavior and prevents Yotpo export from showing.

Solution

1. Locate this file: app/code/community/Yotpo/Yotpo/Model/Export/Observer.php
2. Replace the if condition in line 7 with the one below:

if ((get_class($block) == 'Mage_Adminhtml_Block_Widget_Grid_Massaction' || get_class($block) == 'Amasty_Oaction_Block_Adminhtml_Widget_Grid_Massaction')

For other cases:You can use the Generate Past Orders feature in your Adobe Commerce Admin to generate a CSV with reviews instead.

Solution

1. Locate this file: app/code/community/Yotpo/Yotpo/Model/Export/Csv.php
2. Replace each loop in lines 26-34 with the following:

foreach ($allReviews as $fullReview) {
  $io->streamWriteCsv($this->writeReview($storeId, $fullReview));         
} 

3. Locate this file: app/code/community/Yotpo/Yotpo/controllers/Adminhtml/YotpoController.php
4. Replace the massMailAfterPurchaseAction function in lines 11-112 with the following:

public function massMailAfterPurchaseAction() {
    $reviews = array('reviews');
    $file = Mage::getModel('Yotpo_Yotpo_Model_Export_Csv')->exportReviews($reviews);
    $this->_prepareDownloadResponse($file, file_get_contents(Mage::getBaseDir('export').'/'.$file));
    var_dump(Mage::getBaseDir('export').'/'.$file);
    Mage::app()->getResponse()->setBody(1);
}

5. Click on the Generate reviews for my past ordersbutton:

   

6. The export file is now ready for your use on this directory: var/export/
7. Revert the files you modified in Adobe Commerce to their original version

Installing Yotpo in a Tab With EasyTabs

1. Log into Adobe Commerce and go to 'Template Masters -> Easy Tabs'.
2. Click '( + ) Add New'.
3. From the 'Block Type' drop-down select 'Custom Block'. Fill out the rest of the information.
   • Title: Whatever title you wish to appear
   • Alias: Doesn't matter, but better make it distinct, "YotpoReviews" is a good name.
   • Block: yotpo/yotpo
   • Template: yotpo/reviews.phtml
   • Sort Order: defines the order in which the tabs will appear if you have other tabs installed.
   • Status: set to 'Enable'
4. Click Save
5. Connect to your server via FTP (or any alternative method) and edit
   app/design/frontend/base/default/template/yotpo/reviews.phtml
   • Add &nbsp; right before the closing: </div>

Here's a screenshot illustrating all the steps:

Sending automatic review requests based on order status

Send automatic review request emails based on completion date or a custom order status rather than the shipment or purchase date. If the order contains multiple purchases, the review request is sent according to the completion date of the first purchase.

An order's Shipment Date can be found in the Order View, under Shipment.

Adobe Commerce configuration

1. Log in to your Adobe Commerce admin.
2. Select Configuration in the System menu.
3. Click the Yotpo Social Reviews Software tab in the sidebar on the left.
4. Change the order status from Complete to Shipped.
5. Click Save.

Editing the Yotpo files

The files you need to edit are in the Yotpo plug-in directory under your Adobe Commerce directory.

Edit YotpoController.php

1. Open app\code\community\Yotpo\Yotpo\controllers\Adminhtml\YotpoController.php in a text editor.
2. Search for the following text: $order_data['order_id'] = $order->getIncrementId();
3. Replace this code:

$order_data['order_id'] = $order->getIncrementId();
 $order_data["email"] = $order->getCustomerEmail();
 $order_data["customer_name"] = $order->getCustomerName();
 $order_data["order_date"] = $order->getCreatedAtDate()->toString('yyyy-MM-dd HH:mm:ss');
 $order_data['currency_iso'] = $order->getOrderCurrency()->getCode();
 $order_data['products'] = Mage::helper('yotpo/apiClient')->prepareProductsData($order);
$orders[] = $order_data;

• with this code

$order_data['order_id'] = $order->getIncrementId();
 $order_data["email"] = $order->getCustomerEmail();
 $order_data["customer_name"] = $order->getCustomerName();
 
 if ( !($order->getShipmentsCollection())){
 
 $order_data["order_date"] = $order->getCreatedAtDate()->toString('yyyy-MM-dd HH:mm:ss'); //if no shipment, user purchase date
 
 } else {
 
 foreach ($order->getShipmentsCollection() as $shipments)
 {
 $shipment = $shipments->getCreatedAt();
 } 
 $order_data["order_date"] = $shipment; //if has shipment, use shipment date
 }
 
 //$order_data["order_date"] = $order->getCreatedAtDate()->toString('yyyy-MM-dd HH:mm:ss');
 $order_data['currency_iso'] = $order->getOrderCurrency()->getCode();
 $order_data['products'] = Mage::helper('yotpo/apiClient')->prepareProductsData($order);
$orders[] = $order_data;

Edit Observer.php

1. Open app\code\community\Yotpo\Yotpo\Model\Mail\Observer.php in a text editor.
2. Search for the following text: if (!in_array($order->getStatus(), $orderStatuses)) {
3. Replace this code:

if (!in_array($order->getStatus(), $orderStatuses))
 {
 return $this;
 }
 $data = array();
 if (!$order->getCustomerIsGuest()) {
 $data["user_reference"] = $order->getCustomerId();
 }
 $data["email"] = $order->getCustomerEmail();
 $data["customer_name"] = $order->getCustomerName();
 $data["order_id"] = $order->getIncrementId();
 $data["order_date"] = $order->getCreatedAtDate()->toString('yyyy-MM-dd HH:mm:ss');
 $data['platform'] = 'magento';
 $data['currency_iso'] = $order->getOrderCurrency()->getCode();
 $data['products'] = Mage::helper('yotpo/apiClient')->prepareProductsData($order);

• with this code

if (!in_array($order->getStatus(), $orderStatuses) || !($order->getShipmentsCollection()) ) //exit if status is invalid, or if no shipment exists
 {
return $this;
 }
 $data = array();
 if (!$order->getCustomerIsGuest()) {
 $data["user_reference"] = $order->getCustomerId();
 }
 $data["email"] = $order->getCustomerEmail();
 $data["customer_name"] = $order->getCustomerName();
 $data["order_id"] = $order->getIncrementId();
 foreach ($order->getShipmentsCollection() as $shipments)
 {
 $shipment = $shipments->getCreatedAt(); //get shipment date
 }
 $data["order_date"] = $shipment; //set shipment date 
 //$data["order_date"] = $order->getCreatedAtDate()->toString('yyyy-MM-dd HH:mm:ss');
 $data['platform'] = 'magento';
 $data['currency_iso'] = $order->getOrderCurrency()->getCode();
 $data['products'] = Mage::helper('yotpo/apiClient')->prepareProductsData($order);

Testing and confirmation

To test that the automatic review request is sent based on shipping date:

1. Make a test purchase after you have completed the configuration
2. Set it the order status to Shipped
3. Make sure that a shipment has been created

Contact Yotpo Support for assistance on completing the test procedure

Troubleshooting

If automatic review requests are not being sent:

1. Make sure that the order has been shipped and that Adobe Commerce has created a shipment for it. The above solution only works if an order shipment entry has been created in Adobe Commerce.
2. Make sure that order status matches the status specified in the Yotpo config panel in Adobe Commerce.

Pulling larger thumbnail images

Yotpo's API pulls the lower-resolution thumbnail images by default from the Adobe Commerce backend to use in MAPs, on-site elements, and social media messaging. If you wish to pull larger images, please use these instructions.

1. Please locate 'Yotpo.php' file (the file may be found under '.../app/code/community/Yotpo/Yotpo/Block').
2. Locate 'getSmallImage()' function;

$image_url = Mage::getModel('catalog/product_media_config')->getMediaUrl($this->getProduct()->getSmallImage());

3. Replace 'getSmallImage()' with 'getImage()' so that the final code looks like that:

$image_url = Mage::getModel('catalog/product_media_config')->getMediaUrl($this->getProduct()->getImage());