Układanie Fundamentów Tematu

Dwa pierwsze rozdziały tego przewodnika były teoretyczne; ten będzie praktyczny.

Zamierzamy stworzyć fundamenty plików i folderów dla twojego tematu, są dwie drogi żeby to osiągnąc:

Nie trzeba dodawać, że radzimy wybrać pierwszą opcje:Minimalny PrestaShop wymaga wielu plików i lini kodu, o niektórych z nich możesz zapomnieć kiedy startujesz od zera.

Budowanie PrestaShop jest skomplikowanym przedsięwzięciem. Na przykład w porównaniu z motywem WordPress, który może pracować z pojedynczym plikiem index.php, minimalny PrestaShop wymaga wiele więcej stron: Stronę domową, stronę produktu, strony konta użytkownika, stronę koszyka, strony procesu zamówienia, itd. Budowanie motywu strony e-commerce oznacza o wiele bardziej skomplikowane zestawienie ze sobą stron i szablonów.

To dlatego radzimy, aby rozpocząć swój własny motyw za pomocą fundamentów położonych przez domyślny motyw. Kompletny i sprawdzony, domyślny motyw PrestaShop zapewnia, że wszystkie niezbędne strony są już na miejscu, pozostawiając swobodę przerobienia wyświetlanej strony, korzystając z własnych obrazów, w celu zwiększenia jej własnych skryptów.

Odkrywanie prawdy, opierając się na wcześniejszych odkryciach: Kopiowanie domyślnego motywu

Duplikowanie plików z domyślnego motywu jest łatwe, a nawet jest to możliwe za pomocą dwóch różnych sposobów.

Z Panelu administracyjnego

Panel administracyjny PrestaShop może pomóc stworzyć nowy katalog tematyczny na podstawie jakiegokolwiek innego zainstalowanego motywu, a to wszystko w kilka kliknięć:

  1. Przejdź do "Szablony" strona preferencji.
  2. Kliknij przycisk "Dodaj nowy szablon" w prawym górnym rogu ekranu.
  3. W oknie "Importuj szablon" które zostanie otwarte, przejdź do sekcji "Utwórz nowy szablon" i kliknij przycisk "Tworzenie nowego szablonu".
  4. W utworzonym formularzu wypełnij różne pola:
  5. Kliknij przycisk "Zapisz".

PrestaShop utworzy folder szablonu i skopiuje wszystkie potrzebne pliki ze szablonu źródłowego, dzięki czemu można swobodnie eksperymentować z tymi plikami.

Z poziomu systemu operacyjnego/ serwera FTP

Oczywiście, że można tworzyć kopie samemu:

  1. Przejdź do folderu/themes w instalacji PrestaShop (online lub na pulpicie)
  2. Stwórz nowy folder dla swojego szablonu. Powinna to być ostateczna nazwa twojego szablonu, w jednym słowie małymi literami. Upewnij się czy na stronie Addons żaden inny szablon nie używa już tej nazwy, tym bardziej jeśli masz plan ewentualnej sprzedaży szablonu przez internet.
  3. Skopiuj treści folderu tematycznego (dla 1.6 motywu domyślnego, /default-bootstrap) i wklej go w nowo utworzonym folderze.

To wszystko!

Czyszczenie

Zarówno domyślny motyw i twoja instalacja PrestaShop zawierają ładunek treści i stylów, które niekoniecznie są przydatne do twojego szablonu. Na przykład wiele, modułów jest zainstalowanych i aktywowanych domyślnie przez instalatora PrestaShop. Chociaż niektóre z nich są niezbędne do prawidłowego funkcjonowania kompletnego sklepu, inne mogą być po prostu odłożone na bok podczas budowania szablonu.
To jest twój obowiązek jako twórcy motywu zbudować szablony i style przynajmniej dla wszystkich modułów domyslnego PrestaShop (albo dostosować te domyślne) wraz z tymi dodatkowymi modułami które mają wspierać twój szablon.

