Ten przewodnik opisuje podstawowe zmiany w tematach graficznych SOTESHOP 8: edycję CSS, modyfikowanie szablonów HTML oraz dodawanie treści edytowanych w panelu. Potrzebna jest podstawowa znajomość HTML i CSS, edytor tekstowy oraz dostęp do plików sklepu.
Zanim zmienisz pliki, sprawdź możliwości panelu w Edycja grafiki. Logo, kolory, teksty i wiele ustawień układu można zmienić bez edycji szablonów. Zakres opcji zależy od wybranego tematu.
Utwórz własny temat graficzny na bazie wybranego tematu. W przykładach jego nazwa to mojtemat. Zastąp ją nazwą katalogu swojego tematu. Przed zmianami zachowaj kopię edytowanych plików; większe zmiany najpierw sprawdź w kopii testowej sklepu.
Bazowym tematem SOTESHOP 8 jest bianco. Korzysta on częściowo z responsive, który zawiera kompletny zestaw szablonów. Poszczególne tematy mogą dziedziczyć przez kilku rodziców, na przykład:
mojtemat → argento8 → bianco → responsiveGdy szukasz pliku do zmiany, sprawdź najpierw własny temat, a potem kolejno jego tematy nadrzędne. Skopiuj pierwszą znalezioną wersję do odpowiadającego jej katalogu własnego tematu. Nie przechodź od razu do responsive, pomijając pozostałych rodziców.
image_path szuka obrazka we własnym temacie i kolejno u rodziców.Nie zmieniaj plików tematów standardowych ani kodu PHP sklepu w ramach edycji wyglądu. Własna kopia HTML przesłania także późniejsze poprawki szablonu bazowego, dlatego po aktualizacjach warto porównać zmienione szablony z ich aktualnymi wersjami.
Ścieżki szablonów zaczynające się od /apps/ i /plugins/ podajemy względem katalogu aplikacji sklepu, w którym znajduje się plik symfony. Nie są to adresy do otwierania w przeglądarce.
Adresy /css/, /images/ i /js/ są publicznymi ścieżkami zasobów. W strukturze deweloperskiej sklepu odpowiadają im katalogi web/css/, web/images/ i web/js/. Przykładowo adresowi /css/frontend/theme/mojtemat/mojtemat.css odpowiada plik web/css/frontend/theme/mojtemat/mojtemat.css.
| Element | Ścieżka względem katalogu aplikacji |
|---|---|
| Dokument HTML | /apps/ |
| Nagłówek | /apps/ |
| Stopka | /apps/ |
| Układ jednej lub dwóch kolumn | /apps//apps/ |
| Strona główna | /apps//apps/ |
| Grupy produktów na stronie głównej | /apps//apps//apps/ |
| Blog na stronie głównej | /plugins/ |
| Teksty SEO | /apps/ |
| Lista produktów | /apps//apps/ |
| Karta produktu | /apps/ |
| Strona informacyjna | /plugins/ |
| Menu kategorii | /plugins/ |
| Linki społecznościowe | /plugins/ |
| Tekst strony głównej | /apps/ |
| Fonty i skrypty tematu | /apps//apps/ |
Pliki z tabeli nie muszą istnieć we własnym temacie - wtedy sklep korzysta z ich wersji nadrzędnych. Strona główna może łączyć homepage.html, main_index.html i wywoływane przez nie komponenty. Zanim zmienisz HTML, sprawdź ustawienia jej układu i sekcji w panelu.
/css/frontend/theme/mojtemat/mojtemat.css.Aby zaokrąglić przyciski w swoim temacie, dopisz:
/* Przyciski */
.btn {
border-radius: 8px;
}Selektory sprawdzaj w narzędziach deweloperskich przeglądarki. Tematy SOTESHOP 8 korzystają z Bootstrapa 3. Używaj klas zgodnych z wersją dołączoną do swojego sklepu.
Dodamy nad nagłówkiem informację, której treść właściciel sklepu będzie mógł później zmieniać w panelu bez edycji HTML.
https://adres-sklepu/backend_dev.php/theme/edit/id/ID_TEMATU. Zastąp domenę adresem sklepu, a ID_TEMATU identyfikatorem z adresu edycji tematu.Uzupełnij pola:
pasek-informacyjny - identyfikator używany w szablonie.Tekst jest przypisany do konkretnego tematu. Dodaj go do własnego tematu, w którym ma się wyświetlać. Teksty nie są automatycznie pobierane z tematów nadrzędnych. Id musi być takie samo w panelu i szablonie oraz nie powtarzać się w obrębie danego tematu.
_header.html kolejno w tematach nadrzędnych. Przykładowo, jeśli nie ma go w argento8, sprawdź bianco./apps/frontend/templates/theme/mojtemat/_header.html. Jeśli masz już własną wersję, edytuj ją.Przed istniejącym HTML nagłówka dodaj:
<div class="theme-info-bar">
<div class="container">
{theme_content id='pasek-informacyjny'}
</div>
</div>Do własnego arkusza /css/frontend/theme/mojtemat/mojtemat.css dopisz:
/* Pasek informacyjny */
.theme-info-bar {
padding: 8px 0;
background: #ececec;
color: #333;
text-align: center;
font-size: 1rem;
}Backend deweloperski służy tutaj do dodania tekstu i nadania mu identyfikatora. Późniejsza zmiana zawartości nie wymaga korzystania z backend_dev.php.
Własne style dopisuj w /css/frontend/theme/mojtemat/mojtemat.css. Nie kopiuj całych arkuszy rodziców. Pliki w katalogu _editor są generowane przez konfigurację grafiki; zmiany wyglądu wprowadzaj przez panel albo własny arkusz tematu.
Obrazki tematu umieszczaj w katalogu odpowiadającym adresowi /images/frontend/theme/mojtemat/, np. phone.png. W szablonie użyj:
<img src="{image_path image='phone.png'}" width="14" height="14" alt="" />Funkcja uwzględnia dziedziczenie. Podanie we własnym temacie obrazka o tej samej nazwie zastępuje obrazek rodzica. Ikona towarzysząca tekstowi może mieć pusty alt; obrazek przekazujący informację powinien mieć opis.
{include_file id="_footer"}Dołącza _footer.html z uwzględnieniem dziedziczenia tematów. Komponent pobiera dane i wyświetla je przy użyciu własnego szablonu, na przykład:
{st_get_component module="stProduct" component="productGroup" product_group="MAIN_PAGE"}Wyświetla grupę produktów o symbolu MAIN_PAGE. Grupa musi być utworzona i uzupełniona produktami w panelu.
Utwórz boks informacyjny w panelu i ustaw jego identyfikator webmastera na moj_boks. W wybranym miejscu szablonu dodaj:
{st_get_component module="stBoxFrontend" component="boxSingle" params="webmaster_id=moj_boks"}Boks przydaje się do dłuższych treści. Krótkie komunikaty i nagłówki można przygotować jako teksty tematu.
W szablonie karty produktu dostępne są między innymi {$name} - nazwa, {$code} - kod, {$description} - opis skrócony i {$description_long} - opis pełny. Dostępność zmiennych zależy od danego widoku; sprawdzaj ich użycie w aktualnym szablonie bazowym. Przeniesienie zmiennej do innego pliku nie zapewnia przekazania jej danych.
Zachowuj istniejące warunki wyświetlania cen, dostępności i opcji produktu. Stałe etykiety w szablonach zapisuj z użyciem mechanizmu tłumaczeń, np. {__ text="Szukaj" langCatalogue="stSearchFrontend"}. Wartość langCatalogue sprawdzisz w panelu: Definicje językowe, w kolumnie Katalog przy danej frazie. Treści, które właściciel sklepu ma samodzielnie zmieniać, umieszczaj w panelu.
Skrypty tematu dołączaj w _script_theme.html. Jeśli musisz go zmienić, skopiuj wersję z najbliższego rodzica i zachowaj istniejące skrypty. Większy skrypt zapisz jako osobny plik, np. pod publicznym adresem /js/mojtemat.js, a w _script_theme.html dodaj:
{use_javascript src="mojtemat.js"}Katalog JS jest wspólny dla sklepu, dlatego używaj własnej nazwy pliku. Plik _fonts.html służy do dołączania fontów i wywołuje _script_theme.html; zachowaj to wywołanie. Fonty przechowuj lokalnie, korzystając w pierwszej kolejności z zasobów sklepu.
Wbudowany w HTML kod JavaScript lub CSS z klamrami otaczaj blokiem {literal}…{/literal}, aby Smarty nie interpretowało go jako własnych instrukcji. Wywołania Smarty, np. {theme_content id='pasek-informacyjny'}, pozostaw poza takim blokiem.
Utwórz plik /apps/backend/modules/stProductGroup/config/user_product_group.yml. Jeśli już istnieje, uzupełnij jego sekcję product_group, zachowując dotychczasowe wpisy. Przykład:
product_group:
MY: Moja grupa
SEASON: Oferta sezonowaWcięcia w YAML zapisuj spacjami. Wpisy udostępniają nowe typy do wyboru w panelu; nie tworzą automatycznie grup ani nie dodają produktów. Utwórz grupę w panelu, wybierz jej typ i przypisz produkty. Następnie wywołaj ją w szablonie:
{st_get_component module="stProduct" component="productGroup" product_group="SEASON"}Ten plik konfiguracji jest wspólny dla sklepu, a nie przypisany wyłącznie do jednego tematu.
Po zakończeniu sprawdź zmienione widoki na komputerze i telefonie, również w zwykłym trybie sklepu. Przy zmianach wspólnych elementów sprawdź stronę główną, listę produktów, kartę produktu i koszyk.