¿Cómo mostrar las valoraciones de producto en mi tienda?

Las valoraciones de producto que recopiles a través de la plataforma de valoraciones de eTrusted pueden mostrarse también en tu tienda o en tu sitio web. Las valoraciones de producto solo alcanzan su verdadero valor cuando pueden ser leídas por tus clientes. En este artículo te explicamos las diferentes opciones que tienes para mostrar las opiniones de productos y las estrellas de valoración.

Viñeta de valoraciones de producto

Con la Viñeta de valoraciones de producto puedes mostrar en la ficha de producto las valoraciones de producto individuales que tus clientes han emitido. De este modo, tus clientes pueden analizar tus productos con mayor intensidad y tomar la decisión de compra adecuada para ellos.

Este es el aspecto de la Viñeta de valoraciones de producto con la configuración predeterminada:

20160502_product-reviews_shop_en.png

La base de la Viñeta de valoraciones de producto es el siguiente código, que se inserta en el lugar de la ficha de producto donde quieras que tus clientes lean las opiniones:

<div id="productreviewsticker"></div>
<script type="text/javascript">
  _tsProductReviewsConfig = {
        tsid: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        sku: ['ART-123'],
        variant: 'productreviews',
        /* optional */
        borderColor: '#0DBEDC',
        backgroundColor: '#ffffff',
       locale: 'en_GB',
        starColor: '#FFDC0F',
        commentBorderColor: '#dad9d5',
        commentHideArrow: 'false',
        starSize: '15px',
        ratingSummary: 'false',
        maxHeight: '1200px',
        hideEmptySticker: 'false',
        filter: 'true',
        element: '#productreviewsticker',
        introtext: 'What our customers say:'
  };
  var scripts = document.getElementsByTagName('SCRIPT'),
  me = scripts[scripts.length - 1];
  var _ts = document.createElement('SCRIPT');
  _ts.type = 'text/javascript';
  _ts.async = true;
  _ts.charset = 'utf-8';
  _ts.src ='//widgets.trustedshops.com/reviews/tsSticker/tsProductSticker.js';
  me.parentNode.insertBefore(_ts, me);
  _tsProductReviewsConfig.script = _ts;
</script>

Dentro del código puedes hacer algunos ajustes para personalizar la Viñeta de valoraciones de producto a tu tienda. Para ello, te explicaremos a continuación los distintos parámetros y sus opciones de configuración.

  • tsid: Introduce el ID de Trusted Shops de tu tienda online en este parámetro.
  • sku: Introduce el SKU del producto. Si incluyes el código en la plantilla de tu ficha de producto, aquí debes usar la variable utilizada en tu sistema de tienda. Esto garantiza que el SKU se rellene dinámicamente y, por tanto, que se muestre la Viñeta de valoraciones de producto adecuada en cada ficha del producto. También es posible mostrar conjuntamente las opiniones de un producto que está disponible en diferentes variaciones, como color o tamaño. Abre la correspondiente ficha de producto e introduce en el código los diferentes SKUs del respectivo artículo de la siguiente manera ['produkt1sku','produkt2sku','produkt3sku']
  • variant: Este parámetro es fijo y no debe modificarse.

