Szablon grafiznn do sklepu Shoper Instrukija obsługi funkiji speijalnnih

Transkrypt

1 Szablon grafiznn do sklepu Shoper Instrukija obsługi funkiji speijalnnih wersja instrukiji 4

2 Spis treści Wstęp...3 Warstwa Umbrella...4 Elementy wyświetlane za pomocą warstwy Umbrella...4 Koszyk nagłówka...4 Wyszukiwarka...4 Logowanie... 5 Waluty/Języki...6 Darmowa dostawa...6 Inne zmiany w standardowych elementach Shoper...7 Menu kurtynowe...7 Moduł menu...9 Dodatkowe rozszerzenia przez Front API...10 Promocje i nowości w menu głównym...10 Kontakt w nagłówku...11 Kontakt w stopce...11 Karuzela zdjęć w kafelku produktu...11 Moduły dedykowane...12 Instalacja Wymiana zdjęć...14 Strefy pełnoekranowe...14 Kafelki O sklepie Mapa google...15 Inne informacje...15 Kolory szablonu i czcionki...15 Logo i favicon...16 Kontener zdjęcia produktu...16 Tło szablonu...17 Slider (suwak)...17 Strona 2 / 19

3 Wstęp Szablon Umbrella 1.x dla platformy Shoper jest oparty o standardowy szablon RWD Shoper dla lepszej kompatybilności. Możliwość ustawiania i konfguracji modułów na poszczególnych stronach sklepu jest standardowa i przy ich konfguracji należy korzystać z instrukcji obsługi dostępnych na stronie producenta Shoper. Poniższa instrukcja objaśnia charakterystyczne dla Umbrelli 1.x funkcje, które nie są dostępne w standardowym szablonie RWD Shoper lub zmieniają ich działanie. Aktualne informacje o szablonie znajdziesz na stronie: Uwaga 1 Przed dokonaniem jakichkolwiek zmian w modułach predefniowanych, zalecamy skopiować wcześniej kod html modułu do pliku na lokalnym dysku. W przypadku problemów ułatwi to przywrócenie zawartości. Kod html widoczny jest po wyłączeniu edytora. Uwaga 2 Nie zalecamy wykonywać innych czynności niż opisane poniżej w zakresie edycji treści modułów. Strona 3 / 19

4 Warstwa Umbrella Szablon posiada autorski mechanizm generowania warstw które nakładane są na zawartość sklepu. Za ich pomocą można wyświetlić standardowe elementy skórki w niekonwencjonalny sposób zwiększając przy tym ich przejrzystość oraz atrakcyjność. Warstwy posłużyły również do zbudowania menu mobilnego wzbogaconego o dodatkowe elementy. Elementy wyświetlane za pomocą warstwy Umbrella Koszyk nagłówka Jeżeli do koszyka zostanie dodany produkt, wówczas aktywuje to ikonę w nagłówku i oznaczy ja liczbą dodanych produktów. Kliknięcie w ikonę spowoduje wyświetlenie warstwy z listą zakupów. Zdjęcia asortymentu będą większe niż w standardzie a produkty będą ułożone wierszami. Wyszukiwarka Jeżeli okno przeglądarki jest węższe niż 980px to formularz wyszukiwania zostanie wyświetlony w warstwie. W przeciwnym wypadku formularz wyświetlany jest w miejscu ikony w nagłówku. Strona 4 / 19

5 Logowanie Warstwa logowania może wyświetlić bezpośrednio formularz jeśli w konfguracji widoków zostanie użyty moduł Logowanie. Moduł musi być aktywny we wszystkich aktywnych typach ekranów aby zachować spójność wyświetlania. W przypadku jego braku warstwa wyświetli standardowe linki logowania i rejestracji. Jeśli użytkownik zostanie zalogowany to moduł zostanie rozszerzony w ramach funkcjonalności naszego szablonu. Po za linkiem Moje konto oraz wyloguj użytkownik zobaczy edytuj profl, zmień hasło, edytuj adresy. Strona 5 / 19

6 Waluty/Języki Jeśli w konfguracji ekranu zostanie użyty moduł Waluty i/lub Języki to w nagłówku pojawią się odpowiadające im ikony. Ich zawartość będzie zmieniana na podstawie bieżących ustawień. Moduł musi być aktywny we wszystkich aktywnych typach ekranów aby zachować spójność wyświetlania. Darmowa dostawa Standardowy moduł Darmowej dostawy został połączony z funkcjonalnością koszyka w nagłówku. Szablon wyświetla informacje generowane przez ten moduł w podglądzie koszyka. Aby informacja została umieszczona w warstwie należy aktywować moduł Darmowa dostawa w konfguracji ekranów. Strona 6 / 19

