Tworzenie własnego motywu projektu dla aplikacji "Sklep"

Support13 lutego 2022

Ten artykuł opisuje podstawy tworzenia własnego motywu graficznego dla ogólnego zrozumienia - bez szczegółowego opisywania procesu rozwoju. Najprostszym sposobem na rozpoczęcie tworzenia własnego motywu jest skopiowanie kodu źródłowego istniejącego motywu, takiego jak "Domyślny 3.0", i udoskonalenie go według własnego uznania.


Motyw projektowy dla aplikacji "Sklep" powinien zawierać następujący zestaw podstawowych szablonów witryny sklepowej:

  • index.html (ogólna struktura stron witryny sklepu)
  • home.html (szablon strony głównej sklepu)
  • category.html (szablon stron kategorii produktów)
  • product.html (szablon strony z informacjami o jednym produkcie)
  • cart.html (szablon dla strony koszyka na zakupy)
  • error.html (szablon do wyświetlania komunikatów o błędach, np. "Nie znaleziono strony")

Ponieważ Twój sklep internetowy jest zaprojektowany tak, aby można było zrealizować zamówienie i podać jego dane adresowe, sposób dostawy i szczegóły płatności, motyw projektowy musi również zawierać odpowiednie szablony stron. Aby uprościć tworzenie własnego motywu graficznego, możesz w pełni skopiować następujące szablony stron przetwarzania zamówień z motywu "Domyślny 3.0" (możesz je później modyfikować według własnego uznania):

  • checkout.html
  • checkout.contactinfo.html
  • checkout.shipping.html
  • checkout.payment.html
  • checkout.confirmation.html
  • checkout.success.html
  • checkout.error.html


1. Formowanie struktury motywu projektowego

Nowy motyw projektu musi zostać utworzony w folderze o dowolnej nazwie na komputerze. Poszczególne szablony HTML i inne niezbędne pliki (CSS, JavaScript + obowiązkowy plik-manifest theme.xml) zostaną zapisane w tym folderze podczas tworzenia motywu.

Motyw witryny sklepowej może być utworzony albo oddzielnie - tylko dla aplikacji "Sklep", albo jako część rodziny motywów projektowych z podobnymi elementami projektowymi przeznaczonymi do wykorzystania w kilku różnych aplikacjach >Web Systems Pro< w celu stworzenia wspólnego wyglądu i odczuć dla różnych frontendów w ramach jednej witryny. Więcej informacji na temat tworzenia rodzin motywów projektowych można znaleźć w artykule "Nadrzędne motywy projektowe".


2. Zawartość głównych szablonów

index.html

Szablon index.html generuje podstawową strukturę stron sklepu za pomocą elementów <DOCTYPE>, <html>, <head> i <body>.

Style CSS i pliki JavaScript są zazwyczaj umieszczane wewnątrz elementu <head>.

Wewnątrz elementów <body> mogą znajdować się takie elementy jak główne menu nawigacyjne (np. metoda {$wa->apps()}, jak to ma miejsce w motywie "Domyślny 3.0"), paski boczne, panele stopki ("footer") i inne podobne bloki stron wspólne dla wszystkich stron w sklepie.

Uwaga: Aby w witrynie (centralna część strony) wyświetlały się dynamicznie generowane informacje, należy do szablonu index.html dodać zmienną {$content}. Jeśli ta zmienna nie zostanie dodana, wszystkie strony sklepu będą identyczne, ponieważ nie będą na nich wyświetlane dynamicznie generowane treści: listy produktów na stronie głównej, informacje o produkcie, listy produktów w kategoriach itd.


home.html

Szablon home.html, który przeznaczony jest do wyświetlania głównej (zwykle centralnej) części strony głównej, nie ma specjalnych wymagań - może zawierać listy produktów, odnośniki do poszczególnych kategorii produktów, różne reklamy, filmy wideo i inne podobne treści.


category.html

Właściwości kategorii

Szablon category.html przeznaczony jest do wyświetlania zawartości kategorii produktów.