Rellenar estos tres parámetros es esencial para que la Viñeta de valoraciones de producto cumpla su objetivo. No obstante, los siguientes parámetros sirven para integrar la viñeta en tu tienda de la forma más fluida posible, adaptándola a tus necesidades. A pesar de ser opcional, y no afectar a la funcionalidad, recomendamos rellenar estos campos.

  • borderColor: La Viñeta de valoraciones de producto tiene un borde, el cual está configurado por defecto en color turquesa. Si deseas un color diferente, sustituye el valor existente en el código por el valor hexadecimal del color deseado.
  • backgroundColor: Este parámetro permite definir el color de fondo de la viñeta que será visible entre cada comentario. Está configurado por defecto en blanco. Si deseas un color diferente, deberás introducir aquí también el valor hexadecimal del color deseado.
  • locale: Este parámetro determina el idioma del contenido no generado por tus clientes y el formato de la fecha. El idioma por defecto es el inglés y el formato estándar el del Reino Unido. El valor de la configuración regional debe tener el siguiente formato language_COUNTRY. Las designaciones siguen los códigos ISO-639 y ISO-3166. Por ejemplo: Por tanto, el valor adecuado para España sería es_ES.
  • starColor: Este parámetro determina el color de las estrellas de valoración. Por defecto, son de color amarillo, pero aquí también puedes cambiar el color introduciendo un valor hexadecimal diferente.
  • commentBorderColor: Cada comentario tiene un borde. Este parámetro permite ajustar el color de este borde. Por defecto, los bordes de los comentarios son grises, pero introduciendo un valor hexadecimal diferente, puedes ajustar también este color.
  • commentHideArrow: Por defecto, cada comentario dentro de la viñeta se muestra como un globo de diálogo. Si prefieres mostrar los comentarios dentro de una simple caja, establece el valor de este parámetro en true.
  • starSize: Este parámetro define el tamaño de las estrellas de valoración mostradas. La configuración por defecto es de 15 px, pero este valor se puede ajustar fácilmente si deseas un tamaño diferente.
  • ratingSummary: Cuando se activa este parámetro, la nota total y las estrellas del producto vuelven a aparecer debajo del nombre del producto, dentro de la viñeta. Esta función está desactivada por defecto. Si quieres activarla, cambia el valor de este parámetro a true.
  • maxHeight: Este parámetro te permite ajustar de forma flexible la altura de la Viñeta de valoraciones de producto. La configuración por defecto es de 1.200 px. Para ajustar la altura, introduce la altura deseada como valor para este parámetro. Ten en cuenta lo siguiente: Este parámetro no influye en el número de opiniones mostradas. Si el número de valoraciones no es compatible con la altura deseada de la viñeta, se establece una opción de desplazamiento.
  • hideEmptySticker: Este parámetro te permite ocultar la Viñeta de valoraciones de producto mientras no haya ninguna valoración para el respectivo producto. Si quieres ocultar la viñeta, establece el valor de este parámetro en true.
  • filter: Este parámetro se utiliza para integrar en la viñeta una función que permite a tus clientes filtrar las valoraciones mostradas según el número de estrellas otorgadas. De esta manera, por ejemplo, tus clientes solo verán las estrellas de valoración de cinco estrellas. Esta opción de filtro está activada por defecto. Si deseas desactivarla, cambia a false el valor de este parámetro.
  • element: Este parámetro conecta el código JavaScript con el elemento DIV definido en la primera línea del código. Naturalmente, tú también puedes especificar el ID del elemento DIV. Si quieres cambiar el ID, solo recuerda adaptar el ID tanto en el elemento DIV como en el parámetro 'element'. La # no puede dejarse fuera del parámetro.
  • introtext: Con este parámetro puedes integrar un breve texto introductorio debajo del nombre del producto dentro de la Viñeta de valoraciones de producto. El texto por defecto es "Lo que dicen nuestros clientes:". Si deseas un texto diferente, cámbialo; si no deseas tener ningún texto aquí, simplemente elimínalo.

Ahora copia tanto el elemento DIV como el código JavaScript preparado y pega ambos directamente en la posición del archivo de plantilla de tus fichas de producto en la que debes mostrar la Viñeta de valoraciones de producto, de modo que sea visible en cada una de las fichas de producto.

Estrellas de valoración de producto

En la ficha de producto puedes mostrar las estrellas para la nota total, independientemente de la Viñeta de valoraciones de producto. Las estrellas de valoración, colocadas en un lugar destacado, dan a tus clientes una impresión inmediata de la valoración del producto.

website_product-reviews_stars_en-GB.png

Si quieres integrar las estrellas de valoración de producto en tu tienda, el siguiente código JavaScript es tu punto de partida.

<div id="reviewstars"></div>
<script type="text/javascript" src="//widgets.trustedshops.com/reviews/tsSticker/tsProductStickerSummary.js"></script>
<script>
var summaryBadge = new productStickerSummary();
summaryBadge.showSummary(
{
'tsId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
'sku': ['9990004'],
'element': '#reviewstars',
'starColor' : '#FFDC0F',
'starSize' : '14px',
'fontSize' : '12px',
'showRating' : 'true',
'scrollToReviews' : 'false',
'enablePlaceholder' : 'false'
}
);
</script>