7 Inne zmiany w standardowych elementach Shoper Menu kurtynowe Menu kurtynowe jest nakładką na zawartość menu głównego które można skonfgurować za pomocą standardowych funkcjonalności Shoper. Kategorie prezentowane w kurtynie są ułożone w formie kolumn o maksymalnie 3 stopniu zagnieżdżenia. W wersji standardowej szablonu, 3 poziom jest wyrównywany do 3 widocznych opcji a jeśli znajduje się w nim więcej kategorii wówczas zostaje wyświetlony przycisk więcej. Strona 7 / 19

8 Jeżeli zawartość kurtyny jest mocno rozbudowana i nie mieści się w oknie widoczności wtedy zostaje wyświetlony scrollbar umożliwiający przewijanie. Strona 8 / 19

9 Moduł menu Szablon rozszerza standardową funkcjonalność modułu o wyświetlenie podkategorii. Po najechaniu na nazwę kategorii zostanie wyświetlona lista jej podkategorii w kierunku kolumny środkowej. Dla optymalnej prezentacji treści, przy rozdzielczości powyżej 980px szerokości ekranu, ukryto kategorie umieszczone głębiej niż 4 poziom zagnieżdżenia. Poniżej tego progu (widok mobilny) kategorie są rozsuwane w dół bez ograniczenia zagnieżdżenia. Strona 9 / 19

10 Dodatkowe rozszerzenia przez Front API Dla poprawnego działania poniższych funkcjonalności wymagana jest poprawna obsługa Front API przez serwer z którego korzystasz. Promocje i nowości w menu głównym Jeżeli do zawartości menu zostanie dodany link nowości i/lub promocji oraz w sklepie znajdują się odpowiadające im produkty to funkcjonalność menu zostanie zwiększona o ich wyświetlanie. Do opcji Nowości i/lub Promocje na froncie zostaną doładowane 4 pierwsze produkty z odpowiadającej im listy. Strona 10 / 19

11 Kontakt w nagłówku Szablon domyślnie umieszcza numer telefonu oraz adres obok logotypu w nagłówku. Elementy generowane są na podstawie informacji ustawionych w sekcji Dane frmy ustawień podstawowych. Telefon oraz są klikalne. Kontakt w stopce Stopka, podobnie jak nagłówek, jest rozszerzona o sekcję informacji kontaktowych i są one generowane również na podstawie danych frmy. Dodatkowo jednak wyświetlana jest nazwa frmy oraz adres. Karuzela zdjęć w kafelku produktu W momencie najechania kursorem na kafelek doładowywane są zdjęcia galerii produktu i zaczynają się automatycznie zmieniać się co ok. 3sek do momentu opuszczenia kafelka przez kursor. Funkcjonalność ta jest zaimplementowana na liście produktów (w obu trybach)oraz w standardowych modułach produktowych Shoper: Promocje, Nowości, Bestsellery, Produkt dnia, ostatnio oglądane. Strona 11 / 19

12 Moduły dedykowane Instalacja Moduły dedykowane opierają się na standardowej funkcjonalności moduł użytkownika Shopera. Wszystkie z nich instaluje się w niemal ten sam sposób. Wszelkie różnice opisane będą w poszczególnych sekcjach. Aby zainstalować moduł dedykowany należy przejść do edycji stylu grafcznego a następnie: 1. Załadować standardowe obrazy dla treści wysiwyg. Znajdują się one w paczce instalacyjnej w folderze content/wysiwyg_gfx. Można to zrobić w zakładce stopka używając narzędzia Wstaw/edytuj obrazek. Po wyświetleniu okna edycyjnego należy uruchomić manager plików i za jego pomocą wgrać pliki do folderu images/webcoders_d02. Jeśli folder nie istnieje należy go utworzyć. Gdy upload plików zostanie zakończony należy wyłączyć manager plików. Strona 12 / 19

