Dostosowanie wyglądu e-Sklepu

Na stronie głównej sklepu wyświetlane są produkty prezentowane jako promocje w Twoim sklepie. Produkty które wyświetlają się w tym obszarze oznacza się odpowiednim parametrem na kartach towarowych w systemie ERP. Więcej na temat dodawania atrybutów czasowych do produktów można przeczytać w poniższych artykułach:   Jednak rodzaj wyświetlanych produktów możesz zmodyfikować dopasowując je do własnych upodobań. Dzięki temu na stronie głównej można zaprezentować nie tylko promocje, ale np. nowości, rekomendacje sprzedawcy, produkt z gazetki czy też wyprzedaż. Zmianę rodzaju wyświetlanych produktów wykonuje się w Panelu administracyjnym. W tym celu należy edytować obiekt, który domyślnie wyświetla nowości zdefiniowane w systemie ERP. Zaloguj się do Panelu administracyjnego i przejdź do obszaru Wygląd sklepu/ Ustawienia. Następnie użyj przycisku ‘Więcej’ i Edytuj Ustawienia zaawansowane. Przejdź do zakładki 'Obiekty' i edytuj obiekt 'productnew'. W edycji obiektu 'productnew' możesz zmienić typ wyświetlanych produktów wybierając je z listy rozwijanej. Po zmianie zapisz swój wybór i opublikuj szablon, aby nowe produkty pojawiły się na stronie.

Darmowe szablony Comarch od wersji 2018.1 posiadają wbudowaną integrację z zaawansowanym systemem do zarządzania relacjami z klientami edrone. Jeżeli korzystasz z innych szablonów, to ten artykuł może być dla Ciebie pomocny. Poniżej znajduje się lista kroków, które należy wykonać w celu integracji z edrone.

1. Ustawiamy swój App ID z edrone w panelu administracyjnym (Ustawienia/Ustawienia Sklepu/Ogólne/Integracja z edrone)
2. W głównym folderze szablonu tworzymy folder edrone, w którym umieszczamy pliki, których zawartość znajduje się w kolejnych punktach
3. W pliku html, na końcu sekcji head includujemy plik edrone/head.html (dodajemy {% include ‘edrone/head.html’ -%} ) {% if config.External.Edrone.AppId != '' -%} <script type="text/javascript"> (function (srcjs) { window._edrone = window._edrone || {}; _edrone.app_id = '{{ config.External.Edrone.AppId }}'; _edrone.version = '1.0.0'; _edrone.platform_version = '{{ config.Version }}'; _edrone.platform = 'comarch'; _edrone.shop_lang = '{{ page.Language }}';{% if page.PageId != config.DefinedPages.Order.Id -%} _edrone.action_type = 'other'; {% if usr.Authenticated -%} {% if customer.Address.Name != '' -%} {% assign FullName = customer.Address.Name -%} {% if FullName contains ' ' -%} {% assign HalfName = FullName | Split:' ' -%} {% endif %} _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}'; {% if HalfName[1] -%} _edrone.last_name = '{{ HalfName[1] }}'; {% endif %} {% endif -%} {% if customer.Address.Country != '' -%} _edrone.country = '{{ customer.Address.Country }}'; {% endif -%} {% if customer.Address.City != '' -%} _edrone.city = '{{ customer.Address.City }}'; {% endif -%} {% if customer.Address.Phone != '' -%} _edrone.phone = '{{ customer.Address.PhoneNo }}'; {% endif -%} _edrone.email = '{{ customer.Email }}'; {% endif -%} {% endif -%} var doc = document.createElement('script'); doc.type = 'text/javascript'; doc.async = true; doc.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + srcjs; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(doc, s); })("//d3bo67muzbfgtl.cloudfront.net/edrone_2_0.js"); </script> {% endif -%}
4. W pliku html, na końcu sekcji body includujemy pliki edrone/product-presentation.html oraz edrone/subscribe.html
   • product-presentation.html
   {% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%} <script type="text/javascript"> {% if productdetails -%} {% assign product-presentation = productdetails -%} {% elseif product-details -%} {% assign product-presentation = product-details -%} {% endif -%} window._edrone = window._edrone || {}; _edrone.action_type = 'product_view'; _edrone.product_ids = '{{ product-presentation.Product.Id }}'; _edrone.product_titles = '{{ product-presentation.Product.Name }}'; {% if product-presentation.Product.ImageId > 0 -%} _edrone.product_images = 'http:{{ page.BaseHref }}img/large/{{ product-presentation.Product.ImageId }}/{% if product-presentation.Product.Images[0].Name != "" -%}{{ product-presentation.Product.Images[0].Name }}{% else %}.jpg{% endif %}'; {% endif -%} {% if product-presentation.Product.Code != '' -%} _edrone.product_skus = '{{ product-presentation.Product.Code }}'; {% endif -%} _edrone.product_urls = '{{ page.CanonicalLink }}'; _edrone.product_category_ids = '{{ page.GroupId }}'; _edrone.product_category_names = '{{ page.CurrentSiteNode.Name }}'; </script> {% endif %}
   Wskazówka

   Jeżeli w swoim szablonie obiekt ze szczegółami produktu ma inną nazwę, to należy zmodyfikować warunek.
   • subscribe.html
   {% if config.External.Edrone.AppId != '' -%} {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.CustomerProfile.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Newsletter/Subscribe' || d.action.Action == 'newsletter/subscribe') && d.action.Result){ var queryString = c.data.split('&'); for(i=0; i<queryString.length; i++){ if(queryString[i].indexOf('email') != -1){ var email = queryString[i].split('=')[1].replace('%40','@'); } } _edrone.customer_tags = 'From Newsletter Subscribe'; _edrone.email = email; _edrone.subscriber_status = '1'; _edrone.action_type = 'subscribe'; _edrone.init(); } }); </script> {% endif %} {% if page.PageId == config.DefinedPages.CustomerProfile.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Newsletter/Unsubscribe' || d.action.Action == 'newsletter/unsubscribe') && d.action.Result){ var queryString = c.data.split('&'); for(i=0; i<queryString.length; i++){ if(queryString[i].indexOf('email') != -1){ var email = queryString[i].split('=')[1].replace('%40','@'); } } _edrone.customer_tags = 'From Newsletter Subscribe'; _edrone.email = email; _edrone.subscriber_status = '0'; _edrone.action_type = 'subscribe'; _edrone.init(); } }); </script> {% endif %} {% endif %}
   Wskazówka

   Jeżeli w swoim szablonie umożliwiasz zapis do newslettera z innych stron niż strona główna i profil klienta oraz pozwalasz na wypisanie poza profilem klienta, to należy zmodyfikować powyższy plik.
   Uwaga

   W wersji 2018.7 z domyślnych szablonów Comarch usunięto akcję dotyczącą zapisu i wypisu z newslettera, ponieważ dane przekazywane są przez Comarch e-Sklep w tle.
5. W szablonach Agat, Bursztyn i Opal, w tym samym miejscu includujemy również plik edrone/add-to-cart.html {% if page.PageId == config.DefinedPages.ProductDetails.Id and config.External.Edrone.AppId != '' -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){ _edrone.action_type = 'add_to_cart'; _edrone.init(); } }); </script> {% endif %}
   Wskazówka

   Plik należy dodać do wszystkich szablonów, które nie są oparte o najnowszą wersję szablonu Szafir (w tym szablonie dodawanie do koszyka w edrone obsłużone jest bezpośrednio w funkcjach szablonu – spowodowane jest to możliwością dodawania kilku towarów jednocześnie czego inne szablony nie posiadają).
6. W szablonie Bursztyn, w tym samym miejscu includujemy również plik edrone/add-to-cart-with-data.html {% if config.External.Edrone.AppId != '' -%} {% if page.PageId == config.DefinedPages.Home.Id or page.PageId == config.DefinedPages.ProductList.Id -%} <script type="text/javascript"> $(document).ajaxSuccess(function(a,b,c,d) { if(d && d.action && (d.action.Action == 'Cart/Add' || d.action.Action == 'cart/add') && d.action.Result ){ window._edrone = window._edrone || {};var products = d.collection["customer.Cart"].Products; var size = products.length; var product = products[size-1]; _edrone.product_ids = product.Id; _edrone.product_titles = product.NameNoHtml; if(product.ImageId > 0){ _edrone.product_images = 'http:{{ page.BaseHref }}img/large/'+product.ImageId+'/.jpg'; } if(product.Code != ''){ _edrone.product_skus = product.Code; } _edrone.product_urls = 'http:{{ page.BaseHref }}'+product.Url; _edrone.product_category_ids = product.DefaultGroup; _edrone.action_type = 'add_to_cart'; _edrone.init(); } }); </script> {% endif %} {% endif %}
   Wskazówka

   Kod działa dla dodawania do koszyka ze strony głównej i listy towarów. Jeżeli pozwalasz na dodawanie do koszyka z innych stron, należy go zmodyfikować.
7. W pliku z podziękowaniami za zakup (Agat – partials/cart/summary.html, Bursztyn i Opal – order/thank-you.html, Szafir – order/thx.html), na końcu pliku (tuż pod includem rich-snippetów), includujemy plik edrone/order.html {% if config.External.Edrone.AppId != '' -%} <script type="text/javascript"> _edrone.action_type = 'order';{% if cart -%} {% assign order = cart -%} {% endif -%} {% assign FullName = order.Customer.DeliveryAddress.Name -%} {% if FullName contains ' ' -%} {% assign HalfName = FullName | Split:' ' -%} {% endif %} _edrone.first_name = '{% if HalfName[0] -%}{{ HalfName[0] }}{% else %}{{ FullName }}{% endif %}'; {% if HalfName[1] -%} _edrone.last_name = '{{ HalfName[1] }}'; {% endif %} _edrone.country = '{{ order.Customer.DeliveryAddress.Country }}'; {% if order.Customer.DeliveryAddress.City != '' -%} _edrone.city = '{{ order.Customer.DeliveryAddress.City }}'; {% endif %} {% if order.Customer.DeliveryAddress.PhoneNo != '' -%} _edrone.phone = '{{ order.Customer.DeliveryAddress.PhoneNo }}'; {% endif %} _edrone.email = '{{ order.Customer.Email }}'; {% assign size = order.PlacedOrder.Products | Size -%} var ids = ''; var titles = ''; var images = ''; var skus = ''; var urls = ''; var categoryIds = ''; var counts = ''; {% for product in order.PlacedOrder.Products -%} ids += '{{ product.Id }}{% if forloop.index != size -%}|{% endif -%}'; titles += '{{ product.NameNoHtml }}{% if forloop.index != size -%}|{% endif -%}'; images += '{% if product.ImageId > 0 -%}http:{{ page.BaseHref }}img/large/{{ product.ImageId }}/.jpg{% endif -%}{% if forloop.index != size -%}|{% endif -%}'; skus += '{{ product.Code }}{% if forloop.index != size -%}|{% endif -%}'; urls += 'http:{{ page.BaseHref }}{{ product.Url }}{% if forloop.index != size -%}|{% endif -%}'; categoryIds += '{{ product.DefaultGroup }}{% if forloop.index != size -%}|{% endif -%}'; counts += '{{ product.Quantity | Normalize }}{% if forloop.index != size -%}|{% endif -%}'; {% endfor -%} _edrone.product_ids = ids; _edrone.product_titles = titles; _edrone.product_images = images; _edrone.product_skus = skus; _edrone.product_urls = urls; _edrone.product_category_ids = categoryIds; _edrone.product_counts = counts; _edrone.order_id = '{{ order.PlacedOrder.Id }}'; _edrone.base_currency = '{{ order.Currency }}'; _edrone.order_currency = '{{ order.Currency }}'; _edrone.base_payment_value = '{{ order.OrderTotalValue | ToString | Replace:",","." }}'; _edrone.order_payment_value = '{{ order.OrderTotalValue | ToString | Replace:",","." }}'; _edrone.init(); </script> {% endif -%}  
   Wskazówka

   Jeżeli w swoim szablonie używasz dla koszyka innej nazwy obiektu niż cart lub order, to powyższy kod należy zmodyfikować.

  Edrone i dodawanie towarów w szablonie Szafir:

1. Plik js/init-ui1.js

• Funkcja serialAddingToCart

Na samym początku funkcji znajduje się pętla “each”, a w niej instrukcja warunkowa „if (quantity > 0)”. Na końcu tej instrukcji warunkowej wklejamy poniższy kod: if(typeof _edrone !== 'undefined') { var product = form.parents('.product-item-lq'); var base = $('[data-base]').data('base'); if (first) { _edrone.product_ids = productId; _edrone.product_titles = product.find('.product-name-lq').text(); _edrone.product_images = base + product.find('img').data('src'); _edrone.product_skus = product.find('.product-code-lq').text(); _edrone.product_urls = base + product.find('a').attr('href'); _edrone.product_category_ids = $('[data-group-id]').data('group-id'); _edrone.product_category_names = $('[data-group-name]').data('group-name'); first = false; } else { _edrone.product_ids += '|' + productId; _edrone.product_titles += '|' + product.find('.product-name-lq').text(); _edrone.product_images += '|' + base + product.find('img').data('src'); _edrone.product_skus += '|' + product.find('.product-code-lq').text(); _edrone.product_urls += '|' + base + product.find('a').attr('href'); _edrone.product_category_ids += '|' + $('[data-group-id]').data('group-id'); _edrone.product_category_names += '|' + $('[data-group-name]').data('group-name'); } } Kilkanaście linijek niżej (w tej samej funkcji) jest instrukcja warunkowa “if (resGuardian)”. Na początku tej instrukcji warunkowej wklejamy poniższy kod: if(typeof _edrone !== 'undefined') { _edrone.action_type = 'add_to_cart'; _edrone.init(); }

• Funkcja addManyProducts