Opis, nazwa, lista podkategorii, znaczniki META, adres URL strony, liczba produktów i inne właściwości kategorii są zawarte w zmiennej {$category} jako elementy tablicy asocjacyjnej. Oznacza to, że aby wyświetlić np. nazwę kategorii, należy do szablonu category.html dodać zmienną {$category.name|escape} (modyfikator |escape jest potrzebny do poprawnego wyświetlania różnych znaków specjalnych, które mogą być zawarte w nazwach kategorii, np. często używany symbol "&").


Listy produktów

Aby wygenerować listę produktów, należy użyć zmiennej {$products}, która zawiera tablicę elementów z informacjami o produktach w danej kategorii. Pętla Smarty {foreach}...{/foreach} jest zwykle używana do odczytywania poszczególnych elementów tablicy.

Wskazówka: kod do wyświetlania listy produktów użyty w szablonie category.html może być wykorzystany na innych stronach sklepu, np. na stronie z wynikami wyszukiwania, dlatego wygodnie jest umieścić ten kod w osobnym szablonie o nazwie np. product-list.html. Taki dodatkowy szablon można umieścić w szablonie category.html za pomocą funkcji Smarty {include}: 
{include file='product-list.html'}


Motyw projektu "Domyślny 3.0" wykorzystuje 2 różne szablony do tego samego celu: list-table.html i list-thumbs.html - do tworzenia list produktów o różnym układzie w różnych częściach witryny sklepu.



Filtry

Kolejnym kluczowym elementem stron kategorii jest filtr produktowy, czyli formularz internetowy służący do wyszukiwania produktów w ramach kategorii według zadanych wartości cech. Lista cech wybranych do filtrowania w danej kategorii zawarta jest w zmiennej {$filters}. Dla ułatwienia tworzenia własnego motywu projektowego zalecamy skopiowanie z szablonu category.html motywu "Domyślny 3.0" fragmentu kodu oznaczonego komentarzem <!-- filtering by product features -->, który wykorzystuje zmienną {$filters}.


product.html

Szablon product.html służy do generowania głównej zawartości strony produktu. Nazwa produktu, opis, szczegóły produktu i przycisk "Dodaj do koszyka" są zwykle wyświetlane na tej stronie.

Informacje o produkcie przechowywane są jako instancja klasy shopProduct w zmiennej {$product}.

Kod źródłowy klasy ShopProduct można znaleźć w wa-apps/shop/lib/classes/shopProduct.class.php


Na przykład, podobnie jak w przypadku kategorii, nazwa produktu może być wyświetlana w witrynie przy użyciu {$product.name|escape}.

Aby dowiedzieć się, jak umieścić obrazy produktów w szablonie sklepu, przeczytaj artykuł "Miniatury obrazów".

Oprócz wyświetlania informacji o produkcie, ważną funkcją strony produktowej jest możliwość dodania produktu do koszyka, aby przejść do kasy. Formularz dodawania pozycji do koszyka może być utworzony jako tag <form> z danymi wysyłanymi metodą POST na adres URL zwrócony przez konstrukcję {$wa->getUrl('/frontendCart/add')}.


Artykuły, usługi, informacje o pozostałościach magazynowych, polecane produkty

Te elementy strony produktu wymagają stosunkowo złożonego programowania przy użyciu Smarty i JavaScript, więc dla wstępnego przeglądu warto przyjrzeć się szablonowi product.html z motywu "Domyślny 3.0", a następnie zmodyfikować go w razie potrzeby, aby dostosować go do własnego motywu projektu.


cart.html

Szablon cart.html służy do wyświetlenia strony z listą przedmiotów dodanych do koszyka. Zazwyczaj taka strona umożliwia zmianę liczby zamawianych pozycji, usunięcie pozycji z koszyka lub przejście bezpośrednio do kasy.

Informacje o bieżącym koszyku przechowywane są w zmiennej {$cart} jako tablica asocjacyjna z następującymi elementami:

  • items - lista pozycji dodanych do koszyka
  • total - łączna kwota cen zamówionych produktów plus wybrane artykuły i usługi
  • count - całkowita liczba zamawianych pozycji