13 Uwaga: ten krok wystarczy wykonać tylko przy instalacji pierwszego modułu. 2. Kolejnym krokiem jest utworzenie modułu użytkownika. W tym celu przejdź do zakładki Moduły i użyj opcji Moduł użytkownika 3. Formularz edycyjny należy wypełnić następująco: a) Tytuł orientacyjna nazwa modułu, możesz wpisać dowolną nazwę b) Obramowanie ustawienie na tak spowoduje wyświetlenie nazwy modułu. W większości przypadków zalecamy wyłączać tę opcję. c) Html ID należy tu wpisać nazwę pliku html (bez rozszerzenia.html) odpowiadającą modułowi który instalujesz. Pliki znajdują się w paczce instalacyjnej w folderze content/modules/. Są to: box_wce_fullscreen-area-1.html pełnoekranowa strefa dla polecanych box_wce_fullscreen-area-2.html pełnoekranowa strefa dla bestsellerów box_wce_fullscreen-area-3.html pełnoekranowa strefa dla produktów dnia box_wce_tiles.html kafelki (Układ 1) box_wce_tiles-rev-.html kafelki (Układ 2) box_wce_about-half-.html O sklepie box_wce_googlemap.html moduł mapy google d) Tryb w większości jako html, dla mapy google tekst e) Treść html należy wyłączyć edytor i wkleić zawartość pliku który odpowiada aktualnie instalowanemu modułowi. 4. Po dokonaniu zmian należy zapisać moduł. Strona 13 / 19

14 Wymiana zdjęć Wymiana wszelkich zdjęć oraz zmiana linków przekierowujących w modułach przebiega w ten sam sposób. Poniższe kroki możesz zastosować dla Strefa pełnoekranowa oraz Kafelki. W edycji modułu: 1. Kliknij na obrazek do wymiany (zostanie zaznaczony ramką) 2. Wybierz narzędzie Wstaw/edytuj obrazek 3. Korzystając z managera plików wybierz plik który chcesz wyświetlić i zatwierdź przyciskiem ok. 4. Wybierz narzędzie Wstaw/edytuj łącze 5. W polu URL wpisz adres na który zostanie przekierowany użytkownik po kliknięciu. Zatwierdź przyciskiem ok. 6. Zapisz zmiany Strefy pełnoekranowe Moduł umożliwia efektowną prezentację krótkich treści na tle z efektem parallax. Po stronie frontendu poszczególne elementy są nałożone na siebie tworząc kompozycję wyśrodkowaną w pionie i poziomie. Najniżej znajduje się tło które można wymienić wg instrukcji Wymiana zdjęć. Następnie nakładany jest delikatny efekt przyciemnienia w postaci transparentnego gradientu radialnego. Zabieg ten ma na celu zachowanie widoczności białego tekstu który jest na pierwszym planie. Zalecane wymiary baneru dla tego modułu to 1920x1200px. Specyfka modułu wymaga aby grafka wypełniała cały jego obszar który przyjmuje wymiary okna przeglądarki. Aby to osiągnąć załadowana grafka jest kadrowana lub rozciągana względem centrum modułu tak aby przykryć cały obszar. Z tego powodu zalecamy aby tzw. sedno obrazu skupiało się w jego centrum ponieważ zewnętrzne obszary mogą być niewidoczne. Strefa może być powielana. Aby to zrobić należy utworzyć moduł użytkownika wg instrukcji powyżej a w polu html ID wpisać nazwę składającą się z box_wce_fullscreen-area- i swojej nazwy bez spacji i polskich znaków, np. box_wce_fullscreen-area-nowy. Wartość html ID musi być unikalna dla poprawnej walidacji html frontu. Strona 14 / 19

15 Kafelki Moduł umożliwia wyświetlenie 3 klikalnych banerów wraz z podpisami które są generowane na podstawie atrybutów title linku oraz alt obrazka. Zalecane wymiary dla banerów to 470x940px (o orientacji horyzontalnej) oraz 470x470px (kwadratowe). Moduł może być powielany dlatego można z niego zbudować siatkę o dowolnej wysokości. Sposób powielania jest analogiczny jak w przypadku pełnoekranowej strefy. O sklepie Jest to prosty moduł informacyjny. Można w nim zamieścić dowolną treść. Nie zalecamy umieszczać zbyt dużej ilości tekstu, dużych obrazków oraz tabelek. Jako jedyny z modułów predefnowanych powinien mieć włączone obramowanie. Mapa google Moduł przystosowany do wyświetlania mapy google. Konfgurując go należy pamiętać aby pole typ treści ustawić na tekst. W pole tekstowe należy wkleić kod wygenerowanej mapy. Jak wygenerować mapę google? Inne informacje Kolory szablonu i czcionki Kolory można ustawić korzystając ze standardowego narzędzia Shoper Edytor stylu. Najważniejsze elementy, których można zmienić kolor i standardowa paleta barw szablonu Umbrella: Kolor stopki, nagłówków modułów w kolumnach, generowanie koloru linków Ustawienie Shoper Kolor tła : #55646d Kolor przycisków, akcenty, podświetlenia w menu mobilnym Ustawienie Shoper Kolor główny : #ee881a Strona 15 / 19