Na samym początku funkcji znajduje się pętla “for(var i=0; i<products.length; i++)” iterująca po produktach. Tuż przed nią należy dodać poniższą linijkę: var first = true; Następnie, w tej pętli znajduje się instrukcja warunkowa „if(products[i].askForPriceChild == false && products[i].quantity > 0)”. Na samym jej końcu należy dodać poniższy kod: if(parameters && !validationError && products[i].supply != undefined && typeof _edrone !== 'undefined'){ if(first){ _edrone.product_ids = products[i].supply; _edrone.product_images = products[i].img; _edrone.product_skus = products[i].code; var name = _edrone.product_titles; var url = _edrone.product_urls; var categoryId = _edrone.product_category_ids; var categoryName = _edrone.product_category_names; first = false; } else { _edrone.product_ids += '|' + products[i].supply; _edrone.product_images += '|' + products[i].img; _edrone.product_skus += '|' + products[i].code; _edrone.product_titles += '|' + name; _edrone.product_urls += '|' + url; _edrone.product_category_ids += '|' + categoryId; _edrone.product_category_names += '|' + categoryName; } } Kilkanaście linijek niżej (w tej samej funkcji) jest “$.post”. Na samym jego początku należy dodać poniższy kod: if(typeof _edrone !== 'undefined') { _edrone.action_type = 'add_to_cart'; _edrone.init(); }

• Dodanie funkcji simpleAddToCartSuccess

Na końcu pliku js/init-ui1.js należy dodać poniższy kod: function simpleAddToCartSuccess(e){ updateClientArea(); if(typeof _edrone !== 'undefined') { if ($('.add-from-presentation-lq').index() == -1) { var product = $(e.currentTarget).parents('.product-item-lq'); var base = product.parents('[data-base]').data('base'); _edrone.product_ids = product.data('product-id'); _edrone.product_titles = product.find('.product-name-lq').text(); _edrone.product_images = base + product.find('img').attr('src'); _edrone.product_skus = product.find('.product-code-lq').text(); _edrone.product_urls = base + product.find('a').attr('href'); _edrone.product_category_ids = product.parents('[data-group-id]').data('group-id'); _edrone.product_category_names = product.parents('[data-group-name]').data('group-name'); } _edrone.action_type = 'add_to_cart'; _edrone.init(); } } Następnie należy zmodyfikować “event”, który jest wywoływany przy kliknięciu w element z klasą “add-to-cart-update-client-area-lq”. Zmieniamy zawartość tego eventa na: app.post(e, simpleAddToCartSuccess, e); Cały event powinien wyglądać następująco: $('body').on('click', '.add-to-cart-update-client-area-lq', function(e) { app.post(e, simpleAddToCartSuccess, e); });

2. Plik js/init-ui2.js

• Funkcja serialAddingFromWishlist

Na samym początku funkcji znajduje się pętla “each”. Tuż przed nią należy dodać poniższą linijkę: var first = true; Następnie, w tej pętli znajduje się instrukcja warunkowa „if (quantity > 0)”. Na samym jej końcu należy dodać poniższy kod: if(typeof _edrone !== 'undefined') { if (first) { _edrone.product_ids = productId; _edrone.product_titles = productContainer.find('.product-name-lq').text(); _edrone.product_images = base + productContainer.find('img').attr('src'); _edrone.product_skus = productContainer.find('.product-code-lq').text(); _edrone.product_urls = base + productContainer.find('a').attr('href'); _edrone.product_category_ids = categoryId; first = false; } else { _edrone.product_ids += '|' + productId; _edrone.product_titles += '|' + productContainer.find('.product-name-lq').text(); _edrone.product_images += '|' + base + productContainer.find('img').attr('src'); _edrone.product_skus += '|' + productContainer.find('.product-code-lq').text(); _edrone.product_urls += '|' + base + productContainer.find('a').attr('href'); _edrone.product_category_ids += '|' + categoryId; } } Kilkanaście linijek niżej (w tej samej funkcji) jest instrukcja warunkowa “if (resGuardian)”. Na początku tej instrukcji warunkowej wklejamy poniższy kod: if(typeof _edrone !== 'undefined') { _edrone.action_type = 'add_to_cart'; _edrone.init(); }  

Powiększanie zdjęć w szczegółach towaru w szablonie Topaz

W tym artykule dowiesz się jak dodać możliwość wyświetlania drugiego zdjęcia na liście towarów.

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Uwaga

Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order

