Install Trustvox rate widget in shelfs and product's pages

This text guides on how to install Trustvox rate widget. It is interesting for showing up product's ratings on shelfs:

And also on the product's page:

Trustvox rate widget installation

Steps for installation are:

  1. Configure Javascript scripts
  2. Place the HTML placeholder element

Beyond installing Trustvox rate widget, you may also be interested on linking it to Trustvox main widget within produc'ts page.

1. Configure Javascript scripts

We'll need to:

  • Provide the store ID as a variable
  • Load Trustvox rate widget widget.js
<script type="text/javascript">
 var _trustvox_shelf_rate = _trustvox_shelf_rate || [];
 _trustvox_shelf_rate.push(['_storeId', storeId]);
</script>
<script type="text/javascript" async="true" src="//s3-sa-east-1.amazonaws.com/trustvox-rate-widget-js/widget.js"></script>

Where the following variable must be provided:

  • storeId (string): the store's Trustvox unique identifier

For Trustvox Staging Environment

If the store for which we're loading product's ratings was installed within staging environment (staging.trustvox.com.br), we shall use

//s3-sa-east-1.amazonaws.com/trustvox-staging-rate-widget-js/widget.js

Instead of

//s3-sa-east-1.amazonaws.com/trustvox-rate-widget-js/widget.js

For dynamically rendered products

If products are rendered dynamically (e.g.: infinite scroll) within the page in which we're installing the rate widget, we mus provide one more variable:

_trustvox_shelf_rate.push(['_productContainer', dynamicContainers]);

Where

  • dynamicContainers (string): a list of selectors for containers elements in which are added dynamically rendered products. The values for the selectors should be joint with commas.

Exemples for valid values:

_trustvox_shelf_rate.push(['_productContainer', '#dynamic-container']);

Or

_trustvox_shelf_rate.push(['_productContainer', '.class1, .class2, #some-id']);

2. Place the HTML placeholder element

Place this HTML element where the rating for each product should be rendered:

<div data-trustvox-product-code=productId></div>

Where

  • productId (string): product's unique identifier that store uses to identify products within Trustvox services (e.g.: creating sales via Trustvox API)

Ainda precisa de ajuda? Entre em contato Entre em contato