Come posso mostrare le recensioni prodotto nel mio negozio?

 

Le recensioni prodotto che raccogli tramite la piattaforma eTrusted possono anche essere mostrate nel tuo negozio oppure sul tuo sito web. Per la clientela, le recensioni prodotto funzionano veramente solo se si possono leggere. Hai diverse possibilità per mettere in mostra le recensioni prodotto e le stelle di valutazione. In questo articolo ti mostriamo quali sono.

Product Review Sticker

Grazie al Product Review Sticker, puoi esporre le singole recensioni prodotto che la clientela ha lasciato sulla pagina della descrizione prodotto. In questo modo, i e le clienti potranno conoscere ancora meglio i tuoi prodotti e prendere la migliore decisione di acquisto.

Ecco come viene visualizzato il Product Review Sticker con le impostazioni predefinite:

20160502_product-reviews_shop_en.png

Il Product Review Sticker si basa sul seguente codice, che puoi integrare nella pagina della descrizione prodotto dove i e le clienti possono leggere le recensioni:

<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: 'Cosa dicono i nostri e le nostre clienti:'
  };
  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>

All’interno del codice, è possibile apportare delle modifiche per personalizzare il Product Review Sticker in base all’aspetto del tuo negozio. A tale scopo, adesso ti spieghiamo quali sono i singoli parametri e le rispettive opzioni di configurazione.

  • tsid: in questo parametro, inserisci l’ID Trusted Shops del tuo negozio online.
  • sku: qui dovresti inserire il codice SKU del tuo prodotto. Se includi il codice nel template della pagina della descrizione prodotto, qui dovresti inserire la variabile utilizzata nel tuo sistema di negozio. In questo modo, il campo SKU sarà compilato in modo dinamico e il Product Review Sticker corretto sarà mostrato sulla rispettiva pagina della descrizione prodotto. È anche possibile visualizzare le valutazioni complessive per un prodotto disponibile in diverse varianti di colore e taglia. Apri la pagina della descrizione prodotto corrispondente e inserisci nel codice i vari SKU per l’articolo nel seguente formato ['produkt1sku','produkt2sku','produkt3sku']
  • variant: questo parametro è fisso e non deve essere modificato.

La compilazione di questi tre parametri è essenziale per il corretto funzionamento del Product Review Sticker. I seguenti parametri, invece, ti consentono di integrare lo sticker nel tuo negozio nel modo più semplice possibile e di adeguarlo alle tue esigenze. Pertanto, ti consigliamo vivamente di compilare questi campi, sebbene siano facoltativi e non incidano sul funzionamento del Product Review Sticker.

  • borderColor: il Product Review Sticker ha un contorno. Per impostazione predefinita, il bordo è turchese. Se preferisci un altro colore, sostituisci il valore riportato nel codice con il valore esadecimale del colore desiderato.
  • backgroundColor: questo parametro consente di definire il colore di sfondo dello sticker, che sarà visibile tra ogni commento. Per impostazione predefinita, il colore è bianco. Se preferisci un altro colore, anche in questo caso inserisci il valore esadecimale del colore desiderato.
  • locale: questo parametro determina la lingua dei contenuti non generati dai clienti e il formato della data. Di default, la lingua impostata è l’inglese e il formato standard è quello del Regno Unito. Il valore per la localizzazione deve rispettare il seguente formato: language_COUNTRY. La denominazione segue i codici ISO-639 e ISO-3166. Un esempio: il valore per l’Italia sarebbe it_IT.
  • starColor: questo parametro definisce il colore delle stelle presenti nei commenti. Per impostazione predefinita, le stelle sono gialle. Tuttavia, è possibile modificare anche questo colore inserendo un valore esadecimale differente.
  • commentBorderColor: ogni commento ha un bordo. Questo parametro consente di modificare il colore di questo bordo. Per impostazione predefinita, i bordi dei commenti sono grigi; tuttavia, inserendo un valore esadecimale differente, è possibile modificare anche questo colore.
  • commentHideArrow: per impostazione predefinita, ogni commento all’interno dello sticker viene visualizzato in una bolla come quelle che si trovano nei fumetti. Se preferisci visualizzare i commenti in un semplice riquadro, imposta il valore relativo a questo parametro su true.
  • starSize: questo parametro definisce la dimensione delle stelle di valutazione visualizzate. L’impostazione predefinita è 15 px. Tuttavia, questo valore può essere facilmente adeguato a una dimensione differente.
  • ratingSummary: quando questo parametro è attivo, la valutazione complessiva e le stelle per il prodotto vengono mostrate nuovamente sotto il nome del prodotto all’interno dello sticker. Questa funzione è disattivata per impostazione predefinita. Inserisci il valore true in corrispondenza di questo parametro se desideri attivarla.
  • maxHeight: questo parametro consente di modificare in modo flessibile l’altezza del Product Review Sticker. L’impostazione predefinita è 1.200 px. Basta inserire l’altezza desiderata in corrispondenza di questo parametro per modificarla. Tieni a mente che questo parametro non incide sul numero delle valutazioni visualizzate. Se il numero delle valutazioni non è compatibile con l’altezza desiderata dello sticker, viene impostata un’opzione di scorrimento.
  • hideEmptySticker: questo parametro ti consente di nascondere il Product Review Sticker nel caso in cui non dovessero esserci valutazioni per il prodotto. Se vuoi nascondere lo sticker, imposta il valore di questo parametro su true.
  • filter: questo parametro viene utilizzato per integrare una funzionalità nello sticker che consente ai e alle clienti di filtrare le valutazioni visualizzate in base al numero delle stelle assegnate. In questo modo, ad esempio, i e le clienti possono scegliere di visualizzare solo le recensioni con 5 stelle di valutazione. Questa opzione di filtro viene attivata per impostazione predefinita. Se preferisci disattivarla, inserisci false nel valore di questo parametro.
  • element: questo parametro collega il codice JavaScript all’elemento DIV definito nella prima riga del codice. Naturalmente puoi specificare l’ID dell’elemento DIV. Se desideri modificare l’ID, ricorda di cambiarlo sia nell’elemento DIV che nel parametro 'element’. Non è possibile eliminare # dal parametro.
  • introtext: con questo parametro, puoi integrare un breve testo introduttivo al di sotto del nome del prodotto all’interno del Product Review Sticker. L’impostazione predefinita è “Cosa dicono i nostri clienti:". Se desideri inserire un altro testo oppure preferisci direttamente non averne uno, è sufficiente modificarlo o eliminarlo.