Na początku w pliku elements\product-details-1.html lub elements\product-details-2.html (w zależności od typu wyglądu), za pomocą narzędzia wyszukiwania, znajdź linijkę: <img alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{image.Id}}/{{image.Link}}.jpg"> W miejsce tej linijki wklej następujacy kod: <img class="open-gallery" alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg"> Następnie w tym samym pliku, za pomocą narzędzia wyszukiwania, znajdź linijkę: <img alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg"> W jej miejsce wklej następujący kod: <img class="open-gallery" alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg">   Kolejnym krokiem jest przejście do pliku js\layout1.js. W pliku tym, za pomocą narzędzia wyszukiwania, znajdujemy frazę var productDetailsFunctions = {, a następnie bezpośrednio pod nią wklejamy następujący kod: openGallery: function (e) { var t = $(".product-details__image").slick("slickCurrentSlide"); var i = $(e.currentTarget).parents(".product-details__images"); i.addClass("opened-gallery"); i.append('<svg class="svgIcon close-gallery-button"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>'); $("body").addClass("modal-opened"); $(".open-gallery:not(.opened-gallery-switch)").addClass("opened-gallery-switch"); $(".product-details__image-list").addClass("slider-hidden"); $(".product-details__image").addClass("opened-gallery"); $(".product-details__image").slick("unslick"); this.setGallerySlider(t); $(".draggable").css("top", "25%"); }, closeGallery: function (e) { $(".product-details__images").removeClass("opened-gallery"); $(".product-details__image").removeClass("opened-gallery"); $(".open-gallery.opened-gallery-switch").removeClass("opened-gallery-switch"); $(e.currentTarget).remove(); $(".product-details__image-list").removeClass("slider-hidden"); $("body").removeClass("modal-opened"); $(".product-details__image").slick("unslick"); $(".draggable").css("top", "0"); this.setSlider(); }, setGallerySlider: function (t) { $(".product-details__image").slick ({ infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: false, nextArrow: '<button type="button" aria-label="nextArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowRight"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>', prevArrow: '<button type="button" aria-label="prevArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowLeft"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>', accessibility: false, dots: false, }); $(".product-details__image").slick("slickGoTo", t, true); }, W tym samym pliku za pomocą narzędzia wyszukiwania znajdź frazę var body = $('body'); a bezpośrednio pod nią wklej następujacy kod: body.on("click", ".open-gallery:not(.opened-gallery-switch)", function(e) { productDetailsFunctions.openGallery(e); }), $("body").on("click", ".close-gallery-button", function(e) { productDetailsFunctions.closeGallery(e); }),   Przejdź do pliku css\elements\product-deatils-1-g.css lub css\elements\product-deatils-2-g.css (w zależności od typu wyglądu). Na koncu pliku wklej następujący kod: .close-gallery-button { position: fixed; right: 0; top: 0; background: transparent; color: #656565; z-index: 20; border: 0; font-size: 20px; width: 50px; height: 50px; cursor: pointer; } .slider-hidden { display: none; } .opened-gallery { position: fixed; display: flex; z-index: 20; top: 0; right: 0; bottom: 0; left: 0; background: #ffffff; width: 100%; .slick-next:last-child { right: 20px; } .slick-next:first-child { left: 20px; } .slick-next { height: 35px; width: 35px; } img { max-height: none; } } Ostatnim krokiem jest przeście do pliku css\base_layout-g.css. Znajdź  frazę body { i bezpośrednio pod wyszukaną linijką wklej następujacy kod: &.modal-opened { overflow: hidden; }                          

 

Ustawienia ogólne

Niezbędne ustawienia do włączenia widoku własnych punktów odbioru na mapie: 1. Dodanie w panelu sklepu klucza aplikacji do Google Maps API (Wygląd Sklepu > Ustawienia) 2. Zaznaczenie opcji wyświetlania punktów odbioru osobistego na mapie (Wygląd Sklepu > Ustawienia) 3. Dodanie własnych punktów odbioru (Ustawienia > Płatności i dostawy > Odbiór osobisty)

Wskazówka

Wypełniając formularz nowego punktu, trzeba pamiętać o polach „Szerokość/długość geograficzna”

4. Włączyć opcję odbioru osobistego w panelu (Ustawienia > Płatności i dostawy > Odbiór osobisty) 5. Dodać dostawę za pomocą własnych punktów odbioru do sposobów dostawy 6. Dodać dostawę do macierzy dostaw oraz określić metody płatności za ten rodzaj dostawy 7. Dokonać niezbędnych modyfikacji w kodzie szablonu wg poniższych instrukcji.  

Szablon Szafir

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

1. Umieść pliki „collection-points-scripts.html” i „collection-points-styles.html” w głównym folderze szablonu.
2. Umieść plik „collection-points.js” w folderze „js”.
3. Umieść plik “collection-points.css” w folderze “css”.
4. Podmień plik “collection-points.html”, który znajduje się w folderze „order/delivery-partials”.
5. W pliku „__layout.html”, na końcu sekcji „<head>” dodaj poniższą linijkę:

   {% include 'collection-points-styles.html' %}

6. W pliku „__layout.html”, na końcu sekcji „<body>” dodaj poniższą linijkę:

   {% include 'collection-points-scripts.html' %}

 

Szablon Agat

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

1. Umieść plik “collection-points.css” w folderze “css”.
2. Umieść plik “collection-points.js” w folderze “js”.
3. Podmień plik “order.js”, który znajduje się w folderze “js”.
4. Podmień plik “delivery-adress.html”, który znajduje się w folderze “partials/cart”.
5. Podmień plik “init.js”, który znajduje się w folderze “js”.
6. W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:

   {% if page.PageId == config.DefinedPages.Order.Id -%} 
      <link rel="stylesheet" type="text/css" href="css/collection-points.css"> 
   {% endif -%}

    

Szablon Opal

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

1. Umieść plik “collection-points.js” w folderze “js”.
2. Umieść plik “collection-points.css” w folderze “css”.
3. Podmień plik “order.js”, który znajduje się w folderze “js”.
4. Podmień plik “data-form.html”, który znajduje się w folderze “order/cst-data”.
5. Podmień plik “cart.html”, który znajduje się w folderze “order”.
6. W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:

   {% if page.PageId == config.DefinedPages.Order.Id -%} 
      <link rel="stylesheet" type="text/css" href="css/collection-points.css"> 
   {% endif -%}

7. Do pliku “order-cart.html”, wklej poniższy kod:

   {% extends '_layout.html' -%}
   
   {% block PageContent -%}
       <script src="{{ cart.CollectionPointMapUrl }}"></script>
       <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script>
       <script src="js/collection-points.js?v={{ lqTS }}"></script>
       {% include 'order-cart-container.html'%}
   {% endblock -%}
   
   {% block PageBodyEnd -%}
       <script>__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script>
       <script src="js/order.js?v={{ lqTS }}" charset="utf-8" type="text/javascript"></script>
   {% endblock -%}

Szablon Bursztyn

Wskazówka

Pliki niezbędne do prezentacji własnych punktów odbioru osobistego w formie mapy: Pobierz pliki

1. Umieść plik “collectionpoints.js” w folderze “js”.
2. Umieść plik “collectionpoints.css” w folderze “css”.
3. Podmień plik “order.js”, który znajduje się w folderze “js”.
4. Podmień plik “cart.html”, który znajduje się w folderze “order”.
5. Podmień plik “order-short-info.html”, który znajduje się w folderze “order”.
6. Podmień plik “cart-products-partial.html”, który znajduje się w folderze “order”.
7. W pliku “_layout.html”, na końcu sekcji “<head>” dodaj poniży kod:

   {% if page.PageId == config.DefinedPages.Order.Id -%}
       <link rel="stylesheet" type="text/css" href="css/collectionpoints.css">
   {% endif -%}
   

8. Do pliku “order-cart.html”, wklej poniższy kod:

   {% extends '_layout.html' -%}
   
   {% block PageContent -%}
       <script src="{{ cart.CollectionPointMapUrl }}"></script>
       <script>var _CollectionPointMapUrl = '{{ cart.CollectionPointMapUrl }}';</script>
       <script src="js/collectionpoints.js?v={{ lqTS }}"></script>
       {% include 'order-cart-container.html'%}
   {% endblock -%}
   
   {% block PageBodyEnd %}
       <script type="text/javascript">__ResxCartEmpty = '{{ translations.Crt_CartIsEmpty | H }}';</script>
       <script src="js/order.js?v={{ lqTS }}"></script>
   {% endblock %}

    

Comarch e-Sklep daje możliwość dostosowania wyglądu do preferencji sprzedawcy oraz potrzeb Klientów. Jeśli utworzyłeś już swój autorski projekt, to masz możliwość jego zapisania. Plik będzie potrzebny przy chęci modyfikacji wyglądu. Zapisana wersja szablonu może również stanowić kopię bezpieczeństwa. Warto jest więc wyeksportować szablon do pliku.

Jak wyeksportować swój szablon z Comarch e-Sklep?

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Eksport szablonu.

Krok 2. W tym miejscu możesz opcjonalnie (przed eksportem) określić autora szablonu, podać adres e-mail, telefon oraz adres WWW swojego e-Sklepu.

Krok 3. Jeżeli chcesz wyeksportować szablon do pliku użyj przycisku Eksportuj szablon.

Gotowe! Szablon został wyeksportowany do pliku na Twoim urządzeniu.

Wskazówka

Z tego miejsca możesz także wyeksportować posiadane w e-Sklepie bannery, korzystając z przycisku Eksportuj bannery.

Jak wgrać własny szablon do Comarch e-Sklep?

Własny szablon. Jak go wgrać?

Po skomponowaniu swojego własnego szablonu możesz wgrać go do e-Sklepu. Postępuj zgodnie z poniższymi krokami.

Krok 1. W panelu administracyjnym przejdź do sekcji Wygląd Sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane/ zakładka Import szablonu.

Krok 2. Określ, czy wgrywany szablon ma podmienić istniejące bannery. Gdy parametr zostanie zaznaczony, wówczas wszystkie bannery zapisane na danym slocie zostaną usunięte i zastąpione bannerami z importowanego szablonu.

Krok 3. Wybierz plik XML swojego szablonu i naciśnij Importuj szablon.

Uwaga

Import szablonu jest operacją nieodwracalną i spowoduje nadpisanie dotychczasowego szablonu. W przypadku, gdy szablon był modyfikowany (dokonywano zmian w kodzie HTML) jego aktualizacja spowoduje, iż zmiany nie zostaną przeniesione. Warto wykonać eksport posiadanego szablonu do pliku w celu zapisania oraz posiadania wglądu to wprowadzanych modyfikacji. Jeżeli istnieje taka konieczność należy ponownie dokonać samodzielnej edycji szablonu

Wskazówka

W zakładce Szablony możesz określić, czy wgrywany szablon ma być domyślny i aktywny w e-Sklepie.

Krok 4. Teraz możesz podejrzeć zmiany, jakie zaszły w wyglądzie Twojego e-Sklepu. W tym celu możesz podejrzeć zmiany w czasie rzeczywistym lub przejść w tryb incognito. Pamiętaj, że wszelkie zmiany zostaną opublikowane po pełnej synchronizacji, która wciągu 10 minut zgodnie z wyświetlanym komunikatem.

Gotowe! Twój szablon został zaimportowany do e-Sklepu.

W e-Sklepie istnieje możliwość modyfikacji kolorów w każdym szablonie. Możesz wybrać Gotowe Szablony Comarch lub stworzyć swój własny w Kreatorze wyglądu, a następnie edytować niektóre ustawienia. Aby zmienić kolorystykę należy przejść do sekcji Wygląd Sklepu/Ustawienia, po czym wybrać zakładkę Ustawienia szablonu. Szablony Bursztyn i Opal posiadają trzy predefiniowane schematy kolorów: Szablon Agat, podobnie jak wyżej wymienione, posiada również trzy schematy kolorów: Szablon Szafir posiada następujące schematy kolorów: Z poziomu Panelu Administracyjnego możesz również modyfikować szablon Topaz. Podobnie jak podczas projektowania w Kreatorze Wyglądu możesz wybrać jeden z pięciu motywów kolorystycznych: Każdy motyw można dodatkowo samodzielnie skonfigurować, na przykład zmienić kolory poszczególnych elementów szablonu. Po dokonaniu wszelkich modyfikacji pamiętaj o ich zapisaniu oraz opublikowaniu. W tym celu naciśnij symbol dyskietki znajdujący się w prawym górnym rogu, a następnie wybierz więcej i wybierz Publikuj.

Uwaga

Pamiętaj o ustawieniu szablonu jako Domyślny i Aktywny!

 

Wstęp

W Comarch e-Sklep użytkownik ma możliwość tworzenia własnych stron oraz treści. Te drugie stanowią m.in. wiadomości E-mail i SMS, zgody formalne, czy dodatkowe treści użytkownika, np. regulamin sklepu. W panelu administracyjnym znajdują się standardowe treści oraz strony, które są odpowiednio ze sobą zmapowane  w określony sposób, w wybranych miejscach wyświetlane.

Dodawanie nowej treści

Tworzenie treści

Aby utworzyć w e-Sklepie nową treść należy w panelu administracyjnym przejść do sekcji: Ustawienia/Treści/zakładka Regulamin i Inne, po czym dodać nową treść użytkownika. Po wybraniu przycisku Dodaj należy uzupełnić nazwę oraz identyfikator. Po uzupełnieniu danych wyświetli się strona, na której możliwe jest udostępnienie treści. Możliwe jest także wgranie treści z pdf, a także dodanie załączników, które mogą być później np.

Wybierając przycisk Więcej (trzy kropki w prawym, górnym rogu) możemy podejrzeć identyfikator strony, a także dodać załączniki do wiadomości e-mail. Po wybraniu drugiej opcji wyświetli się lista, z której można wybrać odpowiednie treści.

Wskazówka

Wartość identyfikatora będzie potrzebna podczas dalszej konfiguracji.

Po dokonaniu modyfikacji wybierz Zapisz i publikuj, aby treść była widoczna na stronie. Możesz również wybrać opcję zapisz bez publikacji.

Dodawanie nowej strony

Dodanie strony

Nową stronę tworzymy w panelu administracyjnym w obszarze: Wygląd sklepu/Strony. W sekcji Użytkownika skorzystaj z przycisku Dodaj. Wypełnij pola z nazwą, linkiem i tytułem strony i zatwierdź przyciskiem Dodaj. Nowa strona zostaje dodana jako nieaktywna. W celu jej aktywowania wystarczy kliknąć na jej kafelek i zmienić przełącznik opcji Aktywna na TAK  W celu publikacji strony użyj przycisku Więcej/Publikuj. Po dodaniu nowej strony należy zapamiętać jej numer, który znajduje się na końcu adresu URL.

Wskazówka

Numer strony widnieje w nawiasie przy jej nazwie. Możesz to sprawdzić przechodząc kolejno do sekcji: Wygląd sklepu/Ustawienia/Edytuj ustawienia zaawansowane/Strony.

Przypisanie obiektu do strony

Przejdź do obszaru Wygląd sklepu/Ustawienia, następnie użyj przycisku Więcej i wybierz Edytuj ustawienia zaawansowane. Przejdź na zakładkę "Strony". Dla nowo dodanej strony w kolumnie Plik należy wpisać nazwę pliku user-page.html. Wprowadzone zmiany zachowaj za pomocą przycisku Zapisz.

Umieszczenie strony w stopce e-sklepu

W zakładce Wygląd sklepu/Ustawienia/Nagłówek/Stopka należy wybrać odpowiednią sekcję i dodać nową stronę.

Obszar do zarządzania stronami znajdujący się w Panelu administracyjnym w obszarze Wygląd sklepu/Strony, zawiera listę wszystkich stron obsługiwanych przez e-Sklep zaprezentowaną w formie kafelków, podzielonych na dwie kategorie, strony standardowe oraz użytkownika. Z poziomu listy stron możesz edytować jedną z nich poprzez kliknięcie w kafelek lub dodać nową stronę w obszarze stron użytkownika za pomocą kafelka z plusem. Po przejściu do edycji strony masz możliwość usunięcia strony oraz zmiany ustawień takich jak:

Uwaga

Możliwość usuwania stron dostępna jest jedynie dla stron użytkownika w menu więcej po przejściu w edycję wybranej strony

Wskazówka

Dezaktywować możesz wszystkie strony użytkownika oraz następujące strony standardowe:

• Porównywarka towarów
• Wyszukiwanie zaawansowane
• Kontakt
• Regulamin sklepu
• Polityka prywatności
• Prawo do odstąpienia od umowy
• Informacje o sklepie
• Wysyłka
• Płatność
• Reklamacje i zwroty
• Program lojalnościowy
• Blog
• Blog szczegóły wpisu
• HTTP 404

Więcej o stronach przeczytasz w artykule Dodawanie nowej strony do szablonu (z zachowaniem styli).

W szablonach Comarch e-Sklep wyświetlane są produkty prezentowane jako polecane w Twoim sklepie. Produkty które wyświetlają się w tym obszarze oznacza się odpowiednim parametrem na kartach towarowych w systemie ERP. Więcej na temat dodawania atrybutów czasowych do produktów można przeczytać w poniższych artykułach: Domyślnie w sekcji polecane wyświetlają się towary oznaczone w ERP atrybutem 'rekomendacja sprzedawcy' Jednak rodzaj wyświetlanych produktów możesz zmodyfikować dopasowując je do własnych upodobań. Dzięki temu na stronie głównej można zaprezentować nie tylko towary polecane, ale np. nowości, promocje, produkt z gazetki czy też wyprzedaż. Zmianę rodzaju wyświetlanych produktów wykonuje się w Panelu administracyjnym. W tym celu należy edytować obiekt, który domyślnie wyświetla nowości zdefiniowane w systemie ERP. Zaloguj się do Panelu administracyjnego i przejdź do obszaru Wygląd sklepu/ Ustawienia. Następnie użyj przycisku ‘Więcej’ i Edytuj Ustawienia zaawansowane. Przejdź do zakładki 'Obiekty' i edytuj obiekt 'productrecommended'. W edycji obiektu 'productrecommended' możesz zmienić typ wyświetlanych produktów wybierając je z listy rozwijanej. Po zmianie zapisz swój wybór i opublikuj szablon, aby nowe produkty pojawiły się na stronie, w sekcji polecane.

Ustawienia

Obszar Wygląd sklepu/ Ustawienia zawiera szereg ustawień odnośnie wyglądu Twojego sklepu pogrupowanych w zakładki:

Ustawienia szablonu

W ustawieniach szablonu możesz:

Wskazówka

Ilość parametrów zależna jest od wykorzystywanego szablonu, a także od własnych ustawień dodanych w zakładce Ustawienia (JSON) w ustawieniach zaawansowanych, a następnie wprowadzonych w pliku __settings.liquid

Więcej o konfiguracji kolorów Twojego sklepu przeczytasz w artykule Zmiana kolorystyki

Bannery

W tej zakładce możesz modyfikować istniejące bannery lub dodawać nowe zgodnie z artykułem Bannery

Tłumaczenia

W obszarze Tłumaczenia znajduje się lista fraz wykorzystywanych w szablonie oraz ich tłumaczeń. Możesz dodawać, usuwać, a także edytować istniejące frazy, aby dostosować szablon do swoich potrzeb. Listę fraz wraz z tłumaczeniami można wyeksportować do pliku XML oraz zaimportować z wcześniej przygotowanego pliku XML.

Wskazówka

Fraz systemowych nie można usuwać, ale można je edytować.

Nagłówek / Stopka

W zakładce Nagłówek / Stopka możliwe jest dodanie favicon.ico, czyli grafiki, która jest widoczna na zakładce w przeglądarce. Aby dodać zdjęcie, należy kliknąć przycisk Wyślij plik, po czym wybrać odpowiednią grafikę o rozmiarze nie większym niż 10 KB. W tym obszarze możesz również edytować elementy wyświetlające się w stopce. W sekcji Dołącz do nas możesz edytować i usuwać istniejące linki do portali społecznościowych lub dodawać nowe, a także wykorzystać obszar do innych odniesień zewnętrznych przydatnych w Twoim sklepie.

Wskazówka

Od wersji 2019.5 dodane zostały nowe odnośniki do najczęściej wykorzystywanych social mediów, które wyświetlane są w stopce szablonu. Mogą teraz Państwo kierować swoich użytkowników dodatkowo do serwisu Instagram, YouTube oraz Snapchat.

W sekcji Strony możesz edytować i dodawać grupy stron wyświetlających się w stopce. Po przejściu w edycję danej grupy możesz edytować nazwę w wielu językach, modyfikować listę stron poprzez usunięcie istniejących lub dodanie nowych stron ze sklepu, bądź stron zewnętrznych. Usunąć grupę możesz z poziomu menu więcej w prawym górnym rogu.

Dokumentacja

W tej zakładce znajdziesz link do Centrum Pomocy gdzie znajduje się aktualna dokumentacja odnośnie silnika Liquid

Ustawienia zaawansowane

Obszar Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane (menu 'więcej' w prawym górnym rogu) zawiera bardziej zaawansowane ustawienia pogrupowane w zakładki:

Wskazówka

Szczegółowe informacje dla webmasterów odnośnie poniższych ustawień znajdziesz w artykule Szablony w sklepie

Ustawienia (JSON)

W tej zakładce dostępne są ustawienia analogiczne z zakładką Ustawienia szablonu, którą znajdziesz w sekcji Wygląd sklepu/ Ustawienia, ale przedstawione w formacie JSON. W tym miejscu możesz dodać własne ustawienia dla szablonów.

Szablon

W tej zakładce możesz ustawić szablon jako domyślny i/lub aktywny oraz podstawowe informacje o szablonie: nazwę, wersję, datę utworzenia oraz dane autora. Poprzez opcję Zmień hasło masz możliwość nadania hasła szablonowi i zablokowania nim obszarów, w których dokonuje się edycji szablonu oraz dostępu do szablonu poprzez aplikację Liquid Sync.

Uwaga

Zablokowanie hasłem dostępu do szablonu przez Liquid Sync spowoduje całkowity brak dostępu, mimo podania poprawnego hasła w aplikacji Liquid Sync.

 

Obiekty

W zakładce Obiekty znajduje się lista konfigurowalnych obiektów lokalnych - więcej o tych obiektach przeczytasz w artykule Obiekty lokalne. Na liście masz możliwość prostej konfiguracji istniejących obiektów po kliknięciu w wiersz z obiektem lub konfiguracji w formacie JSON po kliknięciu w adekwatną opcję oraz możliwość dodania kolejnych obiektów, które później mogą zostać wykorzystane w szablonie sklepu.

Testy A/B

Testy A/B pozwalają na wyświetlenie strony sklepu w dwóch różnych odsłonach celem zbadania i porównania ogólnej jakości i funkcjonalności szablonów, zaznaczonych w zakładce Szablon jako aktywne. W praktyce przy ustawieniu dwóch szablonów A i B jako aktywnych, sklep będzie się wyświetlał klientom raz w wersji A raz w wersji B (po równo). Jest to metoda badawcza, która w połączeniu z Google Analytics daje materiał do analizy współczynników konwersji, czyli procentowej wielkości określającej stosunek użytkowników strony, którzy wykonali pożądaną akcję (np. zakup) do wszystkich użytkowników danej strony. Okres trwania testów A/B możesz ustawić w panelu na 1 do 365 dni.

Strony

Zakładka zawiera listę stron w sklepie wraz z obiektami oraz plikami html które są przypisane do danej strony. W kolumnach Plik i Include możesz przypisać odpowiedni pliki html do wybranej strony. Po kliknięciu w wiersz z nazwą strony masz możliwość wybrania obiektów dostępnych na danej stronie.

Import z pliku XML

Import z pliku XML pozwala wczytać w sklepie wcześniej przygotowany i wyeksportowany szablon po kliknięciu w opcję Wybierz plik XML a następnie przycisk Importuj szablon znajdujący się poniżej. Jeżeli nadpisujesz istniejący szablon i chcesz zrobić pełny import, pamiętaj o zaznaczeniu opcji Podmień istniejące bannery, aby nadpisać bannery z szablonu wybranego na liście rozwijalnej w lewym górnym rogu.

Uwaga

Pamiętaj! Przed importem sprawdź, czy w liście rozwijalnej w lewym górnym rogu masz wybrany odpowiedni wolny slot lub szablon, który chcesz nadpisać nowym.

Eksport do pliku XML

Eksport przygotowanego szablonu do pliku XML następuje po kliknięciu w przycisk Eksportuj szablon. Dodatkowo istnieje możliwość eksportu tylko bannerów do pliku XML poprzez wybranie przycisku Eksportuj bannery. Przed eksportem możesz uzupełnić dane autora szablonu takie jak Autor, E-mail, Telefon, Adres WWW.

Edytuj HTML

Z obszaru Edytuj ustawienia zaawansowane poprzez menu Więcej widoczne w prawym górnym rogu masz dostęp do obszaru Edytuj HTML. 

Uwaga

Uwaga. Ustawienia zaawansowane przeznaczone są dla webmasterów. Ustawienia wpływają w sposób bezpośredni na zachowanie strony w przeglądarce internetowej. Niepoprawnie wprowadzone dane mogą spowodować:

• błąd wyświetlania strony,
• nieprawidłowe funkcjonowanie strony,
• nieprawidłowe wyświetlanie strony,
• nieprawidłowe formatowanie strony.

Z tego obszaru masz możliwość edycji kodu szablonu dzięki dostępowi do plików html, css, js, co daje praktycznie nieograniczone możliwości personalizacji wyglądu oraz tworzenia własnych szablonów. Możesz również tworzyć oddzielne szablony dla sklepu na Facebooku lub wersji mobilnej poprzez listę rozwijalną obok listy z aktywnym szablonem. Na liście plików możesz wejść w edycję plików istniejących lub dodać nowe pliki. Po wejściu w edycję pliku masz możliwość jego edycji lub usunięcia, a także blokady poprzez wcześniej zdefiniowane hasło w ustawieniach zaawansowanych na zakładce Szablon. Pliki podniesione do edycji widoczne są w formie zakładek w lewym górnym rogu. Od wersji 2020 dla szablonu Topaz została dodana informacja na temat godziny wygenerowania szablonu w kreatorze. Taka informacja znajduje się w pliku _layout.html nad oknem edycji. Jeżeli plik nie był modyfikowany, wówczas godzina odpowiada godzinie wygenerowania szablonu w kreatorze. Jeżeli plik został zmodyfikowany to prezentowana godzina jest godziną ostatniej modyfikacji pliku.

Wskazówka

Więcej o plikach szablonu przeczytasz w artykule Pliki szablonu oraz Szablony w sklepie.

W e-Sklepie możesz dodawać nowe strony do swojego szablonu. Dzięki dodatkowemu odnośnikowi Klient może przenieść się do przeznaczonej dla niego treści. W celu dodania nowej strony w e-Sklepie z zachowaniem obecnego wyglądu stron, wystarczy wykonać kilka prostych kroków.

Wskazówka

Instrukcja dotyczy szablonów Topaz oraz Szafir od wersji 2021.5. W przypadku szablonów Bursztyn, Opal, Agat od wersji 2022.  W  przypadku wszystkich szablonów w wersji poniżej  2021.5 obowiązuje instrukcja "Jak wyświetlać własną Treść na nowo dodanej Stronie użytkownika"  

Krok 1. Tworzenie nowej strony

a) W panelu administracyjnym przejdź do zakładki Wygląd sklepu > Strony. Na dole strony znajduje się sekcja Użytkownika. Skorzystaj z przycisku plusa, aby dodać nową stronę. b) W oknie pop-up uzupełnij pole Nazwa i Tytuł strony (meta title). Pole Link uzupełni się automatycznie. Następnie zatwierdź przyciskiem DODAJ.

