Jak wyświetlić opinie o produkcie w sklepie?

Opinie o produkcie gromadzone za pośrednictwem platformy opinii eTrusted możesz oczywiście wyświetlać również w sklepie lub na stronie internetowej. Dla Twoich klientów opinie o produkcie mają pełną wartość tylko wtedy, gdy można je przeczytać. Aby wyświetlić opinie o produkcie i gwiazdki oceny, możesz skorzystać z kilku opcji opisanych w tym artykule.

Product Review Sticker

Funkcja Product Review Sticker umożliwia wyświetlanie poszczególnych opinii o produkcie zamieszczonych przez Twoich klientów na stronie ze szczegółami produktu. Dzięki temu klienci mogą lepiej poznawać Twoje produkty i podejmować właściwe decyzje o zakupie.

Oto, jak prezentuje się funkcja Product Review Sticker z ustawieniami domyślnymi:

fr_product-reviews_shop_en__1_.png

The basis for the Product Review Sticker is the following code, which you embed in the place on your product detail page where you want your customers to be able to read reviews:

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

Jeśli chcesz dostosować funkcję Product Review Sticker do specyfiki Twojego sklepu, możesz odpowiednio skonfigurować kod. Opiszemy teraz poszczególne parametry i możliwości ich konfiguracji.

  • tsid: W tym parametrze należy wprowadzić identyfikator Trusted Shops sklepu internetowego.
  • sku: W tym miejscu wpisz numer SKU produktu. W tym obszarze należy użyć zmiennej używanej w systemie sklepu podczas dodawania kodu do szablonu strony szczegółów produktu. Dzięki temu numer SKU będzie dynamicznie wypełniany, a odpowiednia opinia Product Review Sticker będzie wyświetlana na każdej stronie szczegółów produktu. Istnieje również możliwość zbiorczego wyświetlania ocen produktu, które jest dostępne w różnych wariantach (takich jak kolor czy rozmiar). Otwórz odpowiednią stronę dotyczącą szczegółów produktu i wprowadź w kodzie różne numery SKU danego artykułu w następujący sposób: ['produkt1sku','produkt2sku','produkt3sku']
  • variant: Ten parametr jest stały i nie należy go zmieniać.

Te trzy parametry należy wypełnić, aby funkcja Product Review Sticker mogła spełniać swoje zadanie. Poniższe parametry służą jednak do jak najpłynniejszego zintegrowania opinii ze sklepem i dostosowania jej do Twoich potrzeb. Wypełnienie tych pól jest opcjonalne, ale zdecydowanie zalecane.

  • borderColor: Opinia Product Review Sticker wyświetlana jako moduł posiada obramowanie. Kolorem domyślnym jest turkusowy. Aby użyć innego koloru, zastąp istniejącą wartość w kodzie wartością szesnastkową wybranego koloru.
  • backgroundColor: Ten parametr pozwala na zdefiniowanie koloru tła opinii, które będzie widoczne pomiędzy poszczególnymi komentarzami. Kolorem domyślnym jest biały. Aby użyć innego koloru, jego wartość szesnastkową należy wprowadzić również w tym miejscu.
  • locale: Ten parametr określa język treści niegenerowanej przez klientów oraz format daty. Ustawieniem domyślnym jest język angielski oraz standardowy format stosowany w Wielkiej Brytanii. Wartość parametru „locale” musi mieć następujący format: język_KRAJ. Oznaczenia są zgodne z normami ISO-639 i ISO-3166. Przykład: Poprawna wartość dla języka polskiego miałaby więc postać pl_PL.
  • starColor: Ten parametr określa, jaki kolor powinny mieć gwiazdki w komentarzach. Domyślnie są one żółte, ale można zmienić kolor tutaj, wprowadzając inną wartość szesnastkową.
  • commentBorderColor: Każdy komentarz ma obramowanie. Ten parametr umożliwia dostosowanie jego koloru. Domyślnie obramowania komentarzy są szare, jednak ich kolor również można zmienić — wystarczy wprowadzić inną wartość szesnastkową.
  • commentHideArrow: Domyślnie komentarze w obrębie opinii są wyświetlane w postaci dymków. Aby wyświetlać komentarze wewnątrz prostego pola, nadaj temu parametrowi wartość „true”.
  • starSize: Ten parametr określa rozmiar wyświetlanych gwiazdek oceny. Ustawienie domyślne to 15 pikseli, ale w łatwy sposób można wybrać inny rozmiar.
  • ratingSummary: Gdy ten parametr jest aktywny, wynik ogólny i gwiazdki oceny produktu są wyświetlane także pod nazwą produktu w obszarze opinii. Domyślnie ta funkcja jest nieaktywna. Aby ją aktywować, nadaj temu parametrowi wartość „true”.
  • maxHeight: Ten parametr umożliwia elastyczne dostosowanie wysokości opinii Product Review Sticker. Ustawienie domyślne to 1200 pikseli. Aby zmienić wysokość, podaj ją jako wartość tego parametru. Zwróć uwagę na następującą kwestię: Ten parametr nie ma wpływu na liczbę wyświetlanych ocen. Jeśli liczba ocen nie będzie zgodna z wybraną wysokością opinii, włączona zostanie opcja przewijania.
  • hideEmptySticker: Ten parametr umożliwia ukrycie opinii Product Review Sticker, jeśli nie została wystawiona żadna ocena danego produktu. Aby ukryć opinię, ustaw wartość tego parametru na „true”.
  • filter: Parametr ten służy do integracji z opinią funkcji, która pozwala klientom filtrować oceny według liczby gwiazdek. W ten sposób klienci mogą wyświetlić na przykład tylko oceny z 5 gwiazdkami. Ta opcja filtrowania jest domyślnie włączona. Aby ją wyłączyć, ustaw wartość tego parametru na „false”.
  • element: Ten parametr łączy kod JavaScript z elementem DIV zdefiniowanym w pierwszej linii kodu. Możesz oczywiście samodzielnie określić identyfikator elementu DIV. Aby zmienić identyfikator, musisz tylko pamiętać o jego dostosowaniu zarówno w elemencie DIV, jak i w parametrze „element”. W parametrze nie można pominąć znaku #.
  • introtext: Za pomocą tego parametru możesz zintegrować krótki tekst wprowadzający pod nazwą produktu w opinii Product Review Sticker. Ustawienie domyślne to „Opinie naszych klientów:”. Aby wstawić inny tekst wprowadzający lub pozostawić opinię bez niego, wystarczy zmienić go lub usunąć.