Chodzi o to, że motyw musi pochodzić z niestandardowych szablonów i plików CSS dla domyślnych modułów PrestaShop. Te pliki szablonów przechowywane są w podfolderze /modules  w folderze tematycznym subfolder, natomiast style są w podfolderze /css/modules .
Na przykład, w domyśłnym motywie, pliki do modułu Layered Navigation mozna znaleźć w następujących ścieżkach:

Jak widać, jeśli chcemy zmienić moduły występujące na stronie głównej, przy jednoczesnym zachowaniu jego układu, trzeba tylko zmienić swój plik CSS i zostawić sam plik szablonu. Na przykłąd aby zmienić stylistykę modułu Layered Navigation, należy umieścić swoją dostosowaną wersję w tym folderze: /themes/YOUR_THEME/css/modules/blocklayered/blocklayered.css. Wystarczy upewnić się że korzysta się z tej samej ścieżki dostepu do orginalnych plików modułu.

Niezbędne moduły

Niezbędne moduły szablonów to:

Nazwa modułu

Dlaczego jest niezbędny

blok koszyka

Wyświetla cały proces zamówienia i płatności.

blok moje konto

Wyświetla proces tworzenia użytkownika

Po prostu nie można sprzedać produktu, jeśli ywój szablon nie obsługuje tych modułów.

Konieczne moduły

Są również moduły, które nie są konieczne do funkcjonawania sklepu, ale powinny być uwględnione przy projektowaniu motywu. Należy starać się budować jak najlepiej swój szablon mając te moduły w pamięci.

Konieczne moduły szablonu to:

Nazwa modułu

Dlaczego jest niezbędny

blok kategorii

Wyświetla kategorie produktów

blok cms

Listy i wyświetlenia stron CMS (tj. Zasady i warunki, nota prawna itp.)

blok kontakt

Wyświetla informacje o Obsłudze Klienta

blok informacji kontaktowych

Wyświetla informacje o kontakcie do sklepu.

blok kontaktu w stopce

Wyświetla w stopce linki do stron konta użytkownika

blok wyszukiwania

Wyświetla wyszukiwarkę i jej wyniki

blok tagów

Wyśwuetla tagi produktów

produkty wyróżnione

Wyświetla produkty wyróżnione

Moduły które dobrze mieć

W końcu moduły które nie są tak ważne jak reszta z nich , ale moga przynieść dużo korzyści dla sklepu i pomoc klientom dowiedzieć się więcej o produktach i sklepie. Powinno się zaprojektować sklep z tymi aktywnymi modułami.

Moduły szablonu które dobrze mieć to:

Nazwa modułu

Dlaczego jest niezbędny

blok najlepiej sprzedające

Wyświetla produkty które się najlepiej sprzedają

blok warstwowy

Wyświetla warstwowe filtry nawigacji

blok linków

Wyświetla dodatkowe linki niestandardowe

blok producentów

Lista i wyświetlenia producentów/marki z produktów sklepu

blok nowych produktów

Wyświetla najnowsze produkty

blok newslettera

Wyświetla formularz, w którym klienci mogą się zapisać do newslettera Twojego sklepu

blok kanałów rss

Wyświetla zawartość kanału RSS z innej strony

blok społecznościowy

Wyświetla informacje o stronach społecznościowych w twoim sklepie

blok specjalny

Wyświetla bieżące rabaty

blok sklepu

Wyświetla link do znajdowanego sklepu

blok dostawcy

Listy i wyświetlenia dostawców sklepu

blok ostatnio przeglądane

Wymienia produkty, które klient ostatnio oglądał

blok listy życzeń

Wyświetla liste życzeń klienta

komentarz produktów

Wyświetla sekcje komentarza na każdej stronie produktu

Wszytkie te szablony modułu są włączane domyślnie w domyślnym folderze tematu /modules, ponieważ są one funkcją strony czołowej są one potrzebne do tego szablonu Można bezpiecznie włączyć/odinstlować dowolny inny moduł na stronie panelu admistracyjnego "Moduły". Dzięki temu można rozpocząc z czystym kontem.