Uwaga

Należy zapamiętać Identyfikator strony - numer znajdujący się na końcu wygenerowanego linka URL strony. Przykład: http://demo.comarch-esklep.pl/testowy/nowa_strona/27

Wskazówka

Pole link uzupełni się automatycznie na podstawie wprowadzonej nazwy. Możesz także wprowadzić swój własny tekst.

Nowa strona zostaje dodana jako nieaktywna. W celu jej aktywacji, trzeba zmienić wartość przełącznika Aktywna na "Tak". c) Po wykonaniu powyższych operacji mamy gotową pustą stronę. W celu jej publikacji, użyj na szczegółach strony przycisku Więcej > Publikuj, znajdującego się w prawym górnym rogu strony.

Krok 2. Przyporządkowanie nowej strony do odpowiedniego pliku (obiektu) w szablonie

Aby nowa strona mogła zostać prawidłowo wyświetlona w e-Sklepie, należy przyporządkować ją do odpowiedniego pliku w posiadanym szablonie. Postępuj zgodnie z poniższymi krokami i powiąż wcześniej dodaną stronę z plikiem user-page.html . a) W panelu administracyjnym przejdź do sekcji Wygląd sklepu > Ustawienia > Edytuj ustawienia zaawansowane (z rozwijanej listy w prawym górnym rogu ekranu). b) W zakładce Strony nowo dodana strona powinna pojawić się na końcu listy. Wprowadź w pustym polu w kolumnie Plik wartość user-page.html. c) Wprowadzone zmiany zapisz oraz opublikuj (przyciski w prawym górnym rogu).  

Krok 3. Utworzenie własnej treści dla nowej strony

Na nowo dodanej stronie możliwe jest w łatwy i szybki sposób wprowadzenie własnych treści. Treść użytkownika dodajemy zgodnie z poniższymi informacjami: a) W panelu administracyjnym przejdź do sekcji Ustawienia > Treści formalne, po czym przejdź do zakładki Regulamin i inne. b) Dodaj nową treść użytkownika, klikając w przycisk Dodaj regulamin. c) Wprowadź nazwę nowej strony oraz dowolną treść, jaką chcesz wyświetlić. W tym miejscu możesz także wgrać własne załączniki. W dodatkowym elemencie na pasku nowej strony pojawią się odnośniki do załączonych plików, do których Klient będzie miał swobodny dostęp. Zapisz przyciskiem Dodaj bez publikacji lub Dodaj i publikuj. d) Następnie wejdź ponownie w szczegóły zapisanej treści i wprowadź Identyfikator*.

Uwaga

W polu Identyfikator wprowadź identyfikator cyfrowy strony utworzonej w kroku 1. Pamiętaj! Musi to być to przypisany numer z zakładki Wygląd sklepu > Ustawienia, Więcej > Edytuj ustawienia zaawansowane > Strony, inaczej powiązanie treści użytkownika z nowo dodaną stroną się nie powiedzie.

e) Zapisz i publikuj. Po wykonaniu powyższych kroków pod adresem URL z punktu 1. powinna być widoczna treść wprowadzona w sekcji Regulamin i inne.

Krok 4. Dodanie strony do sekcji

W ostatnim kroku, należy przejść do zakładki Wygląd sklepu > Ustawienia > Nagłówek lub Stopka, następnie kliknąć w odpowiednią sekcję i z tego miejsca dodać nową stronę, wybierając opcję Dodaj stronę ze sklepu.

Uwaga

Pamiętaj o publikacji szablonu po wprowadzeniu powyższych zmian!

Wykonanie powyższych kroków pozwala na utworzenie własnej strony, a następnie powiązanie ją z treścią użytkownika. Nowa strona będzie widoczna w stopce szablonu, a po przejściu do niej wyświetli się utworzona wcześniej treść.

Wstęp

Dzięki funkcji udostępniania towarów klienci mają możliwość udostępnienia wybranego asortymentu w mediach społecznościowych lub za pomocą komunikatorów internetowych. Jest to jedna z częściej używanych opcji w sklepach internetowych. W Comarch e-Sklep możesz udostępniać produkty na następujących platformach: Aby skorzystać z przygotowanego przez nas mechanizmu udostępniania towaru musisz posiadać:

Konfiguracja udostępniania towarów w szablonie Topaz

Aby skonfigurować udostępnianie towarów w szablonie postępuj zgodnie z poniższą instrukcją. Krok 1. Zaloguj się do panelu administracyjnego, a następnie przejdź do sekcji Wygląd sklepu/ Ustawienia. Krok 2. W zakładce Dodatkowe odszukaj sekcję o nazwie Udostępnianie towarów. Krok 3. Spośród dostępnych platform wybierz te, na których Klient będzie mógł udostępniać Twoje towary. Krok 4. Po dokonaniu modyfikacji zapisz i opublikuj zmiany.

Wskazówka

Jeżeli nie pozwolisz na udostępnianie towarów, to widok na szczegółach towaru nie ulegnie zmianie. Produkt będzie można udostępnić klikając przycisk Poleć towar

Na szczegółach towaru ikona i napis "Poleć towar" zmienia się na "Udostępnij na". Po kliknięciu w ikonę Klient będzie mógł wybrać opcje, które zostały wybrane w panelu administracyjnym. W wersji mobilnej Klient będzie mógł udostępnić towar w aplikacjach, które posiada zainstalowane w swoim smartfonie. Lista aplikacji otworzy się po kliknięciu w przycisku Dostępne aplikacje.   

Konfiguracja udostępniania towarów w szablonie Szafir

Aby skonfigurować udostępnianie towarów w szablonie postępuj zgodnie z poniższą instrukcją. Krok 1. Zaloguj się do panelu administracyjnego, a następnie przejdź do sekcji Wygląd sklepu/ Ustawienia. Krok 2. W zakładce Ogólne odszukaj sekcję o nazwie Udostępnianie towarów. Krok 3. Spośród dostępnych platform wybierz te, na których Klient będzie mógł udostępniać Twoje towary. Krok 4. Po dokonaniu modyfikacji zapisz i opublikuj zmiany.

Wskazówka

Jeżeli nie pozwolisz na udostępnianie towarów, to widok na szczegółach towaru nie ulegnie zmianie. Produkt będzie można udostępnić klikając przycisk Poleć towar

Na szczegółach towaru ikona i napis "Poleć towar" zmienia się na "Udostępnij na". Po kliknięciu w ikonę Klient będzie mógł wybrać opcje, które zostały wybrane w panelu administracyjnym. W wersji mobilnej Klient będzie mógł udostępnić towar w aplikacjach, które posiada zainstalowane w swoim smartfonie. Lista aplikacji otworzy się po kliknięciu w przycisku Dostępne aplikacje. 

Wstęp

Stopka to jeden z podstawowych elementów każdego sklepu internetowego. Oprócz wymaganych informacji, które muszą się w niej znaleźć, może zawierać zbiór innych odniesień do konkretnych sekcji w Twoim e-Sklepie, do Twojego bloga lub profili w social mediach. Odnośniki mogą pozytywnie wpływać na wizerunek Twojego sklepu, przyczyniając się do wsparcia sprzedaży i generując większy ruch na stronie. W Kreatorze wyglądu obok standardowych widoków znajduje się dodatkowy, który jest bardziej rozbudowany. W przypadku szablonu Topaz jest to trzeci widok (footer-3), zaś w przypadku Szafira - drugi widok (footer-2). Dzięki modyfikacji obszaru możesz jeszcze bardziej spersonalizować swój sklep poprzez uzupełnienie stopki w więcej przydatnych informacji.

Konfiguracja rozbudowanej stopki

Jak przystąpić do edycji stopki?

Po zaimportowaniu z Kreatora wyglądu stopka będzie wyświetlać się w ograniczonym zakresie. Niezmiennie jej edycji dokonasz z perspektywy zakładek: Wygląd Sklepu/Ustawienia a następnie sekcji Nagłówek/Stopka. To tutaj zdecydujesz o ilości grup stron, konkretnych elementach w ich obrębie a następnie o kolejności w jakiej będą prezentować się w e-Sklepie. Również z tego poziomu dodasz odwołania do Twoich profili na portalach społecznościowych oraz ustawisz favicon dla swojego sklepu internetowego.

Więcej możliwości edycji stopki

Rozbudowana stopka w szablonie Topaz oraz Szafir umożliwia dodanie większej ilości grup stron niż dotychczas. Dzięki temu z łatwością zamieścisz w niej wszystko czego potrzebujesz. Dodatkowo sekcję uzupełniono o grafiki partnerów logistycznych oraz obsługiwanych operatorów płatności.

Przykładowy wygląd rozbudowanej stopki w szablonie Topaz

Przykładowy wygląd rozbudowanej stopki w szablonie Szafir

Jak skonfigurować poszczególne elementy?

Zdjęcia obrotowe 360° umożliwiają zaprezentowanie produktu z każdej strony. Dzięki nim klient może dokładniej obejrzeć produkt i tym samym dostrzec więcej detali. Fotografia obrotowa świetnie sprawdza się przy towarach, które posiadają wiele elementów lub oryginalną budowę. Aby dla swoich towarów zaprezentować zdjęcia w formie 360° musisz: Domyślnie zdjęcia 360° widoczne są na liście towarowej i na szczegółach towaru. Jeśli chcesz ograniczyć wyświetlanie zdjęć przejdź do panelu administracyjnego do zakładki Wygląd sklepu/ Ustawienia/ Ogólne i znajdź parametr Wyświetlaj zdjęcia 360° na liście towarów, a następnie zmień parametr na Nie. Pamiętaj, aby po zmianie parametru zapisać i opublikować zmiany.  

Jak przygotować zdjęcia 360°, aby móc udostępnić je dla moich towarów?

Krok 1. Sfotografuj swój towar z różnych stron obracając się wokół jego osi - tworząc odpowiednią ilość zdjęć prezentującą towar z różnych stron. Krok 2. Zatytułuj kolejno przygotowane zdjęcia podając numer klatki: 1, 2, 3, 4, itd. Numeracja zdjęć będzie odpowiadać za kolejność prezentowanej klatki. Krok 3. Utwórz folder, w którym umieścisz przygotowane zdjęcia i udostępnij je na zewnętrznym serwerze, w celu uzyskania linku do katalogu. Tak przygotowany katalog udostępnisz następnie w formie atrybutu na towarze w swoim systemie Comarch ERP.

Jak dodać zdjęcie 360° dla mojego towaru w Comarch e-Sklep?