16 Kolor tekstu, ikony w nagłówku, menu, nagłówki modułów w środkowej kolumnie Ustawienie Shoper Kolor fontów : # Kolor podświetlenia odnośników Ustawienie Shoper Kolor linków : #1993a7 Inne ustawienia edytora (czcionki, wielkości, etc) nie są brane pod uwagę przez Szablon. Logo i favicon W szablonie Umbrella został zastosowany mechanizm który może wyświetlać favicon w miejscu loga dla małych ekranów gdy spełnione są poniższe warunki: szerokość ekranu jest mniejsza niż 481px; favicon jest załadowany do skórki (domyślna funkcjonalność zarządzania stylem w Shoper); grafka faviconu ma rozmiary większe niż 32x32px. Jeżeli jeden z powyższych warunków nie będzie spełniony, wówczas będzie wyświetlane tylko logo. Mechanizm ma na celu zmaksymalizowanie wolnej przestrzeni w mobilnym nagłówku. Dla optymalnej prezentacji zalecamy aby grafka faviconu była kwadratem a jej zawartość powinna stanowić skróconą wersję logo (np. sam piktogram). Grafka loga domyślnie jest wyświetlana w kontenerze o maksymalnych wymiarach 200x200px. Kontener zdjęcia produktu W szablonie zastosowano w pełni skalowane kontenery na zdjęcia produktu: w trybie galerii; Strona 16 / 19

17 dla zdjęcia głównego na karcie produktu; w modułach produktowych (bestsellery, promocje, nowości, produkt dnia, ostatnio oglądane, powiązane na karcie produktu); w koszyku nagłówka; w promocjach i nowościach menu głównego. Kontenery te niezależnie od szerokości okna zawsze będą kwadratowe. Tło szablonu Szablon umożliwia wstawienie własnej grafki w tło sklepu. Domyślnie grafka jest wyrównana do górnej krawędzi i wyśrodkowana na białym kolorze. Zalecane wymiary grafki dla rozdzielczości fullhd to 1920x1080px. Należy przy tym pamiętać że grafka o takich rozmiarach będzie przycinana na mniejszych ekranach względem puntu wyśrodkowania. Szablon ogranicza możliwość ustawienia tła w nagłówku standardową funkcję Shoper. Slider (suwak) W szablonie można umieszczać slidery korzystając ze standardowego modułu Slider (suwak). W celu najlepszej prezentacji grafk w sliderze należy posługiwać się poniższymi wytycznymi: Podczas projektowania grafk do slidera należy przyjąć rozdzielczość ekranu 1920 px (najwyższa powszechnie używana rozdzielczość). W zależności od tego gdzie slider będzie umiejscowiony na stronie sklepu należy tworzyć grafki o szerokościach opisanych na diagramie poniżej - wartość max sz.. Wysokość jest dowolna. Wszystkie grafki w tym samym sliderze muszą mieć taką samą szerokość i taką samą wysokość. Strona 17 / 19

18 Przy dodawaniu slidera, w edycji modułu, należy wpisać w polu Stała wysokość, wysokość przygotowanej grafki. Następnie gdy dodajemy grafkę do slidera należy umieścić grafkę w sekcji Tło. Jeżeli konieczne jest dodanie grafki przy użyciu sekcji Dodaj zdjęcie wówczas należy przygotować drugą pustą (np. całą białą) grafkę o identycznych wymiarach co pierwsza i umieścić tą ją w sekcji Tło. Strona 18 / 19

19 Dziękujemy za zakup i korzystanie z naszego oprogramowania. Jeśli chciał(a)byś podzielić się z nami swoją opinią napisz do nas: info@shopgadget.eu. Nieprawidłowości w działaniu szablonu możesz zgłosić na adres: pomoc@shopgadget.eu Sprawdź również nasze inne aplikacje i szablony na Właścicielem marki Shoper jest frma DreamCommerce S.A. Właścicielem marki ShopGadget jest frma WebCoders.eu Sp. z o.o. Umbrella - Szablon do sklepu Shoper. Instrukcja obsługi funkcji specjalnych Wszelkie prawa zastrzeżone 2018 WebCoders.eu Sp. z o.o. Strona 19 / 19