Adesso copia sia l’elemento DIV che il codice JavaScript che hai preparato e incollali direttamente all’interno del template per le pagine della descrizione prodotto, dove dovrebbe essere visualizzato il Product Review Sticker. In questo modo, sarà visibile su ogni pagina della descrizione prodotto.

Stelle per le recensioni prodotto

Indipendentemente dal Product Review Sticker, puoi anche visualizzare le stelle per la valutazione complessiva sulla pagina della descrizione prodotto. Se posizionate in modo evidente, le stelle di valutazione forniscono ai e alle clienti un’immagine immediata della valutazione del prodotto.

website_product-reviews_stars_en-GB.png

Se desideri integrare le stelle relative alla recensione prodotto nel tuo negozio, il seguente codice JavaScript è la tua base di partenza.

<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>

Così come per il Product Review Sticker, tre dei parametri sono essenziali e devono essere compilati.

  • tsId: inserisci l’ID Trusted Shops del tuo negozio nel valore relativo a questo parametro.
  • sku: oltre al Product Review Sticker, in questo parametro è necessario inserire il codice SKU del prodotto. Se includi il codice nel template della pagina della descrizione prodotto, qui dovresti inserire la variabile utilizzata nel tuo sistema di negozio. Così facendo, i codici SKU vengono compilati in modo dinamico e le stelle delle recensioni prodotto vengono mostrate sulla rispettiva pagina della descrizione prodotto. È anche possibile visualizzare le stelle di valutazione complessive per un prodotto disponibile in diverse varianti di colore e taglia. Apri la pagina della descrizione prodotto corrispondente e inserisci nel codice i vari SKU per l’articolo nel seguente formato ['produkt1sku','produkt2sku','produkt3sku']
  • element: questo parametro collega il codice JavaScript all’elemento DIV definito nella prima riga del codice. Naturalmente puoi specificare l’ID dell’elemento DIV. Se desideri modificare l’ID, ricorda di cambiarlo sia nell’elemento DIV che nel parametro 'element’. Non è possibile eliminare # dal parametro.

Oltre a questi tre parametri essenziali, il codice JavaScript offre ulteriori opzioni di configurazione per personalizzare le stelle delle recensioni prodotto in base al tuo negozio.

  • starColor: con questo parametro, è possibile definire il colore delle tue stelle di valutazione. L’impostazione predefinita è giallo. Se desideri modificare il colore, è sufficiente sostituire nel codice il valore esadecimale con il valore del colore desiderato.
  • starSize: questo parametro definisce la dimensione delle stelle di valutazione. Per impostazione predefinita, il valore è impostato su 14 px ma è possibile modificarlo nella dimensione desiderata.
  • fontSize: questo parametro determina le dimensioni del font dei dati numerici dietro le stelle di valutazione, che forniscono le informazioni sul numero delle valutazioni date e sulla valutazione complessiva. Per impostazione predefinita, la dimensione del font è impostata su 12 px, ma anche questo valore può essere modificato.
  • showRating: puoi utilizzare questo parametro per disattivare la visualizzazione della valutazione complessiva mostrata dietro le stelle di valutazione. Per impostazione predefinita, la visualizzazione è attiva. Se preferisci disattivarla, inserisci false nel valore relativo a questo parametro.
  • scrollToReviews: questo parametro consente di aggiungere un collegamento di ancoraggio al tuo Product Review Sticker. I e le clienti che fanno clic sulle stelle (quando il parametro è attivo) vengono reindirizzati automaticamente al Product Review Sticker sulla stessa pagina. Questa funzione è disattivata per impostazione predefinita. Se desideri attivarla, dovrai modificare il valore del parametro e impostarlo su true.
  • enablePlaceholder: puoi utilizzare questo parametro per visualizzare le stelle grigie come placeholder nel tuo negozio, qualora ancora non avessi ricevuto recensioni per il prodotto. Questa funzione viene disattivata per impostazione predefinita. Per attivarla, dovrai cambiare il valore del parametro su true.

Dopo aver modificato il codice JavaScript in base alle tue esigenze, puoi visualizzare le stelle della recensione prodotto sulle pagine della descrizione prodotto. Copia il codice preparato, incluso l’elemento DIV nella prima riga del codice e vai al file del template delle tue pagine della descrizione prodotto. Incolla il codice dove vuoi che compaiano le stelle della recensione prodotto. Ti consigliamo di inserire le stelle di valutazione sotto il titolo del prodotto.

Così facendo, avrai integrato le stelle di recensione prodotto nella tua pagina di descrizione prodotto.

Qui di seguito troverai ulteriori articoli sulle recensioni prodotto:
- Come posso utilizzare le recensioni prodotto?
- Come posso aggiungere le recensioni prodotto alla mia integrazione Trustbadge?
- Che aspetto ha il questionario per le recensioni prodotto?


Questo articolo ti è stato utile?

Utenti che ritengono sia utile: 0 su 0