Krok 1. Przejdź do swojego systemu Comarch ERP i dodaj nowy atrybut o nazwie 360photo i typie tekst. Krok 2. Przejdź do edycji wybranego towaru i dodaj w odpowiednim miejscu nowy atrybut o nazwie 360photo. Jako wartość atrybutu wprowadź adres URL do zewnętrznego hostingu, na którym znajduje się katalog z przygotowanym zdjęciem w formacie 360°. Krok 3. Zapisz zmiany i wykonaj synchronizację danych. Gotowe! W Twoim e-Sklepie pojawiły się właśnie zdjęcia w formie 360°. Od teraz Twoi Klienci zobaczą sprzedawane towary z różnych stron.

Wskazówka

Do prawidłowego wyświetlania się zdjęcia 360° należy dodać wskazany wyżej atrybut na towarze nadrzędnym, tak żeby ścieżka do niego alfabetycznie była na pierwszym miejscu. Wskazane zdjęcie będzie widoczne na liście towarowej na ojcu oraz w galerii towaru. Jeśli towary podrzędne nie będą posiadały zdjęć 360°, to będą widoczne z towaru nadrzędnego. Dla każdego języka można dodać tylko jedno zdjęcie 360°.

Zobacz jak prezentuje się zdjęcie w formacie 360° w jednym z naszych sklepów demonstracyjnych.

Jak wykonać kopię bezpieczeństwa mojego szablonu?

Oprawa wizualna sklepu jest bardzo ważnym elementem podczas prowadzenia sprzedaży w sieci. Narzędzie Kreator Wyglądu Comarch e-Sklep umożliwia stworzenie własnych, niepowtarzalnych szablonów wedle preferencji i potrzeb użytkowników. W intuicyjnym narzędziu jakim jest Kreator, będziesz w stanie zaprojektować wszelkie niezbędne funkcje, takie jak stronę główną, listę towarów, szczegóły towaru oraz koszyk. Jeśli Twój projekt szablonu został zaimportowany do e-Sklepu oraz skonfigurowany wedle Twoich preferencji (dodanie grafik do bannerów, modyfikacje kolorystyczne) masz możliwość jego zapisania, co będzie stanowić kopię bezpieczeństwa. Kopia bezpieczeństwa to dane, które w każdej chwili można odtworzyć w przypadku ich utracenia (np. poprzez przypadkowe usunięcie) lub częstego wprowadzania zmian. Dane, jakie może zawierać kopia bezpieczeństwa to szablon, który wcześniej został przez nas wygenerowany wraz z bannerami. Zaleca się wykonywanie kopii zapasowych oraz zabezpieczenie ich hasłem. Każda wykonana kopia zapasowa powinna zostać zapisana w bezpiecznym i dogodnym dla Użytkownika miejscu.

Jak wykonać kopię bezpieczeństwa?

W Panelu Administracyjnym przejdź do sekcji Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie przejdź do zakładki Eksport szablonu. W pustych polach znajdujących się w zakładce Eksport szablonu, opcjonalnie przed eksportem możesz uzupełnić powyższe dane, tj. Autora szablonu, e-mail, telefon i stronę WWW sklepu. Aby wyeksportować szablon, kliknij Eksportuj szablon. Wyeksportowany plik jest w formacie XML, a jego nazwa zawiera szablon oraz wersję, co znacznie ułatwia zarządzanie kopiami bezpieczeństwa w przypadku wykonywania ich regularnie.

Jak wyeksportować bannery?

Bannery, które znajdują się w Twoim sklepie możesz również wyeksportować tworząc kopię bezpieczeństwa. W tym celu także musisz przejść do Wygląd sklepu/ Ustawienia/ Edytuj ustawienia zaawansowane, a następnie do zakładki Eksport szablonu. Obok przycisku Eksportuj szablon, znajduje się przycisk Eksportuj bannery, który musisz kliknąć aby bannery, które posiadasz w e-Sklepie zostały weksportowane. Kopia bezpieczeństwa jest również zapisywana w formacie XML, a nazwa pliku wskazuje na szablon, wersję i zawartość bannerów.

Jak zabezpieczyć hasłem swój szablon?

Jeśli chcesz, aby Twój szablon został zabezpieczony hasłem, a znajomość hasła była niezbędna podczas zaimportowania tego szablonu do e-Sklepu, musisz w tym celu przejść w Panelu Administracyjnym do sekcji Wygląd sklepu/ Ustawienia/ Ustawienia zaawansowane, następnie do zakładki Szablon. W tym miejscu nadasz hasło dla swojego szablonu. Zgodnie z Polityką bezpieczeństwa haseł, hasło powinno: Gotowe! Teraz Twój szablon został zabezpieczony hasłem. Jeśli wyeksportujesz szablon, który zabezpieczyłeś hasłem – podczas importu tego szablonu, będziesz musiał podać nadane wcześniej hasło. Jego brak uniemożliwi import szablonu, a podanie błędnego hasła spowoduje nieprawidłowe działanie szablonu po imporcie. Więcej informacji znajdziesz:

Lookbook - czym jest i jak do wykorzystać?

Chociaż lookbook został stworzony głównie z myślą o świecie mody, to można w nim prezentować towary z dowolnych kategorii. Może to być zarówno seria zdjęć z kolekcją ubrań, jak i zdjęcie ścianki warsztatowej, na której zaznaczono dostępne w sklepie narzędzia. Dodatkowo, na zamieszczonych fotografiach możliwe jest dodanie odnośników kierujących do konkretnych produktów sprzedawanych w e-Sklepie. W przypadku e-Sklepu lookbookiem można nazwać zbiór fotografii przedstawiających konkretną kategorię produktową. Towary prezentowane na zdjęciach powinny być odpowiednio wyeksponowane. Żeby produkt skutecznie przyciągał uwagę zaleca się, aby zdjęcia były wykonywane na neutralnym tle, które będzie odpowiednio komponowało się ze stroną sklepu. Dzięki lookbookowi możesz przedstawić Klientowi np. odpowiednie zastosowanie swoich produkt i tym samym inspirować ich. Dodatkowo funkcja ta pozwala na promowanie wielu towarów w bardzo atrakcyjnej formie.

Konfiguracja lookbooka w panelu administracyjnym

Niektóre szablony, takie jak Opal czy Topaz, domyślnie posiadają skonfigurowany banner jako lookbook. Oznacza to, że nie musisz tworzyć specjalnie dodatkowej sekcji.

W przypadku innych szablonów lookbook może wiązać się z dodaniem nowego banneru. Aby dodać lookbook do swojej strony należy zalogować się do panelu administracyjnego i postępuj zgodnie z poniższą instrukcją: Krok 1. Przejdź do sekcji Wygląd sklepu/ Ustawienia/ Bannery. Jeżeli nie masz sekcji bannerowej o nazwie lookbook naciśnij przycisk plusa, aby dodać nowy banner.

Jeżeli masz taką sekcję przejdź do jej edycji.

Krok 2. Wprowadź nazwę dla nowego lookbooka. Następnie naciśnij dodaj.

Krok 3. Po wpisaniu nazwy nowego banneru wyświetla się nowy formularz. W tym miejscu masz możliwość dodania opisu dla administratora oraz obrazków do katalogu.

Uzupełnij wszystkie pola i zaznacz opcję lookbook.

Jeżeli powyższe kroki zostały wykonane, to możesz przejść do dodawania obrazków. Po dodaniu obrazków istnieje również możliwość uzupełnienia szczegółów dotyczących konkretnego zdjęcia. Aby dokonać modyfikacji w tym obszarze przejdź w Widok zaawansowany.

Po kliknięciu w odnośnik pojawi się panel, w którym można zmienić np. tekst na bannerze, nagłówek, czas jego wyświetlania, link do którego kieruje dany obrazek, a także tooltip i tekst alternatywny.

Jak oznaczyć towary na zdjęciu w lookbooku?

Krok 1. Dodaj zdjęcie dla swojego lookbooka. Krok 2. Przejdź do jego szczegółów. Krok 3. Kliknij na zdjęciu w miejsce, dla którego chcesz oznaczyć towar. Otworzy Ci się nowy popup, w którym wybierzesz towar ze swojej bazy. Gotowe! Dla wybranej grafiki zostały oznaczone towary. Przechodząc do lookbooka w szablonie Topaz, kiedy klikniesz w ikonę "plusa" znajdującą się na danym towarze, masz możliwość dodania tego towaru do koszyka, a ikoną serduszka dodasz towar do ulubionych.

Lookbook w sklepie demonstracyjnym https://demo-topaz.comarchesklep.pl/

Wskazówka

Konfiguracja lookbooka jest taka sama dla wszystkich szablonów Comarch. Każdy z nich posiada jednak odmienny widok i sposób oznaczenia towarów. Niżej możesz zobaczyć, jak wyglądają lookbooki w poszczególnych szablonach Comarch.

Lookbook w Szablonie Topaz

Szablon Topaz dedykowany sprzedaży detalicznej posiada dwa widoki lookbooka do wyboru: mozaikę lub listę. Aby zdecydować jaki widok jest dla Ciebie odpowiedni przejdź do zakładki Wygląd Sklepu/ Ustawienia i w sekcji Ustawienia lookbooka wybierz jeden z dostępnych widoków: Widok typu mozaika charakteryzuje się różnorodnym rozmieszczeniem grafik w odmiennych rozmiarach – tworząc tytułową mozaikę. Na każdej grafice możesz oznaczyć towary, które są dostępne do kupienia w Twoim e-Sklepie. Z tego poziomu Klient będzie mógł w szybki sposób przejść do szczegółów towaru i poznać szczegóły na jego temat.

Wskazówka

Rekomendowany rozmiar bannerów w lookbooku dla widoku mozaika to kolejno: 560px x 630px, 700px x 850px, 1260px x 540px, 630px x 950px, 560px x 630 px. Pamiętaj, że każdy obrazek powinien mieć nie więcej niż 500 KB.

Widok lookbooka w formie mozaiki możesz zobaczyć w naszym sklepie demonstracyjnym. Jeżeli chcesz posiadać kilka stron Lookbook wybieranych z listy w Twoim nagłówku, to w sekcji z bannerami dodaj kolejny Lookbook a następnie włącz odpowiednie ustawienie w Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne:

Wskazówka

Wskazana funkcjonalność nie jest dostępna w nagłówku header-5, ponieważ tam nie występuje zakładka Lookbook w nagłówku

Dzięki niemu zyskasz rozbudowaną zakładkę z Lookbookiem w swoim sklepie internetowym, który będzie prezentował się następująco: Jeśli chcesz, żeby Twoi Klienci mogli dodać wszystkie towary z Lookbooka do koszyka, to w zakładce Wygląd sklepu/ Ustawienia/ Ustawienia szablonu/ Ogólne zezwól na dodawanie towarów do koszyka. 

Wskazówka

Ikona koszyka pojawi się w Lookbooku jeśli wszystkie towary do niego dodane, będę proste i dostępne w sklepie. Towar prosty po dodaniu go w zakładce Wygląd sklepu/ Ustawienia/ Bannery/ Lookbook będzie miał parametr hasAttributes: false

 

Lookbook w Szablonie Szafir

Aby sekcja lookbook mogła być widoczna na głównej stronie Twojego e-Sklepu to musisz w pierwszej kolejności aktywować go w pasku nawigacji. W tym celu przejdź do zakładki Wygląd sklepu/ Ustawienia/ Strona główna  i zaznacz sekcję lookbook.

Jak wygląda lookbook w szablonie Szafir możesz zobaczyć w naszym sklepie demonstracyjnym

Lookbook w Szablonie Opal

Widok lookbooka w szablonie Opal charakteryzuje się rozmieszczeniem zdjęć w formie mozaiki. Na grafikach można precyzyjnie oznaczyć towary, które z poziomu lookbooka można dodać bezpośrednio do koszyka. Jak wygląda lookbook w szablonie Opal możesz zobaczyć w naszym sklepie demonstracyjnym.

Lookbook w Szablonie Bursztyn

Widok lookbooka w szablonie Bursztyn charakteryzuje się prezentacją zdjęć jedno obok drugiego. Na bannerach można precyzyjnie oznaczyć towary i ilości, które z poziomu lookbooka można dodać bezpośrednio do koszyka.  

Oznaczone towary w lookbooku - szablon Bursztyn

Wstęp

Dobrze skonfigurowane filtry w znacznym stopniu uproszczą i skrócą proces wyszukiwania poszczególnych produktów , co z pewnością przełoży się na pozytywny odbiór i częstsze zakupy w Twoim e-Sklepie. Dodanie nowego filtra odbywa się poprzez utworzenie nowego atrybutu w systemie ERP, a następnie odpowiednie przyporządkowanie go grupy towarowej.

Comarch ERP XT

Poniżej znajdziesz kroki, które w łatwy i szybki sposób pomogą Ci utworzyć nowe filtry kategorii w Twoim e-Sklepie.

Krok 1. Na początku musimy utworzyć Atrybuty, które mają być widoczne na Twojej liście filtrów. Logujemy się do panelu administracyjnego Twojego systemu Comarch ERP XT. Rozwijamy zakładkę Więcej funkcji i klikamy w Comarch e-Sklep.  W nowym widoku wchodzimy w Atrybuty w Comarch e-Sklep,

a następnie w górnym prawym roku ikonę Dodaj.

 Krok 2. W sekcji Nazwa uzupełnij nazwę atrybuty dla każdego języka osobno, a następnie wciśnij przycisk Zapisz zmiany.

Krok 3. Teraz musisz przyporządkować powstałe atrybuty do konkretnej grupy, żeby posłużyły Ci jako filtry kategorii na liście towarowej. W zakładce Więcej funkcji/ Comarch e-Sklep/  Grupy w Comarch w e-Sklep,

a następnie kliknij lewym przyciskiem myszki w grupę na, której mają się wyświetlać dodatkowe filtry.

Krok 4. W sekcji Atrybuty kliknij w pole nazwa atrybutu. Wyskoczy Ci lista wszystkich dodanych atrybutów. Wybierz tylko te, które chcesz mieć widoczne na swojej liście towarowej.

  Krok 5. Kolejne zmiany będą dokonywane już na karcie towaru. Produkty będą widoczne w twoich filtrach dopiero po dodaniu ich w sekcji: Atrybuty zwykłe. Atrybuty muszą zostać wybrane takie same jak w kroku 4. W tym artykule znajdziesz więcej informacji odnośnie konfiguracji produktów z twoim e-Sklepie: Skonfiguruj swój pierwszy produkt i wyślij go do e-Sklepu 