W pełni czysty stan byłby wtedy kiedy wszystkie moduły zostałyby wyłączone i ponownie zainstalowane jeden po drugim, co pozwala na włączenie ich do swojego projektu podczas tworzenia szablonu. Jest to dobry sposób pracy, który pomaga ustalić jaka treść zepsuła układ strony, ale osiągniecie celu trwa dłużej.  Przechowując znany zestaw podstawowych modułów pomaga to zbudować swój szablon szybciej, jednocześnie ma się pewność że będzie to działać w większości konfiguracji

Tworzenie treści

Twój temat będzie wyświetlał treść wzięte z bazy PrestaShop. Niezależnie czy planujecie zatrzymać szablon dla siebie albo podzielić się /sprzedać go aby inni mogli z niego skorzystać, nie można po prostu rozpocząć projektowania bez zawartości, wraz z aktywacją niektórych kluczowych cech, które w każdym sklepie można używać ze sobą.

Dane demo instalowane z PrestaShop wystarczą do pomocy, ponieważ obejmują produkty, kategorie, sklepy itd. Począwszy od świeżej instalacji PrestaShop daje Tobie przewagę z zawartością demo, pusty sklep będzie wymagał aby rozpocząć dodawanie zawartości (albo fałszywe lub prawdziwe) do sklepu, aby zobaczyć jak twój szablon na to reaguje.

Projekt !

Teraz gdy domyślny motyw został przekształcony we własnym folderze, to jest czas aby zbadać jego pliki: Szablony Smarty, zasady CSS, kody JavaScript, połozenie zaczepów i bloków treści... Wszytko można zmienić, a do Ciebie należy decyzja jak chcesz to przerobić!

Pliki CSS

Możesz edytować styl tematu poprzez edycje plików CSS.

Plik global.css zawiera globalną strukturę i najważniejszą część projektowania szablonu

Zazwyczaj jest jeden arkusz stylów na kontroler. Na przykład strona produktu ma plik product.css .

Jeśli używasz Sass/Compass, musisz najpierw edytować pliki SCSS, następnie zregenrować pliki CSS.
Gdy arkusz stylów jest generowany z pliku SCSS, linia i plik SCSS są wymienione w pliku.

/* line 6, ../sass/product.scss */
.primary_block {
  margin-bottom: 40px;
}
/* line 9, ../sass/product.scss */
.top-hr {
  background: #c4c4c4;
  height: 5px;
  margin: 2px 0 31px;
}
.primary_block {
  margin-bottom: 40px;
}
.top-hr{
  background: $top-line-color;
  height: 5px;
  margin: 2px 0 31px;
}

Obrazy

Obrazy które są używane przez szablon (nie przez produkty) są przechowywane w folderze szablonu/img , natomiast obrazy które mają być użyte przez sklep są przechowywane w folderze głównym /img instalacji PrestaShop.

Ikony są szczególnym przypadkiem: PrestaShop 1.6 używa FontAwesome jako zestaw ikon: http://fontawesome.io/. Jest to trzcionka wykonana z ikon, co daje wektorowe skalowanie ikon, które można błyskawicznie dostosować.

Używanie FontAwesome pozwala na:

Pliki Szablonu

Pliki szablonu Smarty  (.tpl) jest sposobem na odzielenie treści od sposobu w jaki treść jest prezentowana.
Szablon ma tylko kilka dynamicznych elementów (gdzie idzie zawartość). Ułatwia to projektowanie i aktualizacje Twoich obydwu stron, za równo w odniesieniu do treści jak i jej prezentacji.

<div class="pagenotfound">
    <div class="img-404">
        <img src="{$img_dir}/img-404.jpg" alt="{l s='Page not found'}" />
    </div>
    <h1>{l s='This page is not available'}</h1>
    <p>
        {l s='We\'re sorry, but the Web address you\'ve entered is no longer available.'}
    </p>
    <h3>{l s='To find a product, please type its name in the field below.'}</h3>
    <form action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="post" class="std">
        <fieldset>
            <div>
                <label for="search_query">{l s='Search our product catalog:'}</label>
                <input id="search_query" name="search_query" type="text" class="form-control grey" />
                <button type="submit" name="Submit" value="OK" class="btn btn-default button button-small">
                    <span>{l s='Ok'}</span>
                </button>
            </div>
        </fieldset>
    </form>
    <div class="buttons">
        <a class="btn btn-default button button-medium" href="{$base_dir}" title="{l s='Home'}">
            <span><i class="icon-chevron-left left"></i>{l s='Home page'}</span>
        </a>
    </div>
