Wstęp
Trusted Shops to znak jakości z ochroną kupującego, przyznawany sklepom internetowym. Aby rozpocząć jego integrację z Comarch e-Sklep, najpierw musimy zarejestrować się na stronie TrustedShops. Po przejściu procesu rejestracji i otrzymaniu certyfikatu otrzymamy jego identyfikator, który jest potrzebny do połączenia go z naszym e-Sklepem.
Wprowadzenie identyfikatora Trusted Shops
W panelu administracyjnym należy wprowadzić identyfikator od Trusted Shops. Aby to zrobić, proszę przejść w Ustawienia/ Ustawiania sklepu/ Trusted Shops wpisać identyfikator i kliknąć przycisk Przyłącz.
Następnie proszę podążać za poniższymi wskazówkami dotyczącymi właściwego szablonu.
Dodawanie loga Trusted Shops do e-Sklepu
Kolejnym krokiem w integracji platformy Trusted Shops jest dodanie loga platformy. Dokonuje się tego poprzez edycję kodu HTML szablonu naszego sklepu i wgranie odpowiednich poprawek wymaganych przez platformę. Kod ten posiada kilka parametrów konfiguracyjnych, które zostaną opisane w rozdziale poniżej. Natomiast dalsza część instrukcji zostanie poświęcona implementacji loga zależnie od używanego szablonu w Comarch e-Sklep.
Parametry konfiguracyjne
- Fragment kodu ’yOffset’: ’60’, /* offset from page bottom */ określa wysokość, na jakiej ma się znajdować logo Trusted Shops. Często domyślnie jest to wartość 60. Zmiana tej wartości pozwala na dopasowanie elementu do wyglądu posiadanego szablonu.
- Parametr ’variant’ odpowiada za wariant wyświetlania Trustbadge. Pozwala określić, które logo Trusted Shops będzie widoczne w naszym sklepie. Domyślnie wybrany wariant to 'reviews’, natomiast pozostałe warianty to 'default’, 'custom_reviews’ oraz 'custom’. Aby je zmienić, wystarczy wpisać nazwę wybranego wariantu w linijce kodu ’variant’:’reviews’, zastępując domyślnie wybrany wariant reviews.
Wybrane warianty prezentują się następująco:
Agat
Etap I – skrypt główny
Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Więcej 
/ Edytuj ustawienia zaawansowane ponownie Więcej / Edytuj HTML
Krok 2. Przejdź do edycji pliku _layout.html, a następnie za pomocą narzędzia wyszukiwania odnajdź frazę </head>.
Krok 3. Powyżej znalezionego fragmentu wklej poniższy skrypt, w którym wartość XXXXXXXXXXXXX należy zastąpić identyfikatorem od Trusted Shops:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<script type="text/javascript"> (function () { var _tsid = 'XXXXXXXXXXXXX'; _tsConfig = { 'yOffset': '60', /* offset from page bottom */ 'variant': 'reviews', /* reviews, default, custom, custom_reviews */ 'customElementId': '', /* required for variants custom and custom_reviews */ 'trustcardDirection': '', /* for custom variants: topRight, topLeft, bottomRight, bottomLeft */ 'customBadgeWidth': '', /* for custom variants: 40 - 90 (in pixels) */ 'customBadgeHeight': '', /* for custom variants: 40 - 90 (in pixels) */ 'disableResponsive': 'false', /* deactivate responsive behaviour */ 'disableTrustbadge': 'false', /* deactivate trustbadge */ }; var _ts = document.createElement('script'); _ts.type = 'text/javascript'; _ts.charset = 'utf-8'; _ts.async = true; _ts.src = 'https://widgets.trustedshops.com/js/' + _tsid + '.js'; var __ts = document.getElementsByTagName('script')[0]; __ts.parentNode.insertBefore(_ts, __ts); })(); </script> <style> [id^="trustbadge-container"] { z-index: 10 !important; } </style> |
Etap II – wstawienie dodatkowego skryptu w szablonie
Krok 1. Pozostając w powyższym obszarze z plikami szablonu należy przejść do edycji partials/ cart/ lastpagesscripts.html i podmienić kod pliku na poniższy skrypt:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="trustedShopsCheckout" style="display: none;"> <span id="tsCheckoutOrderNr">{{cart.PlacedOrder.Id}}</span> <span id="tsCheckoutBuyerEmail">{{cart.Customer.Email}}</span> <span id="tsCheckoutBuyerId">-</span> <span id="tsCheckoutOrderAmount">{{cart.OrderTotalValue}}</span> <span id="tsCheckoutOrderCurrency">{{currency}}</span> <span id="tsCheckoutOrderPaymentType">OTHER</span> </div> <script> (function(){try{trustbadge.reInitialize();}catch(err){}})(); </script> |
Krok 2. Następnie należy zapisać i opublikować szablon ( Zapisz i opublikuj )
Opal i Bursztyn
Etap I – skrypt główny
Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Więcej / Edytuj ustawienia zaawansowane ponownie Więcej / Edytuj HTML
Krok 2. Przejdź do edycji pliku _layout.html, a następnie za pomocą narzędzia wyszukiwania odnajdź frazę </head>.
Krok 3. Powyżej znalezionego fragmentu wklej poniższy skrypt, w którym wartość XXXXXXXXXXXXX należy zastąpić identyfikatorem od Trusted Shops:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<script type="text/javascript"> (function () { var _tsid = 'XXXXXXXXXXXXX'; _tsConfig = { 'yOffset': '60', /* offset from page bottom */ 'variant': 'reviews', /* reviews, default, custom, custom_reviews */ 'customElementId': '', /* required for variants custom and custom_reviews */ 'trustcardDirection': '', /* for custom variants: topRight, topLeft, bottomRight, bottomLeft */ 'customBadgeWidth': '', /* for custom variants: 40 - 90 (in pixels) */ 'customBadgeHeight': '', /* for custom variants: 40 - 90 (in pixels) */ 'disableResponsive': 'false', /* deactivate responsive behaviour */ 'disableTrustbadge': 'false', /* deactivate trustbadge */ }; var _ts = document.createElement('script'); _ts.type = 'text/javascript'; _ts.charset = 'utf-8'; _ts.async = true; _ts.src = 'https://widgets.trustedshops.com/js/' + _tsid + '.js'; var __ts = document.getElementsByTagName('script')[0]; __ts.parentNode.insertBefore(_ts, __ts); })(); </script> <style> [id^="trustbadge-container"] { z-index: 49 !important; } </style> |
Etap II – wstawienie dodatkowego skryptu w szablonie
Krok 1. Pozostając w powyższym obszarze z plikami szablonu należy przejść do edycji partials/ cart/ lastpagesscripts.html i podmienić kod pliku na poniższy skrypt:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="trustedShopsCheckout" style="display: none;"> <span id="tsCheckoutOrderNr">{{cart.PlacedOrder.Id}}</span> <span id="tsCheckoutBuyerEmail">{{cart.Customer.Email}}</span> <span id="tsCheckoutBuyerId">-</span> <span id="tsCheckoutOrderAmount">{{cart.OrderTotalValue}}</span> <span id="tsCheckoutOrderCurrency">{{currency}}</span> <span id="tsCheckoutOrderPaymentType">OTHER</span> </div> <script> (function(){try{trustbadge.reInitialize();}catch(err){}})(); </script> |
Krok 2. Następnie należy zapisać i opublikować szablon ( Zapisz i opublikuj )