Przyklad

Jak dodamy atrybuty zgodnie z poniższym zdjęciem to produkt będzie widoczny we wszystkich trzech filtrach. Widok z e-Sklepu po synchronizacji i wybraniu odpowiednich filtrów:

Krok 6. Po wykonaniu powyższych kroków wykonaj synchronizację danych i sprawdź, jak wyglądają nowe filtry w Twoim e-Sklepie.

Comarch ERP Optima

Jak utworzyć filtr?

Poniżej znajdziesz kroki, które w łatwy i szybki sposób pomogą Ci utworzyć nowe filtry kategorii w Twoim e-Sklepie.

Krok 1. Na początku musimy utworzyć Atrybuty, które mają być widoczne na Twojej liście filtrów. Z poziomu ERP Optima W zakładce Ogólne/ Atrybuty otwórz Listę atrybutów i ikoną plusa dodaj nowy atrybut.

Krok 2. W zakładce Ogólne uzupełnij formularz wpisując Kod i Nazwę atrybutu, wybierz format: Lista oraz udostępnij atrybut w e-Sklepie/e-Sale.

Krok 3. Uzupełnij zakładkę Pozycje listy podając wartości dla atrybutu, a następnie zapisz zmiany dyskietką :

Krok 4. Teraz musimy przyporządkować powstałe atrybuty do konkretnej grupy, żeby posłużyły nam jako filtry kategorii na liście towarowej W zakładce Ogólne/ Cennik otwórz Grupę towarową (klikając dwa razy w wybraną grupę).

Krok 5. W sekcji Atrybuty używając plusa   dodaj nowy atrybut do grupy towarowej.

Krok 6. Dodaj atrybut wpisując jego nazwę lub wybierając atrybut z listy (klikając na parametr Atrybut). Po dodaniu atrybutu zapisz zmiany klikając w dyskietkę.

Wskazówka

Nie przypisuj wartości do atrybutu na grupie towarowej - wartość atrybutu jest pobierana z karty towarowej. W tym celu należy dodać ten sam atrybut z wartością na danym towarze.

Jak dodać atrybut do towaru?

Krok 1. Kolejne zmiany będą dokonywane już na karcie towaru. Na wybranym towarze przejdź na zakładkę Atrybuty, dodaj nowy atrybut i zapisz zmiany

Krok 2. Wybierz wartość dla wybranego atrybutu i zaznacz parametr "udostępnij w Comarch e-Sklep/e-Sale". Po wykonanych czynnościach zapisz zmiany

Krok 3. Wykonaj synchronizację do e-Sklepu z poziomu Comarch ERP Optima. Teraz możesz wejść do swojego e-Sklepu i zobaczyć swoje nowo dodane filtry.

Comarch ERP XL

Jak utworzyć filtr?

Krok 1. Na początku musimy utworzyć Atrybuty, które mają być widoczne na Twojej liście filtrów. Z poziomu ERP XL w sekcji Administrator, w zakładce Narzędzia/ Atrybuty otwórz Atrybuty i ikoną folderu z zielonym plusem dodaj nową klasę atrybutów.

Krok 2. W zakładce Ogólne uzupełnij formularz wpisując Nazwę atrybutu, wybierz Typ: Lista oraz udostępnij atrybut parametrem e-Sklep.

A, w zakładce Obiekty dodaj do obiektów klasy towarowe.

Krok 3. Uzupełnij formularz Definicje atrybutów podając wartości dla atrybutu, a następnie zapisz zmiany .

Krok 4. Teraz musimy przyporządkować powstałe atrybuty do konkretnej grupy towarowej, aby posłużyły nam jako filtry kategorii na liście towarów. W menu głównym ERP XL otwórz sekcję Sprzedaż, a następnie w zakładce Ogólne/ Towary otwórz Grupę towarową (klikając dwa razy w wybraną pozycję).

Krok 5. W formularzu Wzorca towaru (grupa Bakalie) w zakładce Atrybuty używając plusa dodaj nowy atrybut do grupy towarowej.

Krok 6. Dodaj klasę atrybutu wybierając go z listy i zatwierdź go zaznaczoną ikoną.

Wskazówka

Nie przypisuj wartości do atrybutu na grupie towarowej – wartość atrybutu jest pobierana z karty towarowej. W tym celu należy dodać ten sam atrybut z wartością na danym towarze.

Krok 7. Nie zapomnij w zakładce Aplikacje zaznaczyć parametr e-Sklep.

Jak dodać atrybut do towaru?

Krok 1. Kolejne zmiany będą dokonywane już na karcie towaru. Na wybranym towarze przejdź na zakładkę Atrybuty, dodaj nowy atrybut i zapisz zmiany.

Krok 2. Wybierz wartość dla wybranego atrybutu i zapisz zmiany.

Krok 3.Wykonaj synchronizację do e-Sklepu z poziomu Comarch ERP XL. Teraz możesz wejść do swojego e-Sklepu i zobaczyć swoje nowo dodane filtry.

Comarch ERP Altum

Jak utworzyć filtr?

Krok 1. Zaczynamy od utworzenia nowego atrybutu, który będzie widoczny na Twojej liście filtrów. Z poziomu ERP Altum w sekcji Konfiguracja, w zakładce Atrybuty i klikamy w plus, żeby dodać nową klasę atrybutu.

Krok 2. Wpisujemy Nazwę atrybutu, następnie wybieramy Typ: Lista oraz udostępniamy atrybut parametrem e-Sklep/Podgląd. Dodatkowo trzeba pamiętać, że parametr Aktywny musi być włączony.

Krok 3. Zdefiniujemy teraz nowe wartości dla atrybutu, który dodaliśmy. Należy zaznaczyć go na liście atrybutów, a następnie w sekcji Lista wartości atrybutu wybrać przycisk [Dodaj].

Krok 4. Przejdź teraz do zakładki Lista oddziałów i wybierz obiekt Grupa artykułów. Na dole pojawi Ci się nowo dodany atrybut. Kliknij w niego a następnie Powiąż i zapisz zmiany

Krok 5. Następnie przyporządkuj powstałe atrybuty do konkretnej grupy towarowej, aby posłużyły nam jako filtry kategorii na liście towarów. W menu głównym ERP Altum wybieramy sekcje Artykuły, a następnie wybieramy kategorie, do której mamy dodać wcześniej dodane atrybuty (klikając dwa razy w wybraną pozycję).

Krok 5. W oknie, które się otworzy, przejdź do zakładki Atrybuty i używając plusa dodaj nowy atrybut do grupy towarowej. Po dodaniu zapisujemy zmiany

Krok 6. Przechodzimy teraz do zakładki Oddziały i wykonujemy synchronizację. Jeśli chcemy, żeby nowe atrybuty były widoczne w e-Sklepie to musimy wybrać obiekt Artykuł.

Jak dodać atrybut do towaru?

Krok 1. Kolejne zmiany będą dokonywane już na karcie towaru. Na wybranym towarze przejdź na zakładkę Atrybuty, dodaj nowy atrybut, wybieramy właściwy z listy i klikamy wybierz.

Krok 2. Wybierz wartość dla wybranego atrybutu i zapisz zmiany.

Krok 3. Wykonujemy teraz synchronizację e-Sklepu z Comarch ERP Altum. Teraz możesz wejść do swojego e-Sklepu i zobaczyć swoje nowo dodane filtry.

Logotyp e-Sklepu stanowi jeden z elementów identyfikacji wizualnej i jednocześnie jest jej najważniejszą częścią. Dzięki logo firma lub produkt są łatwiejsze do zidentyfikowania przez odbiorcę.

Logo i favicon. Jak je zmienić?

Jak wgrać własny logotyp w e-Sklepie?

Krok 1. W panelu administracyjnym przejdź do sekcji Ustawienia/Ustawienia sklepu/Dane sklepu/. Krok 2. Wybierz plik i zapisz zmiany.  

Uwaga

Maksymalny rozmiar obrazka wynosi 30 KB, wielkość to 200 x 200 px oraz musi być on w formacie *.PNG, *.JPG, *.JPEG, *.SVG.

Jak wgrać favicon?

Logo sklepu można również umieścić w ikonie strony internetowej, która prezentuje się w nagłówku przeglądarki,w wynikach wyszukiwania przy tytule strony, na pasku ulubionych zakładek tzw. favicon. Krok 1. Przejdź do sekcji Wygląd sklepu/zakładka Nagłówek/Stopka. Krok 2. Wgraj własny favicon dla swojego e-Sklepu i zapisz zmiany.

Uwaga

Uwaga! Maksymalny rozmiar obrazka to 10 KB.

 

W tym artykule dowiesz się jak włączyć funkcję, aby po wejściu do sklepu ustawiał się język ustawiony przez Klienta w przeglądarce. Funkcja ta działa tylko dla sklepów wielojęzycznych.

Wskazówka

Sklep wielojęzyczny to taki, w którym oprócz języka domyślnego, aktywny jest przynajmniej jeden dodatkowy język w zakładce Ustawienia > Ustawienia sklepu > Dane sklepu > Języki

Odtworzenie języka z poprzedniej sesji będzie miało priorytet nad domyślnymi ustawieniami przeglądarki. Oznacza, to że język wybrany podczas ostatniej wizyty użytkownika zostanie zachowany przy kolejnej wizycie, niezależnie od domyślnych ustawień językowych przeglądarki. Funkcja dostępna dla najnowszej wersji szablonów z Kreatora wyglądu. Aby skorzystać z tej funkcji, przejdź w panelu administracyjnym do sekcji Wygląd Sklepu > Ustawienia > Ogólne            

Wstęp

Nagłówek w e-Sklepie to stały element, umieszczony na górze ekranu lub na dole w wersji mobilnej. Jego głównym celem jest umożliwienie użytkownikom szybkiego dostępu do różnych sekcji witryny, takich jak: “Strona główna”, “O nas” czy “Kontakt”. Dzięki opcji edycji nagłówka możesz prosto i szybko: Możliwość edycji nagłówka dostępna jest dla szablonów B2C: Topaz, One Page Shop oraz Dla Gastronomii. Aby edytować zawartość nagłówka sklepu, należy przejść w panelu administracyjnym do obszaru: Wygląd sklepu  > Ustawienia > Nagłówek: W tym miejscu masz możliwość:

Jak dodać logotyp i favicon?

Aby dodać logotyp i favicon, wybierz przycisk „Wyślij plik”, a następnie wybierz plik z odpowiedniego miejsca na Twoim komputerze.

Wskazówka

Pamiętaj, że w przypadku logotypu, maksymalny rozmiar obrazka wynosi 30 KB, a wymiary to 200 x 200px. Rekomendowane formaty: PNG, JPG, JPEG, SVG. W przypadku faviconu maksymalny rozmiar obrazka wynosi 10 KB, a rekomendowane formaty to: PNG, JPG, JPEG, SVG.

 

Jak edytować odnośniki do mediów społecznościowych?

Wskazówka

Miniatury z odnośnikami do mediów społecznościowych są widoczne w drugim i trzecim typie nagłówka (header-2 oraz header-3) w szablonie Topaz.

Aby edytować istniejący odnośnik do mediów społecznościowych, przejdź do szczegółów logotypu wybranego serwisu, który chcesz podłączyć do e-Sklepu. W miejscu "# " w kodzie wklej link do swojego portalu. Dzięki temu możliwe będzie przekierowanie użytkownika do konkretnego medium społecznościowego. Następnie zapisz zmiany. Aby dodać nowy odnośnik do mediów społecznościowych wystarczy, że naciśniesz ikonę plusa. Wyświetli się wówczas edytor, do którego należy wkleić analogiczny kod, jak w przykładzie prezentowanym powyżej. Fragment kodu należy skopiować z poziomu panelu administracyjnego. W miejscu "#"w kodzie wklej link do swojego portalu. Jeśli chcesz zmienić obrazek, to we fragmencie kodu w miejscu linku wklej swój odnośnik do wybranego zdjęcia. Może to być odnośnik skopiowany z pliku, który znajduje się w Plikach użytkownika.

Wskazówka

W nagłówku wyświetli się pięć pierwszych ikon mediów społecznościowych, które zostały dodane w panelu administracyjnym.

 

Jak dodać strony lub grupy stron?

Z poziomu obszaru Wygląd sklepu > Ustawienia > Nagłówek możesz dodać Stronę lub Grupę stron. Aby to zrobić, należy wybrać sekcję "Dodaj stronę lub grupę stron". Po wybraniu tej opcji wyświetli się następujący popup: Z poziomu popupu należy zaznaczyć parametr: Stronę lub Grupę stron i uzupełnić obowiązkowe pole "Nazwa". Następnie, aby dodać odnośnik do strony, należy edytować dodaną stronę lub grupę.  Podczas edycji w panelu administracyjnym wyświetli się obszar, w którym możliwe jest dokonanie zmian. Możesz zdecydować, czy do strony lub grupy stron dodasz już istniejącą stronę ze sklepu, czy stronę zewnętrzną: Po wyborze opcji "Dodaj stronę ze sklepu" pokaże się popup z listą stron, które można wybrać i dodać do sekcji. Możesz także dodać stronę zewnętrzną, uzupełniając pola na formularzu: Przy dodanym odnośniku możesz zdecydować, czy chcesz go wyróżnić, otworzyć w nowej karcie, czy usunąć.   Wprowadzone zmiany należy zapisać i opublikować. Poniżej prezentujemy efekt wprowadzonych konfiguracji (dodanie mediów społecznościowych, grupy stron oraz wyróżnienia):

 

   

Wstęp

Dzięki nowej funkcjonalności, użytkownicy Panelu Administracyjnego będą mogli edytować i aktualizować elementy listy towarów bez potrzeby korzystania z Kreatora Wyglądu. To rozwiązanie zaprojektowano z myślą o szablonie Topaz, współpracującego z każdą wersją Comarch e-Sklepu. Nowa funkcjonalność nie tylko zwiększy wygodę użytkowania, ale także przyczyni się do optymalizacji czasu pracy. W niniejszym artykule przybliżymy szczegóły tego rozwiązania.