Teraz skopiuj zarówno element DIV, jak i przygotowany kod JavaScript, a następnie wklej te elementy w szablonie stron ze szczegółami produktu — bezpośrednio w miejscu, w którym ma wyświetlać się opinia Product Review Sticker (dzięki temu będzie ona widoczna na każdej stronie ze szczegółami produktu).

Gwiazdki oceny produktu

Gwiazdki oceny łącznej mogą być wyświetlane na stronie ze szczegółami produktu niezależnie od opinii Product Review Sticker. Umieszczone w widocznym miejscu gwiazdki pozwalają Twoim klientom natychmiast zobaczyć ocenę produktu.

website_product-reviews_stars_en-EU.png

Aby zintegrować gwiazdki oceny produktów ze swoim sklepem, zacznij od poniższego kodu JavaScript.

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

Podobnie jak w przypadku opinii Product Review Sticker, wymagane są trzy parametry, które muszą być wypełnione.

  • tsId: Jako wartość tego parametru wprowadź identyfikator Trusted Shops swojego sklepu.
  • sku: W tym parametrze wraz z Product Review Sticker należy wprowadzić numer SKU produktu. W tym obszarze należy użyć zmiennej używanej w systemie sklepu podczas dodawania kodu do szablonu strony szczegółów produktu. Dzięki temu numery SKU będą dynamicznie wypełniane, a odpowiednie gwiazdki oceny wyświetlą się na każdej stronie szczegółów produktu. Możliwe jest również zbiorcze wyświetlanie gwiazdek oceny produktu, które jest dostępne w różnych wariantach (takich jak kolor czy rozmiar). Otwórz odpowiednią stronę dotyczącą szczegółów produktu i wprowadź w kodzie różne numery SKU danego artykułu w następujący sposób: ['produkt1sku','produkt2sku','produkt3sku']
  • element: Ten parametr łączy kod JavaScript z elementem DIV zdefiniowanym w pierwszej linii kodu. Możesz oczywiście samodzielnie określić identyfikator elementu DIV. Aby zmienić identyfikator, musisz tylko pamiętać o jego dostosowaniu zarówno w elemencie DIV, jak i w parametrze „element”. W parametrze nie można pominąć znaku #.

Oprócz tych trzech wymaganych parametrów kod JavaScript udostępnia kilka dodatkowych opcji konfiguracji, które pozwalają dostosować gwiazdki oceny do Twojego sklepu.

  • starColor: Za pomocą tego parametru możesz zdefiniować kolor gwiazdek oceny. Ustawieniem domyślnym jest kolor żółty. Aby zmienić kolor, po prostu zamień wartość szesnastkową w kodzie na wartość wybranego koloru.
  • starSize: Ten parametr określa rozmiar gwiazdek oceny. Ustawienie domyślne to 14 pikseli, ale możesz je zmienić.
  • fontSize: Ten parametr określa rozmiar czcionki danych liczbowych gwiazdek oceny. Dane te obejmują liczbę przyznanych ocen i ocenę łączną. Domyślny rozmiar czcionki to 12 pikseli, ale możesz go zmienić.
  • showRating: Tego parametru możesz użyć, aby wyłączyć wyświetlanie oceny łącznej obok gwiazdek oceny. Domyślnie ocena łączna jest włączona. Aby ją wyłączyć, zmień wartość parametru na „false”.
  • scrollToReviews: Parametr ten umożliwia ustawienie linku do opinii Product Review Sticker. Klienci, którzy klikną na gwiazdki, gdy ten parametr jest aktywny, zostaną automatycznie przekierowani do opinii Product Review Sticker na tej samej stronie. Domyślnie ta funkcja jest nieaktywna. Aby ją włączyć zmień wartość parametru na „true”.
  • enablePlaceholder: Jeśli produkt nie został jeszcze oceniony możesz użyć tego parametru, aby w sklepie wyświetlał się symbol zastępczy szarych gwiazdek. Funkcja ta jest domyślnie wyłączona. Aby ją włączyć, zmień wartość parametru na „true”.

Po skonfigurowaniu kodu JavaScript możesz umieścić gwiazdki oceny na stronach ze szczegółami produktów. Skopiuj przygotowany kod zawierający element DIV w pierwszej linii kodu i przejdź do pliku szablonu na stronach ze szczegółami produktów. Wklej kod w miejscu, w którym mają wyświetlać się gwiazdki oceny produktu. Zalecamy umieszczenie ich pod nazwą produktu.

Gwiazdki oceny produktu są teraz zintegrowane ze stroną szczegółów produktu.

Więcej artykułów na temat opinii o produkcie znajdziesz tutaj:
Jak korzystać z opinii o produktach?
Jak dodać opinie o produkcie do integracji Trustbadge?
Jak wygląda kwestionariusz dotyczący opinii o produktach?


Czy ten artykuł był pomocny?

Liczba użytkowników, którzy uważają ten artykuł za przydatny: 1 z 2