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:
Szafir
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 base_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 |
<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 przejdź do pliku partials / order / lastpagesscripts.html i podmienić jego kod na poniższy:
|
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 )
Topaz
Etap I – skrypt główny
Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ Edytuj HTML.
Krok 2. Przejdź do edycji pliku base_layout.html, a następnie za pomocą narzędzia wyszukiwania proszę znaleźć frazę </body>. Jest to przedostatnia linijka w pliku.
Krok 3. Powyżej znalezionej linijki proszę wkleić 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 |
<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 */ 'responsive': {'variant': 'custom_reviews', 'customElementId': 'mobileCustomTrustbadge'}, '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> #customTrustbadge { position: fixed; bottom: 10px; left: 10px; } #mobileCustomTrustbadge { position: fixed; bottom: 60px; left: 10px; } </style> |
Etap II – wstawienie dodatkowego skryptu w szablonie (obsługa gwarancji, ocen sklepu i produktów)
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 |
<div id="trustedShopsCheckout" style="display: none;"><span id="tsCheckoutOrderNr">{{cart.PlacedOrder.Id}}</span> <span id="tsCheckoutBuyerEmail">{{cart.Customer.Email}}</span> <span id="tsCheckoutOrderAmount">{{cart.OrderTotalValue}}</span> <span id="tsCheckoutOrderCurrency">{{currency}}</span> <span id="tsCheckoutOrderPaymentType">OTHER</span> <span id="tsCheckoutOrderEstDeliveryDate">{{cart.Date}}</span> {% for prod in cart.PlacedOrder.Products-%} <span class="tsCheckoutProductItem"> <span class="tsCheckoutProductUrl">{{config.Url}}{{prod.Url}}</span> <span class="tsCheckoutProductImageUrl">{{config.Url}}{{prod.Image.Id}}/{{prod.Image.Link}}</span> <span class="tsCheckoutProductName">{{prod.NameNoHtml}}</span> <span class="tsCheckoutProductSKU">{{prod.Code}}</span> </span> {% endfor-%}</div> <script> (function(){console.log(trustbadge);try{trustbadge.reInitialize();}catch(err){}})(); </script> |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="trustedShopsRating"></div> <script type="text/javascript" src="//widgets.trustedshops.com/reviews/tsSticker/tsProductStickerSummary.js"></script> <script> var summaryBadge = new productStickerSummary(); summaryBadge.showSummary( { 'tsId': 'XXXXXXXXXXXXX', 'sku': ['{{product.Code}}'], 'element': '#trustedShopsRating', 'starColor' : '#FFDC0F', 'starSize' : '14px', 'fontSize' : '12px', 'showRating' : 'true', 'scrollToReviews' : 'false' , 'enablePlaceholder' : 'false', } ); </script> |
Krok 3. Pozostawiając otwarty ten sam plik, za pomocą narzędzia wyszukiwania proszę znaleźć frazę {% if customer.HidePrices == false and product.Price != null and product.Price != „” -%}. Powyżej wyszukanej linijki proszę wkleić następujący kod, 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 |
<pre class="lang:ruby decode:true"><script type="text/javascript"> _tsProductReviewsConfig = { tsid: 'XXXXXXXXXXXXX', sku: ['{{product.Code}}'], variant: 'productreviews', /* optional */ borderColor: '#0DBEDC', backgroundColor: '#ffffff', locale: 'pl_PL', starColor: '#FFDC0F', commentBorderColor: '#dad9d5', commentHideArrow: 'false', richSnippets: 'on', starSize: '15px', ratingSummary: 'false', maxHeight: '1200px', hideEmptySticker: 'false', filter: 'true', introtext: 'What our customers say about us:' }; 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> </pre> |
Krok 4. Następnie należy zapisać i opublikować szablon ( Zapisz i opublikuj )
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 |
<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 |
<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 )