Shopper Ratings - Installing Shopper Answers

Staffing Requirements

  • Project Manager
  • Server Side Developer
  • Front-End Developer

Overview

Installing Shopper Answers requires in-depth coordination in between the Customers and Answers Tech Teams. Each installation requires up to two (2) code deployments. During each deployment, the Answers Tech Team stands by to ensure all code is working correctly and without conflicts.

The first code push requires placing the Answers Cloud Services Script to an Answers Accessible location. Once this URL has been tested, styled and coded, it is recommended to deploy Shopper Answers to the rest of the clients web site. This process generally takes two or three weeks.

Product Detail Page Installation

shopperAnswers02

Step 1: Place Script on Product Detail Page
As detailed in previous screenshot, the Shopper Answers requires the following div’s and JavaScript to be placed in the appropriate places in order to function correctly.

Shopper Answers Div’s

<div id="answ_qna_widget"></div> /*Place next to price*/
<div id="answ_qna_questions"></div> /*Place in tab or underneath description*/

Shopper Answers Script 2/2

This script needs to be placed at the bottom of the page. Using uberJS on your page will allow you to eliminate the bolded lines in the below example.

/** Beginning of Answers Cloud Services Script - Place before </body> tag **/
<script>
   (function(w) {
      var acs = w._answ_cloudservices = w._answ_cloudservices || {};
         acs.site_code = "YOUR SITE CODE";
         acs.product_id = "YOUR PRODUCT ID";
         acs.mpn = "MPN" || null;
         acs.sku = "SKU";
         acs.category_product_ids = TRUE;
         acs.answ_category = "YOUR > BREADCRUMB > NAV";
         acs.brand = "Brand";
         acs.product_name = "Your Product Name";
         acs.image_link = "//yourdomain.com/image.png";
         acs.url = "//yourdomain.com/detail_page.aspx?id=something";
   })(window);
</script>

<script type='text/javascript'>
// Answers Cloud Services Embed Script v1.02
// DO NOT MODIFY BELOW THIS LINE *****************************************
;(function (g) {var d = document, i, am = d.createElement('script'), h = d.head || d.getElementsByTagName('head')[0], aex = {'src': '//gateway.answerscloud.com/YOURSITECODE/production/gateway.mi
n.js','type': 'text/javascript','async': 'true','data-vendor': 'acs','data-role': 'gateway'}; for (var attr in aex) { am.setAttribute(attr,aex[attr]); } h.appendChild(am);g['acsReady'] = function () {var
aT = '__acsReady__', args = Array.prototype.slice.call(arguments, 0),k = setInterval(function () {if (typeof g[aT] === 'function') {clearInterval(k);for (i = 0; i < args.length; i++) {g[aT].call(g, functi
on(fn) { return function() { setTimeout(fn, 1) };}(args[i]));}}}, 50);};})(window);
// DO NOT MODIFY ABOVE THIS LINE *****************************************
</script>
window._answ_cloudservices.qna.onload = function (api) {
   api.addEventListener(api.eventNames.READ_QNA_CLICK, function (e) {
      $("#tab-name-here").trigger("click");
      //document.location.href = $('#tab-name-here').attr('href');
      //e.preventDefault();
   });
};

Step 2: Deploy to a Production URL

To ensure quick styling of Shopper Answers, deploy the above div’s and JavaScript (Shopper Answers Script 2/2) to single page that this accessible to the Answers Tech Manager.

Once deployed, Shopper Answers is not visible to end users since the script is turned off by default. You can test your installation by using the following parameter:

http://site.com/page.htm?acs-qna=true

This script activates Shopper Answers for a single page load. Once the parameter is removed, the script deactivates.

Step 3: Send URL to Answers Tech Manager

Most CSS styling generally takes ~seven days to fully test Shopper Answers for cross-platform compliance (IE8+).

Step 4: Deploy to Production (sitewide)

The Answers Project Manager will then send you a final URL for approval to test the implementation. The progress of the styling can be found at the following URL:

http://site.com/page.htm?acs-qna=true&acs-qna-css=stage

Deployment:

Once approved, the Answers Project Manager will turn on your script for your Server-Side Tech to deploy sitewide.

Definitions:

acs.site_code = String (required) This is an ID given to you by Answers. This is the same on all pages.
acs.product_id = String (required) This is an ID unique to your product. (This would match your Webcollage product code, if applicable.)
acs.url = String (required) A URL to the product description page.
acs.brand = String (required) The brand of the product.
acs.product_name = String (required) The name of the product.

Action Items

  • Sign off of the final design
  • Ensure you can draw variables in an array on the “Product Detail” Page
  • Ensure the “product_ID” from the product detail page script matches the “product_ID” in the post-checkout script
  • Place script on a single page and deploy into production. The Q&A system is not available to the general public and can only be seen using a series of special parameters. Using these parameters, the Shopper Answers Implementation Team will style it completely.
  • If your reviews will be rendered behind a tab, please use our Tab Activation JS API call to auto-select that tab.
  • Coordinate with the Answers Project Managers on the time and day you want to deploy Shopper Answers. We’ll turn your review system “active” sitewide.

Other articles in this section:

  1. Installing Shopper Answers (current article)
  2. Overview
  3. Overview
  4. Assigning Moderators
  5. Installing Shopper Ratings
  6. Final Deployment
  7. Shopper Ratings Setup
  8. Ratings Moderation
  9. Exporting Data
  10. Advanced Content Integration Guide