Dodanie takich funkcji jak automatyczne przeliczanie ceny po zmianie ilości zamawianych pozycji i wyborze opcji serwisowych dla poszczególnych produktów, a także aktualizacja zawartości koszyka po usunięciu pozycji bez przeładowywania strony wymaga stosunkowo dużej ilości kodu JavaScript. Dlatego sugerujemy wykorzystanie implementacji strony koszyka domyślnego motywu jako podstawy do stworzenia własnego motywu, który w razie potrzeby może być dalej rozwijany.


error.html

Jeśli podczas żądania strony w witrynie wystąpi błąd (na przykład "Nie znaleziono strony" lub "Wewnętrzny błąd serwera"), to szablon error.html służy do wyświetlenia informacji o nim. Zmienne dostępne w tym szablonie:

  • $error_message - komunikat o błędzie wygenerowany przez sklep
  • $error_code - kod odpowiedzi serwera, np. 404 lub 500


3. Obsługa wtyczek

Podstawowe motywy Sklepu (np. motyw "Domyślny 3.0") mają wbudowaną obsługę wtyczek. To wsparcie polega na obecności w szablonach motywów projektowych specjalnych wtyczek, które pozwalają automatycznie dodawać do strony sklepu dodatkową zawartość (np. listę marek produktów itd.). Przykład helpera w szablonie product.html:

<!-- plugin hook: 'frontend_product.menu' -->
{* @event frontend_product.%plugin_id%.menu *}
{foreach $frontend_product as $_}{$_.menu}{/foreach}


Aby Twój motyw graficzny wspierał wyświetlanie dodatkowej zawartości za pomocą wtyczek, skopiuj podobne fragmenty z jednego z podstawowych motywów graficznych (np. "Domyślny 3.0") do odpowiednich szablonów Twojego własnego motywu.


4. Pliki CSS i JavaScript

Szablony motywów projektowych mogą zawierać pliki CSS i JavaScript specyficzne dla danego frameworka. Poniżej pokażemy jak dołączyć te pliki w obu przypadkach.


Podłączanie ogólnych plików frameworka

Wspólne pliki CSS i JavaScript frameworka znajdują się odpowiednio w katalogach wa-content/css/ i wa-content/js/. W celu włączenia ich do szablonu motywu projektowego, adresy URL tych katalogów muszą być określone na podstawie adresu URL, pod którym zainstalowany jest framework. Można to zrobić za pomocą zmiennej {$wa_url}:

<link href="{$wa_url}wa-content/css/wa/wa-1.0.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$wa_url}wa-content/js/jquery-plugins/jquery.cookie.js"></script>


Podłączanie własnych plików motywu

Aby dołączyć własne pliki CSS i JavaScript, musisz podać adres URL katalogu z plikami motywu w szablonach. Zalecane jest użycie do tego celu zmiennej {$wa_theme_url}:

<link href="{$wa_theme_url}style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{$wa_theme_url}script.js"></script>


Pliki style.css i script.js dołączone w tym przykładzie powinny być dodane do folderu z wszystkimi innymi szablonami motywów.


5. Tworzenie pliku manifestu

W celu zapewnienia, że aplikacja "Sklep" rozpozna wszystkie utworzone szablony jako części składowe danego motywu projektu, wszystkie pliki utworzonego motywu muszą być określone w specjalnym pliku manifestu theme.xml. Przykład pliku manifestu oraz opis jego elementów znajduje się w artykule "Integracja z aplikacją Witryna".

Ważne: (id) Twojego motywu, określone w pliku-manifestu theme.xml, nie może pokrywać się z id innych motywów.



6. Ładowanie na serwer

Przed wysłaniem plików motywu na serwer muszą one zostać razam z plikom-manifestu spakowane do archiwum w formacie TAR.GZ. Musisz spakować tylko pliki, bez folderu, w którym je utworzyłeś na swoim komputerze! Nazwa pliku archiwum nie ma znaczenia. Archiwum musi zostać dodane poprzez link "Wczytaj archiwum z motywem" w sekcji "Projekt -> Motywy projektu".

Po pobraniu archiwum, wybierz nowy motyw w ustawieniach routingu sklepu internetowego, aby użyć go w swoim sklepie.



Błąd w tekście? Zaznacz ją myszką i kliknij Ctrl + F1 lub kliknij na ten blok!