Al igual que en el caso de la Viñeta de valoraciones de producto, tres de los parámetros son esenciales y deben rellenarse.

  • tsId: Por favor, introduce el ID de Trusted Shops para tu tienda como valor para este parámetro.
  • sku: Junto a la Viñeta de valoraciones de producto, es necesario introducir en este parámetro el SKU del producto. Si incluyes el código en la plantilla de tu ficha de producto, aquí debes usar la variable utilizada en tu sistema de tienda. Esto garantiza que los SKUs se rellene dinámicamente y, por tanto, que en cada ficha del producto se muestren las correspondientes estrellas de valoraciones de producto. También es posible mostrar conjuntamente las estrellas de valoración de un producto que está disponible en diferentes variaciones, como color o tamaño. Abre la correspondiente ficha de producto e introduce en el código los diferentes SKUs del respectivo artículo de la siguiente manera ['produkt1sku','produkt2sku','produkt3sku']
  • element: Este parámetro conecta el código JavaScript con el elemento DIV definido en la primera línea del código. Naturalmente, tú también puedes especificar el ID del elemento DIV. Si quieres cambiar el ID, solo recuerda adaptar el ID tanto en el elemento DIV como en el parámetro 'element'. La # no puede dejarse fuera del parámetro.

Además de estos tres parámetros esenciales, el código JavaScript ofrece algunas otras opciones de configuración opcionales para personalizar las estrellas de valoración de producto en tu tienda.

  • starColor: Con este parámetro puedes definir el color de las estrellas de valoración. La configuración por defecto es el amarillo. Si quieres cambiar este color, sustituye simplemente el valor hexadecimal del código por el valor del color que desees.
  • starSize: Este parámetro determina el tamaño de las estrellas de valoración. La configuración por defecto es de 14 px, pero también puedes cambiarla al tamaño que desees.
  • fontSize: Este parámetro determina el tamaño de la fuente de los datos numéricos que hay detrás de las estrellas de valoración, que proporcionan información sobre el número de valoraciones emitidas y la nota total. Por defecto, el tamaño de la fuente se establece en 12 px, pero este valor también puede cambiarse.
  • showRating: Puedes utilizar este parámetro para desactivar la visualización de la nota total detrás de las estrellas de valoración. Por defecto, la visualización está activada. Si quieres desactivarla, debes cambiar el valor de este parámetro a false.
  • scrollToReviews: Este parámetro te permite establecer un enlace ancla a la Viñeta de valoraciones de producto. Los clientes que hacen clic en las estrellas, cuando este parámetro está activado, son dirigidos automáticamente a la Viñeta de valoraciones de producto en la misma página. Esta función está desactivada por defecto. Si deseas activarla, tendrás que cambiar el valor del parámetro a true.
  • enablePlaceholder: Puedes utilizar este parámetro para mostrar las estrellas como comodines, con fondo gris, si tu tienda no ha recibido aún ninguna opinión sobre el producto. Esta función está desactivada por defecto. Para activarla, tendrás que cambiar el valor del parámetro a true.

Una vez que hayas preparado el código JavaScript de acuerdo a tus necesidades, puedes colocar las estrellas de valoración de producto en tus fichas de producto. Copia el código preparado incluyendo el elemento DIV en la primera línea de código y ve al archivo de plantilla de tus fichas de producto. Pega el código en el lugar en el que deseas que aparezcan las estrellas de valoración de producto. Te recomendamos que insertes las estrellas de valoración debajo del título del producto.

Ya has integrado con éxito las estrellas de valoración de producto en tu ficha de producto.

Aquí encontrarás más artículos sobre las valoraciones de producto:
- ¿Cómo usar las valoraciones de producto?
- ¿Cómo añado las valoraciones de producto a mi integración del Trustbadge?
- ¿Cómo es el cuestionario para las valoraciones de producto?


¿Ha sido útil el artículo?

Usuarios a los que les pareció útil: 0 de 0