Zarządzanie elementami na liście towarów

W wersji 2024.6.1 Comarch e-Sklepu dla szablonu Topaz dodano funkcjonalność zarządzania elementami na liście towarów wprost z Panelu Administracyjnego Comarch e-Sklepu. Aby to zrobić, należy w Panelu Administracyjnym przejść do obszaru Wygląd sklepu (1) > Ustawienia (2) następnie kliknij w kartę Zarządzanie elementami na liście towarów (3) znajdującą się nad kaflami motywów kolorystycznych szablonu:

Jakie obszary są możliwe do zmiany?

 

Banner jest jednym z nośników treści reklamowych. Wystarczy, że przygotujesz obrazek, który przyciągnie wzrok klienta i dobrać do niego odpowiedni tekst promocyjny, a Twój sklep stanie się bardziej atrakcyjny dla klientów.

Edycja bannerów

Modyfikacja domyślnych bannerów dostępnych w szablonach Comarch dostępna jest w Panelu administracyjnym w obszarze Wygląd sklepu/ Ustawienia/ Bannery.

Wybierz banner, który chcesz edytować i kliknij w niego.

Wyświetlone zostanie okno, w którym możesz uzupełnić nazwę, opis oraz dodać lub zmienić zdjęcia. Edycja kolejności zdjęć w bannerze zarówno w widoku podstawowym i zaawansowanym jest możliwa przy użyciu metody "przeciągnij i upuść".

Aby móc uzupełnić więcej szczegółów dotyczących bannerów, rozwiń opcję Widok zaawansowany. Pojawi się wtedy panel, w którym można zmienić np. tekst na bannerze, nagłówek, czas jego wyświetlania, link do którego kieruje dany obrazek, a także tooltip i tekst alternatywny. Pole Tekst oraz Link pojawi się po dodaniu obrazka i rozwinięciu widoku zaawansowanego. Pamiętaj, aby zapisać zmiany ikoną dyskietki. Wszystkie zmiany w bannerach należy zatwierdzić opcją Publikuj dostępną w menu rozwijanym Więcej na liście bannerów.

Wskazówka

Rekomendowane rozmiary obrazków w bannerach dla szablonów Comarch:

• szablon Szafir: Bannery – przy tworzeniu wyglądu szablonu Szafirz w Kreatorze wybieramy ułożenie bannerów spośród sześciu opcji: Wygląd Sklepu/Ustawienia/Bannery/kafelki homepage

• • Banner 1: rekomendowana proporcja obrazków 3:1 (1500 px x 500 px). W celu zachowania dobrej jakości zdjęć na ekranach o wysokiej rozdzielczości ekranu, zalecamy dodawanie obrazków w jednakowej wielkości. Bannery umieszczone nad stopką powinny być tej samej skali, np. 100×100 i 200×200 lub 400×200 i 800×400 itd
  • Banner 2: 1255px x780px, 2x 620px x 380px
  • Banner 3: 2x 635px x 290px, 2x 840px x 290px
  • Banner 4: 1270px x 580px, 2x 635px x 290px,
  • Banner 5: 2x 735px x 390px,
  • Banner 6: 3x 480px x 385px;

• szablon Topaz: Bannery – przy tworzeniu wyglądu szablonu Topaz w Kreatorze wybieramy ułożenie bannerów spośród sześciu opcji: Wygląd Sklepu/Ustawienia/Bannery/kafelki homepage

• • Banner 1: 1255px x 780px, 2x 620px x 380px,
  • Banner 2: 1920px x 680px,
  • Banner 3: 2x 635px x 290px, 2x 840px x 290px
  • Banner 4: 1270px x 580px, 2x 635px x 290px,
  • Banner 5: 2x 735px x 390px,
  • Banner 6: 3x 480px x 385px;

Dodatkowo możliwa jest konfiguracja obrazków w obrębie różnych urządzeń - dodatkowa konfiguracja grafik dla ekranów tabletu i telefonu jest możliwa po kliknięciu w obrazek w ramach edycji konkretnego banneru.

 

Za pomocą ikony plusa jest możliwe dodanie dopasowanych zdjęć względem ekranów różnych urządzeń: W przypadku jeżeli nie ma dodanych wskazanych obrazków dla tabletu czy telefonu, na urządzeniach mobilnych wyświetla się obrazek dodany dla ekranów komputera.

Zalecane rozmiary dla wskazanych bannerów według tego ustawienia prezentują się następująco:

Banner	Ekran komputera	Ekran tabletu	Ekran telefonu
Banner 1	1255px x 780px, 2x 620px x 380px	840px x 520px, 2 x 420px x 255px	3x 770px x 475px
Banner 2	1920px x 680px	1280px x 455px	3x 770px x 275px
Banner 3	635px x 290px, 2x 840px x 290px	545px x 255px, 2x 720px x 255px	770px x 360px, 2x 770px x 275px
Banner 4	1270px x 580px, 2x 635px x 290px	845px x 385px, 2x 425px x 195px	3x 770px x 230px
Banner 5	2x 735px x 390px	2 x 630px x 365px	3x 375px x 200px
Banner 6	3x 480px x 385px	3x 415px x 330px	3x 770px x 615px

• • Rekomendowany rozmiar banneru, który pokazuje się po rozwinięciu kategorii (menuBanner) wynosi
    • • • • • header1: 220×295 px,
            • header2: 220×295 px
            • header3: 1118 x 534 px

konfiguracji można dokonać z poziomu: Wygląd Sklepu/ Ustawienia /Bannery/ menuBanner,

• • Rekomendowany rozmiar banneru, który pokazuje się na stronie Kontakt wynosi: 610px x 605px - Wygląd Sklepu/Ustawienia/Bannery/contactBanner,
  • Rekomendowane rozmiary bannerów, które pokazują się na stronie Lookbook wynoszą: 2x 560px x 630px, 700px x 850px, 1260px x 540px, 630px x 950px - Wygląd Sklepu/Ustawienia/Bannery/lookbook,
  • Rekomendowany rozmiar banneru, który pokazuje się na zakładce Promocje, po otworzeniu sekcji Profil klienta wynosi: 1920px x 680px -  Wygląd Sklepu/Ustawienia/Bannery/ CustomerProfileBanner,
  • Rekomendowany rozmiar zdjęć towaru wynosi: 660px x 630px;

• szablon Bursztyn: 1920 px x 608 px
• szablon Opal:  banner główny: 1840 px x 578 px, mniejsze zdjęcia pod bannerem głównym: 904 px x 487 px
• szablon Agat: rozmiar obrazka dowolny z zachowaniem proporcji 2:1 np. 1200 px x 600 px. W celu zachowania dobrej jakości zdjęcia na ekranach o wysokiej rozdzielczości ekranu, rekomendujemy zdjęcia o rozdzielczości nie mniejszej niż 1140 px x 570 px

Typy bannerów dla szablonów Topaz i Szafir (B2B)

W panelu administracyjnym dodany jest nowy banner o nazwie top, a jego treść brana jest z pola Tekst. Banner pojawia się jako wąski pasek na górze strony. Gdy dodasz adres strony, produktu, promocji lub innego przekierowania w polu Link, po kliknięciu na banner zostanie otworzona odpowiednia strona przypisana do tego banneru. Pamiętaj, aby wprowadzone zmiany zapisać oraz opublikować. W panelu administracyjnym w zakładce Wygląd sklepu/ Ustawienia/ Motyw kolorystyczny znajdują się trzy pola, w których możemy w łatwy sposób zmienić kolory naszego banneru. Pola nazywają się:

Wskazówka

Top banner jest widoczny w e-Sklepie dopiero po dodaniu obrazka. Kolor oraz rodzaj pliku nie ma wpływu na kolor lub wygląd banneru.

Dodatkowo w szablonie Szafir został dodany kolejny banner wyświetlany na stronie głównej. Jeśli jest włączona opcja dostępu do sklepu dla zalogowanych kontrahentów to wówczas ukazuje się tylko ten banner. Jeżeli nie został on skonfigurowany, to wówczas widoczny jest domyślnie standardowy banner główny.

Dodawanie bannerów

Nowy banner możesz dodać z poziomu listy bannerów klikając w kafelek z ikoną plusa w widoku kafelkowym lub klikając w przycisk Dodaj w widoku listy. W pojawiającym się oknie uzupełnij nazwę oraz opis banneru, a także zdjęcia, które będą widoczne w sklepie.

Po dodaniu zdjęcia pojawi się możliwość włączenia widoku zaawansowanego, w którym możesz uzupełnić szczegółowe dane. Długość linku dodawanego do slajdu w bannerze może wynosić maksymalnie 500 znaków.

Wskazówka

Po uzupełnieniu komórki link, dla banneru w szablonie Topaz (w widoku zaawansowanym) – cały baner staje się „klikalny”, to znaczy, że w przypadku kliknięcia na baner zostanie wykonane przekierowanie do określonego wcześniej linku. W przypadku uzupełnienia komórki: link oraz tekst – na bannerze zostanie wyświetlony przycisk Sprawdź.

Banner, który ma się wyświetlać na stronie głównej powinien zostać nazwany homepage. Po uzupełnieniu wszystkich potrzebnych informacji, należy je zatwierdzić przyciskiem Dodaj. Tak przygotowany banner należy następnie zaimplementować w kodzie szablonu. Nowo dodane bannery nie zaimplementowane w kodzie szablonu nie będą widoczne w e-Sklepie, ponieważ w kodzie szablonu istnieją odniesienia do domyślnych bannerów takich jak np. homepage czy promotionalbanners.

Import i eksport bannerów

W e-Sklepie istnieje możliwość importu i eksportu bannerów bez sprawdzania limitu danych. Dzięki temu możesz przenosić ich dużą ilość bez nadmiernego obciążania szablonu.

Aby zaimportować szablon przejdź do panelu administracyjnego, a następnie do sekcji Wygląd sklepu/ Ustawienia/ Więcej (trzy kropki w prawym górnym rogu), po czym przejdź do Edytuj ustawienia zaawansowane/ Import z pliku XML.

Szablon zaimportujesz klikając przycisk Wybierz plik XML. Aby zmienić bannery zaznacz podmień istniejące bannery. Opcja ta zastępuje dotychczasowe bannery widniejące na stronie e-sklepu. Zmiany zatwierdzić opcją Publikuj, dostępną w menu rozwijanym Więcej. Zaimportowane bannery możesz zobaczyć w panelu administracyjnym, przechodząc do Wygląd sklepu/ Ustawienia/ Bannery. 

Eksport bannerów dokonuje się w Panelu Administracyjnym w Wygląd sklepu/ Ustawienia/ Więcej (trzy kropki w prawym górnym rogu)/ Edytuj ustawienia zaawansowane/ Eksport do pliku XML. Tak należy kliknąć w Eksportuj bannery i zostanie pobrany plik XML.

Wskazówka

Dodatkowe informacje na temat wyświetlających się bannerów znajdują się w artykułach:

• • Szablon Szafir
  • Szablon Topaz
  • Szablon Bursztyn
  • Szablon Agat
  • Szablon Opal

 

Wstęp

Z dniem 28 czerwca 2025 roku w życie wejdą przepisy związane z implementacją ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Wdraża ona do polskiego prawa tzw. Europejski Akt o Dostępności (EAA) – unijną dyrektywę 2019/882. Celem ustawy jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.

Wskazówka

Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami

W niniejszym artykule wskazujemy, jakie czynności należy wykonać, jeśli posiadasz jeden ze standardowych szablonów Comarch, czyli: Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii.   

Sprawdź, jaki szablon posiadasz

Nie wiesz, który szablon posiadasz? Możesz to sprawdzić w panelu administracyjnym Comarch e-Sklep. Aby to zrobić, z poziomu panelu administracyjnego przejdź do zakładki Wygląd sklepu/ Ustawienia a następnie, pod przyciskiem "Więcej" wybierz Edytuj ustawienia zaawansowane. W obszarze, który został wyświetlony, pojawi się kilka zakładek, a wśród nich zakładka "Szablon". Wybierz ją, po czym sprawdź szablon:   Jeśli Twój szablon to Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, to możesz przejść do kolejnej części artykułu. Jeśli posiadasz własny szablon z indywidualnymi modyfikacjami, to przejdź do artykułu: Posiadam własny szablon, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?  Jeśli posiadasz szablon Bursztyn, Agat lub Opal, to przejdź do artykułu: Posiadam szablon Bursztyn, Opal lub Agat, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?  

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jeśli korzystasz z gotowych szablonów, takich jak Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, nie musisz przejmować się samodzielnym edytowaniem ich kodu. Wszystkie usprawnienia zostaną udostępnione wraz z aktualizacją, która pojawi się w czerwcu 2025 roku.

Wskazówka

Aktualizację szablonu wykonaj wtedy, kiedy będzie ona dostępna. Realizacja wersji 2025.4 przewidywana jest przed 28 czerwca 2025 roku, poinformujemy o niej w aktualnościach. Będzie ona zawierała zmiany związane z omawianymi tutaj przepisami.

Jak zaktualizować szablon?

Aby zaktualizować szablon i przejść na Topaz, One Page Shop, Dla Gastronomii, Rubin lub Szafir, należy skorzystać z aktualnej wersji Kreatora Wyglądu. Pamiętaj, że szablony Rubin i Szafir przeznaczone są tylko dla sklepów Enterprise i B2B. Odnośnik znajduje się również w panelu administracyjnym e-Sklepu w sekcji Wygląd sklepu > Kreator wyglądu.  Istnieją trzy możliwości aktualizacji tych szablonów: Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.

Wskazówka

Informacje na temat aktualizacji znajdują się w Centrum Pomocy: Jak zaktualizować szablon do najnowszej wersji?  

