Skip to main content

Upgrading from Display 3 and Older

  • Updated

Note: Display 3 documentation is provided as a courtesy for clients on this legacy version of PowerReviews. It is no longer supported. We recommend contacting your Account Manager to discuss upgrading to our newer Display 4.1 version as soon as possible.

 

Here are the areas of your website and the features that would need to be observed/upgraded:

Location Potential Features Involved
Product Page Content Display, Review Snippet, Q&A Snippet, SEO Assets
Category Results Page Product Review Snippet, Q&A Snippet

 

 

Step 1 - Remove References to Previous Version of PowerReviews Software

The previous version of PowerReviews had two different Javascript libraries that were used, which you will no longer need: one for the content display and one for the Write-a-Review and Ask a Question forms. You will also no longer need the ServerSide Include that is done for SEO assets.

Find the full.js JavaScript library on your product page and remove it.

<script type="text/javascript"
src="http://cdn.powerreviews.com/repos/<MGID>/pr/pwr/engine/js/full.js">;
</script>

<script type="text/javascript">
var pr_locale="<Locale>"; //optional, will use default if not specified
var pr_page_id="<PageID>";
var pr_write_review='http://www.myStore.com/review.html?pr_page_id='; + pr_page_id;
var pr_zip_location="https://cdn.powerreviews.com/repos/<MGID>/pr/"";
var pr_ask_question = pr_write_review + "&appName=askQuestion";
var pr_answer_question = pr_write_review + "&appName=answerQuestion&questionId=@@@QUESTION_ID@@@";
</script>


Find the appLaunch.js JavaScript library on your product page and remove it.

<div class="pr_write_review">
<script type="text/javascript">
var pr_page_id=<PAGEID>;
var pr_merchant_group_id=<MGID>;
var pr_merchant_id=<MerchID>;
var pr_site_id=<SiteID>;
var pr_locale=<Locale>; //optional, will use default if not specified
</script>
<script type="text/javascript" src="http://cdn.powerreviews.com/repos/<MGID>/pr/pwr/engine/js/appLaunch.js"></script>;
</div>


Lastly, remove Server Side Includes that inject HTML assets on the product page that are used for crawling by GoogleBot.

 

Step 2 - Prepare for Installation of Display 4.1

In order to initialize the Display 4.1/ui.js code used for the content display and write a review forms, you need to prepare the following items.

Item Description Responsibility
Merchant Group ID Primary identification key for your PowerReviews account PowerReviews
Merchant ID Secondary identification key for your PowerReviews account PowerReviews
API Key Unique character sting for access to the Read Services API. PowerReviews
Locale Identifier for the language protocol to be displayed PowerReviews
Write a Review Wrapper Page Pre-built page intended to house Write a Review form Customer
Page ID Product/Page identifier passed to PowerReviews Customer



Step 3 - Add Display 4.1/ui.js to Product Page

Copy and paste the base code into your product page, update the identifier information, and add the components you want rendered. The basic premise of this software is the usage of the different components that are available to render the content display on your product page.

Below is an example of the Display 4.1/ui.js being used to render the review display. In order to pull in different content you would have to include the components in the display renderer and reference them into a specific <div id>.

<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>

<div id="pr-reviewsnippet"></div>
<div id="pr-reviewdisplay"></div>

<script>
 window.pwr = window.pwr || function () {
  (pwr.q = pwr.q || []).push(arguments); 
 };
 pwr("render", {
   api_key: 'API_KEY',
   locale: 'LOCALE',
   merchant_group_id: 'MERCHANT_GROUP_ID',
   merchant_id: 'MERCHANT_ID',
   page_id: 'PAGE_ID',
   review_wrapper_url: 'WRAPPER_URL',
   components: {
      ReviewSnippet: 'pr-reviewsnippet',
      ReviewDisplay: 'pr-reviewdisplay'
   }
});
</script>

 

In the Initialization Code example above, make the following replacements on your PDP.

  • Replace <API Key> with your API Key
  • Replace <Locale> with your site locale.
  • Replace <MGID> with your Merchant Group ID
  • Replace <Merchant ID> with your Merchant ID
  • Replace <PageID> with the page_id you established in the Product Feed
  • Replace <Wrapper URL> with your Write-a-Review page wrapper URL

Typical components that are added to the product page are the following:

 

Components for Displaying Reviews

Key Description
ReviewSnippet A small UI that displays the aggregate rating, review count, and percentage of recommendations for a product
ReviewDisplay The comprehensive Review Display component. Contains the Review Image Display, the Review Display Snapshot, and the Review List (see below)

ReviewSnapshot

An interface that displays the aggregate rating, a distribution of review ratings, and aggregate tag information for a product