</div>

Silnik szablonu używa {...} do obsługi instrukcji. Pozostała część dokumentu jest wysyłana do przeglądarki

Możliwe jest użycie szablonu do generowania plików HTML, a także plikó XML, plików tekstowych etc.

Pliki PDF

Pliki PDF są także generowane z szablonów Smarty (.tpl pliki). Główna różnica między tym jak pliki szablonów używają do generowania HTML, jest taka że szablony PDF nie pozwalają na zasoby zewnętrzne takie jak CSS. Dlatego należy użyć wewnętrznej stylizacji albo inline, aby zmienić styl twojej faktury, opóźnienia zamówienia, opóźnienia zwrotu, etc. Domyśłna isnatalcja PrestaShop pochodzi z dwóch stylów szablonów: delivery-slip.style-tab.tpl i invoice.style-tab.tpl. Możesz je w znaleźć folderze/pdf/. Poniższa tabela pokazuje jak zakładki stylu są powiązane:

Szablon PDFZakładka stylu
Opóźnienia dostawydelivery-slip.style-tab.tpl
Kolejność dostawyinvoice.style-tab.tpl
Zwroty zamówieniainvoice.style-tab.tpl
Fakturainvoice.style-tab.tpl
Opóźnienia zamówieńinvoice.style-tab.tpl

Zauważ, że jeśli chcesz zastosować inny szablon stylu, trzeba będzie zastąpić odpowiedni PDF Class w katalogu /classes/pdf/.

Wewnętrzna zakładka w katalogach stylu może być stosowana tylko do głównych plików szablonów PDF, takich jak invoice.tpldelivery-slip.tpl, etc. W celu ponownego użycia zmiennych w szablonach które są włączone w szablonach, można przypisać zmienne Smarty lub zastosować stylizacje inline odzielnie w każdym z tych plików.

Rozdrapywać daną rzecz: Tworzenie wszystkich plików od zera

Oh naprawdę? Chcesz zrobić to ręcznie? To odważne, ale postaramy się pomóc