Więcej informacji na temat Kreatora Wyglądu B2C oraz B2B znajduje się w Centrum Pomocy:

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Jednym z głównych wymogów WCAG jest stosowanie odpowiednich kontrastów na stronach internetowych. Jeśli w wybranym szablonie graficznym wykorzystujesz któryś ze standardowych motywów kolorystycznych dostępnych w kreatorach, to zostaną one dostosowane do wymagań wynikających z przepisów. Jeśli natomiast masz przygotowany własny motyw kolorystyczny lub chcesz zmienić część kolorów zastosowanych w szablonie, to pamiętaj, że muszą one posiadać odpowiednie kontrasty. Wszelkich zmian kolorystycznych możesz dokonać w Kreatorze Wyglądu.  Odpowiedni kontrast między tekstem a tłem jest kluczowy dla osób z dysfunkcjami wzroku. WCAG 2.1 określa minimalny współczynnik kontrastu (4.5:1 dla tekstu zwykłego i 3:1 dla tekstu dużego). Ważne jest również unikanie łączenia kolorów, które mogą być trudne do rozróżnienia, takich jak czerwony i zielony. Kontrasty po modyfikacji kolorów możesz sprawdzić np. narzędziem WAVE. WAVE to popularny, dostępny dla wszystkich zestaw narzędzi do oceny dostępności stron internetowych. Rozszerzenia WAVE dla Chrome, Firefox i Edge, umożliwiają testowanie bezpośrednio w tych przeglądarkach, bez przesyłania danych na serwer WAVE. WAVE znajdziesz pod linkiem: WAVE Web Accessibility Evaluation Tools.  

Jak sprawdzić kontrast?

Przejdź na stronę swojego e-Sklepu. Włącz wtyczkę WAVE. Po prawej stronie ekranu wyświetli się panel boczny, na pierwszej zakładce widać podsumowanie całej strony: Już na tym etapie możesz przejść do szczegółów, klikając "View details". Możesz w tym miejscu przejść także do zakładki "Contrast".   Czerwone kwadraty oznaczają obszar do poprawy. Przejdź przez stronę, aby zobaczyć szczegóły każdego z nich. Po kliknięciu na jeden z kwadratów pokaże się komunikat dotyczący kontrastu: W panelu bocznym pojawi się dokładna informacja na temat koloru. W tym miejscu, korzystając z suwaków możesz od razu dostosować kolor tak, aby był odpowiedni i sprawdzić, czy spełnia wymagania WCAG.  

Gdzie dostosować kolory?

Kolory w szablonie możesz zmienić korzystając z Kreatora Wyglądu. Po imporcie szablonu, edycji lub stworzeniu nowego projektu, przejdź do zakładki "Style" i edytuj motyw kolorystyczny:   Następnie możesz zmieniać swobodnie kolor na wybranych elementach:   Zmian możesz dokonać także z poziomu panelu administracyjnego, przechodząc do zakładki Wygląd Sklepu > Ustawienia.

Pozostałe zmiany

Poza zmianami w szablonie graficznym sklepu należy uzupełnić szereg danych. Znaczącą część tych elementów możesz wykonać już teraz, nie czekając na aktualizację Comarch e-Sklep. Poniżej znajduje się lista zmian, które należy wdrożyć w swoim e-Sklepie.

Teksty alternatywne ("Alt", alty) w Comarch e-Sklep

Twój szablon musi obsługiwać parametr "alt" w obrazkach. Jeśli wykorzystasz aktualny szablon standardowy od Comarch to obsługę zapewnia Comarch e-Sklep, jeśli zdecydowałeś się na indywidualny szablon lub samodzielną aktualizację starszej wersji to upewnij się, że w szablonie są obsługiwane parametry "alt" we wskazanych elementach. Teksty alternatywne („alt”) to krótkie opisy obrazków, które pozwalają osobom korzystającym z czytników ekranu zrozumieć, co znajduje się na zdjęciu. Atrybut „alt” jest szczególnie ważny dla zdjęć produktów, ponieważ umożliwia przekazanie najważniejszych informacji o produktach.  Dlaczego tekst alternatywny jest taki ważny?  Dobrze sformułowany opis powinien być zwięzły, ale wystarczająco informacyjny. Poniżej prezentujemy przykłady dobrego i złego zastosowania opisów alternatywnych:

Przyklad

Poprawne :

• Czerwona sukienka maxi z rozcięciem, modelka na tle miejskiego pejzażu.
• Białe sneakersy z grubą podeszwą, ustawione na drewnianej podłodze.
• Nowoczesna sofa w kolorze szarym, z drewnianymi nogami, ustawiona w minimalistycznym salonie.
• Słuchawki bezprzewodowe z aktywną redukcją szumów, na białym tle.

Niepoprawne:

• Sukienka.
• Buty sportowe.
• Fajna kanapa.
• Najlepszy sprzęt w dobrej cenie!

Gdzie należy uzupełnić teksty alternatywne (alt)?

1. Dla zdjęć towarów w systemach Comarch ERP

Korzystam z Comarch ERP Optima

Po uruchomieniu Comarch ERP Optima przejdź na pozycję cennika, a następnie edytuj wybrany towar. Następnie przejdź na zakładkę "Atrybuty", a następnie do sekcji "Zdjęcia i załączniki". W tym miejscu zobaczysz kolumnę "Atrybut Alt". Po dwukrotnym kliknięciu możliwe jest uzupełnienie opisu alternatywnego: Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.

Korzystam z Comarch ERP XL

Po uruchomieniu ERP XL przejdź do Sprzedaż > Towary , a następnie na zakładkę "Załączniki". Opis alternatywny dla towaru stanowi Kod:    

Korzystam z Comarch ERP XT

Przejdź na kartę produktu, a następnie do zakładki "Zdjęcia". Wśród pól do uzupełnienia znajdziesz "Opis alternatywny (Alt)".   W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.  

2. Dla zdjęć w bannerach – w panelu administracyjnym Comarch e-Sklep

Pamiętaj, alby alty (opisy alternatywne) były uzupełnione także w przypadku bannerów. Aby to zrobić, przejdź z poziomu panelu administracyjnego do Wygląd sklepu > Ustawienia > Bannery  do edycji swoich bannerów. Klikając na odpowiedni kafelek pojawią się opcje z uzupełnieniem Alt:

3. Dla zdjęć stosowanych na stronach z treściami formalnymi – w panelu administracyjnym Comarch e-Sklep

Obrazki możesz dodawać także do treści, które udostępniasz na specjalnych stronach, takich jak np. Regulamin sklepu, Polityka prywatności, Wysyłka itp. W obszarze do edycji, który jest dostępny z poziomu panelu administracyjnego w sekcji Ustawienia > Treści formalne edytuj interesującą Cię treść, a dodając obrazek uzupełnij alt:    

4. Dla zdjęć wprowadzonych w opisie towaru i opisie kategorii

Dodając opisy produktów i kategorii, warto upewnić się, że linkowane zdjęcia zawierają poprawnie uzupełniony atrybut "alt". To kluczowe dla osób korzystających z czytników ekranu. Dbałość o ten detal poprawia dostępność strony i zwiększa jej widoczność w sieci. Opis towaru i kategorii możesz dodać w systemach Comarch ERP.  Opis kategorii możesz ustawić również z poziomu panelu administracyjnego, bez konieczności korzystania z systemu ERP. Szczegółowe informacje znajdują się w artykule: Jak edytować kategorię w Comarch e-Sklep? 

5. Dla zdjęć w Blogu

Obrazki, które dodawane są dla wpisów blogowych od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego Comarch e-Sklep do sekcji Marketing > Blog przy dodawaniu wpisu:

6. Dla zdjęć w plikach użytkownika w sekcji "Twoje pliki"

Pliki użytkownika w e-Sklepie to dedykowana przestrzeń do przechowywania własnych materiałów, które mogą zostać wykorzystane w sklepie internetowym. Pliki można przesyłać za pośrednictwem panelu administracyjnego, w sekcji Ustawienia > Twoje pliki. Maksymalny rozmiar pojedynczego pliku: 3 MB. Pliki, które dodawane są we wspomnianym obszarze, od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego do sekcji Ustawienia > Twoje pliki przy edycji pliku lub jego dodaniu.

Wskazówka

Jeśli posiadasz sklep wielojęzyczny, to we wszystkich tych wymienionych powyżej obszarach, znajdują się również obrazki dla danego języka. Pamiętaj, alby atrybut ALT zdefiniować dla każdego z nich!

 

Atrybut title - obowiązkowy czy nie?

Atrybut title jest przydatny do przekazywania dodatkowych informacji o elementach HTML, widocznych jako podpowiedź po najechaniu kursorem. Może być używany w ikonach bez podpisu, formularzach czy linkach, aby dostarczyć kontekst. Nie jest jednak obowiązkowy według WCAG, ponieważ czytniki ekranu często go ignorują, a osoby nawigujące klawiaturą mogą nie mieć do niego dostępu.  

Zalecenia dla udostępnianych treści - ogranicz migające elementy

Jako właściciel sklepu musisz sam zadbać o to, jakie treści umieszczasz na swojej stronie. Migające elementy, takie jak animacje czy reklamy, mogą wywoływać problemy u osób z padaczką fotogenną. Według kryteriów WCAG 2.1 zalecane jest ograniczenie migających treści do maksymalnie trzech błysków na sekundę lub ich całkowite usunięcie. Jako właściciel sklepu musisz dbać o statyczne elementy lub spokojne animacje. Również treści zawarte w różnego typu prospektach, gazetkach czy folderach informacyjnych w formie dokumentów powinny być zgodne z wytycznymi WCAG.

1.Obrazki i bannery

W szablonach graficznych takie elementy mogą pojawić się na przykład w bannerach i elementach tekstowych ze zdjęciem. Upewnij się, że grafiki tam zamieszczone są odpowiednie, czyli bez intensywnych animacji i nieodpowiednich kolorów. Szczególną uwagę zwróć na pliki w formacie GIF. Sprawdź, w jaki sposób możesz skonfigurować bannery oraz elementy tekstowe ze zdjęciem.  

2.Materiały audio i viedo

Aby sklep internetowy był w pełni dostępny zgodnie z WCAG, właściciele muszą zadbać o dodanie audiodeskrypcji i transkrypcji do materiałów multimedialnych (filmy, nagrania dźwiękowe). Choć oba rozwiązania służą poprawie dostępności, mają różne funkcje. Dodanie tych elementów leży po stronie właścicieli sklepów. Do filmów, które udostępniasz, dodaj zatem widoczne napisy, a także dobrej jakości opis dźwiękowy. Ich brak może wykluczyć część użytkowników i wpłynąć na komfort korzystania ze strony. Dobre praktyki dostępności to nie tylko wymóg, ale też inwestycja w lepsze doświadczenie klientów.

Dostosuj komunikację mailową - aktualizacja lub zmiana treści e-mail

Dostosowanie treści e-mail zgodnie z wytycznymi WCAG to kluczowy krok w budowaniu dostępnej i klarownej komunikacji. W tej części artykułu przedstawiamy rozwiązania zarówno dla domyślnych wiadomości, jak i tych modyfikowanych, aby zapewnić ich lepszą czytelność i dostępność dla wszystkich odbiorców.

1.Treści mailowe są domyślne, nie zostały sformatowane

Jeśli treści nie zostały przez Ciebie zmienione i stanowią domyślne treści, które są dostępne w Comarch e-Sklep, to wystarczy, że zaktualizujesz je. Aby to zrobić, należy przejść w panelu administracyjnym do zakładki Ustawienia > Treści formalne, a następnie wybrać „Wysyłka e-mail i SMS”. Zakładka ta zawiera treści wiadomości wysyłane do klientów po wykonaniu określonych akcji, np. po zakupie czy rejestracji. W Comarch e-Sklep istnieje możliwość przywrócenia standardowej treści pojedynczej wiadomości e-mail lub wszystkich jednocześnie. Opcja ta stanowi również aktualizację treści e-mail. "Przywróć domyślną treść" dostępna jest w panelu administracyjnym e-Sklepu w menu Ustawienia/ Treści formalne/ Wysyłka e-mail i SMS na szczegółach każdej wiadomości, po kliknięciu w przycisk Więcej:  

2.Treści mailowe są modyfikowane, zostały przeze mnie zmienione

Jeśli posiadasz własne, dostosowane do Twojej komunikacji marketingowej treści e-mail, to sprawdź, czy są one odpowiednio napisane i sformatowane. Zastosuj się do poniższych wskazówek. W jaki sposób poprawnie napisać i sformatować treści? Szczegółowe informacje na temat edycji treści e-mail znajdują się a artykule: E-mail i SMS  

3.Załączniki (m.in. instrukcje, katalogi)

Należy zadbać o to, aby wszystkie udostępniane w sklepie załączniki, takie jak instrukcje czy katalogi, były zgodne z wytycznymi WCAG, zapewniając tym samym ich pełną dostępność dla wszystkich użytkowników.  

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Przystosowanie e-Sklepu do wymogów nie musi wiązać się z dużymi wydatkami na zmiany w kodzie. Kluczowe aspekty dostępności można wdrożyć samodzielnie, wykorzystując opcje dostępne w systemach Comarch ERP, a także Kreatorze Wyglądu czy Panelu Administracyjnym. Warto pamiętać, że poprawa dostępności to nie tylko obowiązek wynikający z przepisów, ale także realna szansa na zwiększenie grona klientów oraz podniesienie komfortu ich zakupów. Istnieje kilka ogólnodostępnych narzędzi, które pomogą Ci dostosować sklep do wymogów. Obszerna lista narzędzi do oceny dostępności stron internetowych, zgodnych z WCAG znajduje się na stronie: Web Accessibility Evaluation Tools List .  

Podsumowanie

Dostępność cyfrowa to nie jednorazowe przedsięwzięcie, lecz ciągły rozwój i udoskonalanie. Regularne sprawdzanie funkcjonalności, optymalizacja elementów wizualnych i dostosowywanie sposobów interakcji pozwalają na stałe podnoszenie jakości doświadczeń użytkowników. Dążenie do pełnej zgodności ze standardami WCAG 2.1/2.2 oraz wymogami Europejskiego Aktu o Dostępności (EAA) nie tylko ułatwia nawigację wszystkim odwiedzającym, ale także buduje pozytywny wizerunek i wzmacnia pozycję na rynku. Wdrażanie kolejnych usprawnień to inwestycja w przyszłość, która przynosi korzyści zarówno właścicielom, jak i ich klientom.