Introduction:

This document provides the comprehensive guidelines for adding the Ratings & Reviews V2 code on the Retailer’s website to manage the Ratings & Reviews (V2) module experience.

Note: Please use the site_id & template id provided by the Annex Cloud while adding this code.

To display the Reviews & Rating module on the Product Page:

Call the Following API:

Request:

Response: The above API will return JSON response with the Ratings & Reviews content.

 Note: 

Pass the required parameters in the following format:
      Var options = array(
    'config' => array('siteId' => '<SITE ID>',
     'templateId' => '<TEMPLATE ID>',
    'currentPageUrl' => '<CURRENT PRODUCT PAGE URL>'
       ),
       'productId' => "<PRODUCT ID/SKU>"
   );

 1.Convert parameter array into json.
 2.Social Annex provide review data in json array with two values topContent and bottomContent.
 3.The  client will need to convert that json array into normal array.
 4.The Client can display above response anywhere on product page.

Sample Code:

$options = array(
 'config' => array('siteId' => '<ENTER_SITE ID>', 
 'templateId' => '<ENTER_TEMPLATE ID>',
 'currentPageUrl' => '<PASS_CURRENT_PRODUCT_PAGE_URL>'
       ),
       'productId' => "<PRODUCT ID/SKU>"
   );
  
   $postedParam = "parameter=" . json_encode($options);
   $sa_s28_curlurl = "http://s28.socialannex.com/v2.0/review/getReviews";
   
/* Below code is used to fetch the scraper file from database */
 $sa_s28_ch = curl_init();
   curl_setopt($sa_s28_ch, CURLOPT_URL, $sa_s28_curlurl);
   curl_setopt($sa_s28_ch, CURLOPT_RETURNTRANSFER, 1);
  // curl_setopt($sa_s28_ch, CURLOPT_POST, count($options));
   curl_setopt($sa_s28_ch, CURLOPT_POSTFIELDS, $postedParam);
   $sa_s28_output = curl_exec($sa_s28_ch);
   $sa_s28_output = json_decode(curl_exec($sa_s28_ch),true);
   curl_close($sa_s28_ch);

Add CSS link tag on the Product page:

Add the following CSS link tag on the product page to fetch the Ratings & Reviews CSS from the Annex

Cloud server.

<link rel="stylesheet" type="text/css" media="screen" href="//cdn.socialannex.com/partner/ENTER_SITE_ID/28/ENTER_TEMPLATE_ID>/css/saStyle.css">

Note: 

• In the above code, replace ENTER_SITE_ID with the site id provided by the Annex Cloud (for staging & production sites).
• Also, replace ENTER_TEMPLATE_ID with the template id provided by the Annex Cloud. Template Id can be varied according to the product category.

Add the JS script on the product page:

1. Add the following JS script to the product page.

<script type="text/javascript">
 var sa_uni = sa_uni || [];
 sa_uni.push(['sa_pg', '2']);
 var sa_s28_review_form = '0';
 var sa_s28_load_onlyform = '0';
 var sa_s28_email = "PASS_LOGGED_USER_EMAIL_ADDRESS";
 var sa_s28_first_name = "PASS_LOGGED_USER_FIRST_NAME";
 var sa_s28_last_name = "PASS_LOGGED_USER_LAST_NAME";
 var sa_s28_user_location = "PASS_LOGGED_USER_LOCATION";
 var sa_s28_location = window.location.href;
var sa_s28_template_id = "ENTER_TEMPLATE_ID";//[MANDATORY]
 var siteid = "ENTER_SITE_ID";//[MANDATORY]
 var sa_s28_product_id = "PASS_PRODUCT_ID/SKU";//[MANDATORY]
 var sa_s28_product_name = "PASS_PRODUCT_NAME";//[MANDATORY]
 var sa_s28_product_image_url ="PASS_PRODUCT_IMAGE_URL";//MANDATORY
 var sa_s28_product_price = "PASS_PRODUCT_PRICE";//[MANDATORY]
 var sa_s28_product_url= = "PASS_PRODUCT_PAGE_URL";//[MANDATORY]
 (function() {function sa_async_load() {
 var sa = document.createElement('script');
 sa.type = 'text/javascript';sa.async = true;
 sa.src = '//cdn.socialannex.com/partner/ENTER_SITE_ID/universal.js';
 var sax = document.getElementsByTagName('script')[0];
 sax.parentNode.insertBefore(sa, sax);
 }
 if (window.attachEvent) {
 window.attachEvent('onload', sa_async_load);
 }
 else {
 window.addEventListener('load', sa_async_load,false);
 }
 })();
</script>

2. In the above code, they pass the following parameters:

• PASS_LOGGED_USER_EMAIL_ADDRESS: Pass the logged-in user’s email address.
• PASS_LOGGED_USER_FIRST_NAME: Pass the logged-in user’s first name.
• PASS_LOGGED_USER_LAST_NAME: Pass the logged-in user’s last name.
• PASS_LOGGED_USER_LOCATION: Pass the logged-in user’s location.
• PASS_PRODUCT ID/SKU: Pass the product id of the product for which the user has submitted his review. It’s a mandatory parameter.
• PASS_PRODUCT NAME: Pass the name of the product on which the user has submitted his review. It’s a mandatory parameter.
• PASS_PRODUCT IAMGE URL: Pass the image URL of the product on which the user has submitted his review. It’s a mandatory parameter
• PASS_PRODUCT PRICE: Pass the price of the product (without currency) on which the user has submitted his review. It’s a mandatory parameter
• PASS_PRODUCT PAGE URL: Pass the page URL of the product on which the user has submitted his review. It’s a mandatory parameter

Note: 

• In the above code, replace ENTER_SITE_ID with the site id provided by the Annex Cloud (for staging & production sites).
• Also, replace ENTER_TEMPLATE_ID with the template id provided by the Annex Cloud. Template Id can be varied according to the product category.

Add specific DIVs:

1. Place the following Div to display product average ratings and write a review link at the top section of product page.
   Note: <div id="socialannex-reviewrating-top"><PRINT API RESPONSE i.e. array["topContent"]></div>
2. Place the following Div to display the product review.
   <div id="socialannex-reviewrating-bottom" >"><PRINT API RESPONSE i.e. array["bottomContent"]></div>

Note: In the above DIVs, the client will need to use the specific API response.

E.g. to display product average ratings at the top section, the client will need to use the array["topContent"]from the API response.