ReviewList

 An interface that displays a list of detailed individual reviews

 

Components for Displaying Questions & Answers

Key Description
QuestionSnippet A small UI that displays the aggregate number of questions, as well as link to ask a question
QuestionDisplay A UI that displays all questions and answers for a product, and also provides the ability for consumers to ask their own questions and answer others' questions

 

Components for Displaying Review Images

Key Description
ReviewImageSnippet A small UI that displays a short list of review images
ReviewImageDisplay An interface that displays all images for a given product

 

 

Step 4 - Add SEO Assets to Product Page

PowerReviews Display 4.1/ui.js utilizes a client side version of structured data that is crawled by Google for Rich Snippets and review content. The structured data that is in Display 4/ui.js provides takes no additional effort to render. In order to provide the assets for Rich Snippets, contact your Account Team and request the feature enabled. You should see the structured data injected by Display 4.1/ui.js within 24 hours and crawled by Google.

 

Step 5 - Update Collection Forms

The first step to updating you collection forms is ensuring that you have a wrapper page prepared to house the forms. Once this is complete, updating your Review and Question collection forms is primarily done via the pwr("render") function in Display 4.1/ui.js and the reference to the review wrapper. As a reminder, you should remove any references to appLaunch.js before taking this action.

Below is an example:

<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>

<div id="pr-write"></div>

<script>
 window.pwr = window.pwr || function () {
  (pwr.q = pwr.q || []).push(arguments); 
 };
 pwr("render", {
   api_key: 'API_KEY',
   locale: 'LOCALE',
   merchant_group_id: 'MERCHANT_GROUP_ID',
   merchant_id: 'MERCHANT_ID',
   on_submit:function(config, data){
         window.scrollTo(0,0);
         },
   components: {
      Write: 'pr-write',
   }
 });
</script>



Step 6 - Update Ancillary Pieces of PowerReviews Software

Category Page Snippets

<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>

<div id="pr-category-snippet-1"><div>
<div id="pr-category-snippet-2"><div>
<div id="pr-category-snippet-3"><div>

<script>
 window.pwr = window.pwr || function () {
  (pwr.q = pwr.q || []).push(arguments); 
 };
 pwr("render", [{
 ENABLE_CLIENT_SIDE_STRUCTURED_DATA: false,
   api_key: 'API_KEY',
   locale: 'LOCALE',
   merchant_group_id: 'MERCHANT_GROUP_ID',
   merchant_id: 'MERCHANT_ID',
   page_id: 'PAGE_ID_1',
   components: {
      CategorySnippet: 'pr-category-snippet-1',
 }
   },
   {
 ENABLE_CLIENT_SIDE_STRUCTURED_DATA: false,
   api_key: 'API_KEY',
   locale: 'LOCALE',
   merchant_group_id: 'MERCHANT_GROUP_ID',
   merchant_id: 'MERCHANT_ID',
   page_id: 'PAGE_ID_2',
   components: {
      CategorySnippet: 'pr-category-snippet-2',
 }
   },
   {
 ENABLE_CLIENT_SIDE_STRUCTURED_DATA: false,
   api_key: 'API_KEY',
   locale: 'LOCALE',
   merchant_group_id: 'MERCHANT_GROUP_ID',
   merchant_id: 'MERCHANT_ID',
   page_id: 'PAGE_ID_3',
   components: {
      CategorySnippet: 'pr-category-snippet-3',
 }
   }
   ]);
</script>


Feedless Product Catalog Configuration

Contact PowerReviews Technical Support to confirm this is working properly.


<script src="https://ui.powerreviews.com/stable/4.1/ui.js" async></script>

<script>
 window.pwr = window.pwr || function () {
   (pwr.q = pwr.q || []).push(arguments); 
 };
 pwr("render", {
    api_key: '<API KEY>',
    locale: '<LOCALE>',
    merchant_group_id: '<MGID>',
    merchant_id: '<MERCHANT ID>',
    page_id: '<PAGE ID>',
    review_wrapper_url:'https://yoursite.com/write-a-review/?pr_page_id=__PAGE_ID__',
    product:{
        name: '<your_product_name>', 
        url: '<your_page_url>',
        image_url: '<your_product_image_url>',
        description: '<your_product_description>',
        category_name: '<your_product_category_name>',
        manufacturer_id: '<your_product_manufacturer_id>',
        upc: '<your_product_upc>',
        brand_name: '<your_product_brand_name>',
        price: '<your_product_price>',
        in_stock: '<product_in_stock_status>',
		asin: '<your_product_asin>',
    },
    components: {
      ReviewDisplay: 'pr-reviewdisplay'
    },
 });
</script>

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Return to top