Po pierwsze, jets lista niezbędnych plików szablonów (First, here is the list of necessary template files (spoiler alert: istnieje z ich 60, Tak wszystkie są konieczne do różnych funkcji PrestaShop):

Nazwa plikuDlaczego jest niezbędnyInne pliki szablonów używane przez ten szablon w domyślnym temacie
404.tplWyświetla się kiedy plik nie może być znaleziony 
address.tplUmożliwia kientowi stworzyć nowy adres.
  • errors.tpl
addresses.tplUmożliwia klientowi oglądanie aktualnych adresów 
authentication.tplUmożliwia klientowi zalogować się do jego konta.
  • order-steps.tpl
  • errors.tpl
best-sales.tpl

Wyświetla najlepiej sprzedające się produkty.

  • product-sort.tpl
  • nbr-product-page.tpl
  • product-compare.tpl
  • pagination.tpl
  • product-list.tpl
breadcrumb.tpl Wyświetla ścieżkę kategorii, do obecnego produktu/kategorii
  • breadcrumb.tpl
category-cms-tree-branch.tplBiegnie przez kategorie CMS w celu ich wyświetlania.
  • category-cms-tree-branch.tpl
category-count.tplWyświetla liczbę produktów w kategorii 
category-tree-branch.tplBiegnie przez kategorie produktów w celu ich wyświetlenia.
  • category-tree-branch.tpl
category.tplWyświetla zawartość kategorii: widoku, obrazu, tekstu, porównywarki produktów itd.
  • errors.tpl
  • scenes.tpl
  • category-count.tpl
  • product-sort.tpl
  • nbr-product-page.tpl
  • product-compare.tpl
  • pagination.tpl
  • product-list.tpl
  • product-compare.tpl
cms.tplWyświetla zawartość strony CMS. 
contact-form.tplWyświetla formularz kontaktowy klienta.
  • errors.tpl
discount.tplWyświetla listę kuponów klienta 
errors.tplWyświetla aktualny błąd/błędy 
footer.tplWyświetla stopkę
  • global.tpl
global.tplDefiniuje kilka zmiennych Smarty, i najbardziej znaczące z nich JavaScript 
guest-tracking.tplWyświetla stronę śledzenia dla klientów gości (interesantów bez konta)
  • order-detail.tpl
header.tplWyświetla nagłówek: HTML doctype, linki do plikó CSS, itd.
  • breadcrumb.tpl
history.tplWyświetla wszystkie swoje poprzednie zamówienia dla klienta
  • errors.tpl
identity.tplWyświetla i aktualizuje dane osobowe klienta
  • errors.tpl
layout.tplUruchamia główne paczki tematu: Nagłówek, stopkę, kolumny, aktualny szablon i edycje na żywo.
  • header.tpl
  • footer.tpl
maintenance.tplWyświetla specjalną stronę gdy sklep jest w konserwacji 
manufacturer-list.tplWyświetla listę wszystkich producentów
  • errors.tpl
  • nbr-product-page.tpl
  • pagination.tpl
manufacturer.tplWyświetla produkty od tego samego producenta.
  • errors.tpl
  • product-sort.tpl
  • nbr-product-page.tpl
  • product-compare.tpl
  • pagination.tpl
  • product-list.tpl
my-account.tplWyświetla stronę konta klienta 
nbr-product-page.tplWyświetla liczbę produktów na bierzącej stronę 
new-products.tplDisplays a block with the new products.
  • product-sort.tpl
  • nbr-product-page.tpl
  • product-compare.tpl
  • pagination.tpl
  • product-compare.tpl
  • pagination.tpl
order-address-multishipping-products.tplWyswietla adresy dostarczenia produktów w sytuacji multishippingu
  • order-address-product-line.tpl
order-address-multishipping.tpl 
  • order-steps.tpl
  • errors.tpl
  • order-address-multishipping-products.tpl
order-address-product-line.tpl  
order-address.tpl 
  • order-steps.tpl
  • errors.tpl
order-carrier.tpl 
  • order-steps.tpl
  • errors.tpl
order-confirmation.tpl 
  • errors.tpl
  • order-steps.tpl
order-detail.tpl  
order-follow.tpl  
order-opc-new-account.tpl  
order-opc.tpl 
  • shopping-cart.tpl
  • order-address.tpl
  • order-opc-new-account.tpl
  • order-carrier.tpl
  • order-payment.tpl
  • errors.tpl
order-payment.tpl 
  • errors.tpl
  • order-steps.tpl
  • shopping-cart-product-line.tpl
order-return.tpl 
  • errors.tpl
order-slip.tpl  
order-steps.tpl  
pagination.tpl  
password.tpl 
  • errors.tpl
prices-drop.tpl 
  • product-sort.tpl
  • nbr-product-page.tpl
  • product-compare.tpl
  • pagination.tpl
  • product-list.tpl
  • product-compare.tpl
  • pagination.tpl
product-compare.tpl  
product-list-colors.tpl  
product-list.tpl  
product-sort.tpl  
product.tpl 
  • errors.tpl
  • product-list.tpl
products-comparison.tpl  
restricted-country.tpl  
scenes.tpl  
search.tpl 
  • errors.tpl
  • product-sort.tpl
  • nbr-product-page.tpl
  • product-compare.tpl
  • pagination.tpl
  • product-list.tpl
shopping-cart-product-line.tpl  
shopping-cart.tpl 
  • order-steps.tpl
  • errors.tpl
  • shopping-cart-product-line.tpl
sitemap.tpl 
  • category-tree-branch.tpl
  • category-cms-tree-branch.tpl
stores.tpl  
store_infos.tpl  
supplier-list.tpl  
supplier.tplUmożliwia wyświetlanie produktów za dostawcę
  • errors.tpl
  • product-sort.tpl
  • nbr-product-page.tpl
  • product-compare.tpl
  • pagination.tpl
  • product-list.tpl