Bloki sklepu w kreatorze stron

Pełna lista bloków, z których składa się sklep internetowy: nagłówek z koszykiem, katalog z filtrami, strona produktu, koszyk, kasa, lista życzeń, porównanie, panel klienta — oraz co konfiguruje każde pole.

Gdy w kreatorze stron wybrany jest szablon sklepu, strony składają się z oddzielnych bloków commerce — każdy odpowiada za swoją część: nagłówek, katalog, kartę produktu, koszyk itp. Ten artykuł to przewodnik po każdym z nich.

Blok Shop Navbar — nagłówek strony z logo, menu, koszykiem, kontem i listą życzeń (wishlist).

Pola konfiguracji:

Shop Name / Logo — nazwa i logo; jeśli logo nie jest załadowane, wyświetlana jest nazwa tekstowa;
Menu links — From page tree (auto) (Z drzewa stron (auto)) automatycznie tworzy menu ze stron oznaczonych jako "pokaż w nawigacji" (prostsze i nie zapomni się o aktualizacji przy dodawaniu strony), lub Manual list (Lista ręczna) — własna lista pozycji menu z dowolnymi adresami URL;
Show language switcher (Pokaż przełącznik języków) — przełącznik języków, jeśli strona jest wielojęzyczna;
Cart icon opens (Ikona koszyka otwiera) — kliknięcie ikony koszyka otwiera panel boczny (mini-koszyk) zamiast przechodzenia na osobną stronę koszyka;
wyświetlanie ikon konta i listy życzeń (wishlist) oraz adresów URL, do których prowadzą.

Menu strony (pozycje, podpozycje) edytuje się oddzielnie za pomocą Menu Builder — zob. Nawigacja i menu (strona opisuje stary kreator, ale sama zasada budowania drzewa menu jest taka sama; dla nowego Site Builder drzewo stron z oznaczeniem "pokaż w nawigacji" to najprostszy sposób).

Główny baner — Shop Hero

Duży baner na górze strony głównej: tytuł, podtytuł, obraz tła i opcjonalnie pasek wyszukiwania z adresem URL strony wyników.

Siatka kategorii — Shop Category Grid

Siatka kart kategorii produktów (automatycznie pobieranych z katalogu) z opcjonalnym tytułem sekcji.

Katalog produktów — Shop Catalog

Największy i najważniejszy blok — pełnoprawna strona katalogu z filtrami, wyszukiwaniem i paginacją.

Pola konfiguracji:

Card style (Styl karty) — Classic / Tech / Luxury, trzy gotowe wyglądy karty produktu;
Products per page (Produktów na stronę) — rozmiar strony paginacji;
Show filter sidebar (Pokaż pasek boczny filtrów) — włącza/wyłącza cały boczny panel filtrów;
Search box in sidebar (Pole wyszukiwania w pasku bocznym), Price filter (Filtr ceny), Brand filter (Filtr marki) (z rzeczywistych produktów), Spec filters (Filtry specyfikacji) (z visible_filters kategorii — zob. Katalog produktów);
Condition/grade badge on cards (Odznaka stanu/klasy na kartach) — odznaka stanu produktu (nowy/używany/odnowiony), istotne dla elektroniki;
Card spec keys (Klucze specyfikacji karty) — jakie cechy wyświetlać jako etykiety bezpośrednio na karcie (np. CPU, RAM, Dysk);
Product comparison (Porównanie produktów) + Compare page URL (URL strony porównania) — włącza przycisk "porównaj" na kartach;
Wishlist heart button on cards (Przycisk serca listy życzeń na kartach) — serduszko "dodaj do ulubionych";
Smart collection slug (Slug inteligentnej kolekcji) — ogranicza katalog do wcześniej skonfigurowanej inteligentnej kolekcji zamiast wyświetlania całego asortymentu; pusta wartość = pokaż wszystko (z uwzględnieniem innych filtrów).

Wyszukiwanie w katalogu jest tolerancyjne na literówki — nawet jeśli klient wprowadzi nazwę produktu z błędem, odpowiednie dopasowania zostaną znalezione.

Wybrane produkty — Shop Featured Products

Ręczny lub automatyczny wybór produktów (oznaczonych jako "featured" — zob. Panel Products w kreatorze) z tytułem, podtytułem, liczbą kart i stylem.

Strona produktu

Składa się z kilku oddzielnych bloków, które można ułożyć w dowolnej kolejności:

Shop Product Gallery (Galeria produktu sklepu) — galeria zdjęć produktu, bez dodatkowych ustawień;
Shop Product Header (Nagłówek produktu sklepu) — nazwa, cena, przycisk "Do koszyka"; przełączniki Show warranty/shipping badges (Pokaż odznaki gwarancji/wysyłki) i Show Apple Pay / Google Pay button (Pokaż przycisk Apple Pay / Google Pay) (zob. Apple Pay / Google Pay);
Shop Product Description (Opis produktu sklepu) — opis produktu z tytułem sekcji;
Shop Product Specs (Specyfikacje produktu sklepu) — tabela specyfikacji; Show only these specs (Pokaż tylko te specyfikacje) ogranicza i porządkuje listę, Hide these specs (Ukryj te specyfikacje) ukrywa konkretne pola, Hide long text values (Ukryj długie wartości tekstowe) ukrywa zbyt długie wartości za rozwijanym elementem;
Shop Product Reviews (Recenzje produktu sklepu) — opinie klientów z tytułem sekcji;
Shop Related Products (Produkty powiązane sklepu) — "może Ci się również spodobać", liczba kart i styl;
Shop Product 3D (Produkt 3D sklepu) — interaktywny model 3D produktu, jeśli model został dla niego załadowany.

Koszyk, kasa, potwierdzenie

Shop Cart Page (Strona koszyka sklepu) — strona koszyka: tekst pustego stanu i URL przejścia do kasy;
Shop Checkout (Kasa sklepu) — sama kasa; jedyne ustawienie to Cash on delivery (Płatność za pobraniem) (włącza płatność przy odbiorze jako opcję) i URL strony sukcesu; reszta (metody płatności, dostawa, podatek) jest automatycznie pobierana z ustawień dostawy i ustawień podatkowych obszaru roboczego;
Shop Order Success (Sukces zamówienia sklepu) — strona podziękowania po złożeniu zamówienia, tytuł i tekst wiadomości;
Order Lookup (Wyszukiwanie zamówienia) — formularz "śledź zamówienie" według numeru i adresu e-mail, bez rejestracji.

Panel klienta

Shop Login / Register (Logowanie / Rejestracja w sklepie) — formularz logowania/rejestracji, tytuł, podtytuł i strona przekierowania po pomyślnym zalogowaniu;
Account Dashboard (Panel konta) — osobisty panel: historia zamówień, zapisany adres; tytuł, URL strony logowania (wyświetlany niezalogowanym) i URL przekierowania po wylogowaniu;
Shop Wishlist (Lista życzeń sklepu) — strona ulubionych produktów; tekst pustego stanu, URL przycisku "do katalogu", styl kart;
Product Comparison (Porównanie produktów) — strona porównania produktów dodanych za pomocą przycisku "porównaj" w katalogu; tytuł, podtytuł, tekst pustego stanu i przełącznik Highlight differing rows (Podświetl różniące się wiersze) (podświetla wiersze cech, w których produkty się różnią).

Bloki pomocnicze

Shop Breadcrumbs (Okruszki nawigacji sklepu) — okruszki nawigacji, z tekstem linku do strony głównej;
Shop Category Tabs (Zakładki kategorii sklepu) — poziome zakładki kategorii bez dodatkowych ustawień.