Laying the Theme's Foundations
Table of Contents |
---|
The first two chapters of this guide were theoretical; this one gets practical.
We are going to create the fundamental files and folders for your theme, and there are two ways of achieving that:
- Duplicate the default theme and adapt the files.
- Create every file from scratch.
Needless to say, we strongly advise you to choose the first option: a minimal PrestaShop requires many files and lines of code, some of which you are bound to forget when starting from scratch.
Building a PrestaShop is a complex endeavor. For instance, in comparison with a WordPress theme, which could work with a single index.php
file, a minimal PrestaShop requires many more pages: home page, product page, user account pages, cart page, order process pages, etc. Building a theme for an e-commerce site implies a much more complex and intertwined set of pages and templates.
This is why we advise to start your own theme by using the foundations laid by the default theme. Complete and proven, PrestaShop's default theme ensures that all necessary pages are already in places, leaving you the freedom to rework the page display, to use your own images, to enhance it with your own scripts.
Standing on the shoulders of giants: copying the default theme
Duplicating the files of the default theme is easy, and even that can be done using two different ways.
From the back office
PrestaShop's back office can help you create a new theme folder based on any other installed theme, all in a couple of clicks:
- Go the "Themes" preference page.
- Click on the "Add new theme" button, at the top right of the screen.
- In the "Import theme" screen that opens, scroll down to the "Create new theme" section and click on the "Create new theme" button.
- In the creation form that appears, fill-in the various fields:
- Name of the theme. Give it your own unique name – you can prefix it with your company's name or initials, for instance. Make sure to check on the Addons website that no other theme is already using that name, even more so if you plan to eventually sell that theme online.
- Preview image for the theme. Since you do not yet have the final design for your theme, this can be done later.
- Default left column / Default right column. Do you plan for your theme to have a sidebar of content? If so, on which side of the page? Check the options accordingly.
- Number of products per page. Another informational field which you can edit later on.
- Name of the theme's directory. You should use the same name as your theme, in lowercase and with spaces replaced by hyphens. For instance, "My Test Theme" would yield "my-test-theme" as a folder name.
- Copy missing files from existing theme. This is where you indicate the theme to copy files from. This is very important! You can choose the default theme, or any other available which you want to build your theme from.
- Responsive. Do you plan on your theme's design to adapt to any screen size? If so, switch this option to "Yes".
- Click on the "Save" button.
PrestaShop will create the theme's folder and copy all the needed files from the source theme, leaving you free to experiment with those files.
From your operating system / FTP server
You can of course create that copy yourself:
- Go to the
/themes
folder for your installation of PrestaShop (either online or on your desktop). - Create a new folder for your theme. It should be the final name of your theme, in a single lowercase word. Make sure to check on the Addons website that no other theme is already using that name, even more so if you plan to eventually sell that theme online.
- Copy the content of source theme's folder (for the 1.6 default theme,
/default-bootstrap
) and paste it in the newly created folder.
That's it!
Cleaning up
Both the default theme and your installation of PrestaShop contain a payload of content and styles that are not necessarily useful to your own theme. For instance, many modules are installed and activated by default by PrestaShop's installer. While some are necessary for the proper functioning of a complete store, others can simply be put aside while you build the theme.
It is your duty as a theme developer to build templates and styles for at least all the default PrestaShop modules (or at least adapt the default ones), along with the ones for any additional modules that you plan your theme to support.
The point here is that a theme must come packed with custom templates and CSS files for the default PrestaShop modules. These template files are stored in the /modules
subfolder of the theme's folder, while the styles are in the /css/modules
subfolder.
For instance, in the default theme, the files for the Layered Navigation module can be found in the following paths:
...
Układanie Fundamentów Tematu
Table of Contents |
---|
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:
- Zduplikowac domyślny motyw i dostosuj pliki..
- Tworzenie każdego pliku od podstaw.
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ęć:
- Przejdź do "Szablony" strona preferencji.
- Kliknij przycisk "Dodaj nowy szablon" w prawym górnym rogu ekranu.
- W oknie "Importuj szablon" które zostanie otwarte, przejdź do sekcji "Utwórz nowy szablon" i kliknij przycisk "Tworzenie nowego szablonu".
- W utworzonym formularzu wypełnij różne pola:
- Nazwa szablonu.Daj mu swoją unikalną nazwę - można na przykład poprzedzić ją nazwą swojej firmy lub inicjałami. Upewnij się na stronie Addonsów, że żaden inny szablon nie używa tej nazwy, tym bardziej jeśli zamierzasz sprzedać ten szablon w internecie.
- Podgląd obrazu w szablonie. Ponieważ nie masz jeszcze ostatecznego projektu do szablonu, można to zrobić póżniej
- Domyślna lewa kolunma/Domyślna prawa kolumna. Czy planujesz mieć na swoim szablonie boczny pasek tresći? Jeśli tak to po której stronie? Sprawdź odpowiednie opcje.
- Ilość produktów na stronie. Kolejne pole informacyjne które możesz edytować później.
- Nazwa katolgu szablonu. Powinieneś użyć tej samej nazwy co nazwa szablonu, małymi literami spacje zastąpić myślnikami. Na przykład,"Mój Testowy Szablon" będzie się nazywał "mój testowy-szablon" jako nazwa folderu.
- Kopiowanie brakujących plików z istniejącego tematu. W tym miejscu należy wskazać temat, aby skopiować pliki. To jest bardzo ważne! Możesz wybrać domyśny temat, albo wszystkie inne dostepne z których chcesz zbudować swój temat.
- Responsywność. Czy planujesz, aby twój projekt szablonu dostosowywał się do każdego rozmiaru ekranu? Jeśli tak to włącz tą opcje na "Tak".
- 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:
- Przejdź do folderu
/themes
w instalacji PrestaShop (online lub na pulpicie) - 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.
- 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:
- Plik szablonu:
/themes/default-bootstrap/modules/blocklayered/blocklayered.tpl
. - Plik CSS file:
/themes/default-bootstrap/css/modules/blocklayered/blocklayered.css
.
As you can see, if all you want to change in a module's front office appearance while keeping its organzation, you only have to edit its CSS file and leave its template file alone. For instance, to change the styling of the Layered Navigation module, you should put your customized version in this folderJak 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
. Just make sure to use the same file path as the original module files.
Necessary modules
The necessary module templates are:
Module name | Why it is necessary |
---|---|
blockcart | Displays the whole order & payment process. |
blockmyaccount | Displays the user creation process. |
You simply cannot sell a product if your theme does not support these modules.
Must-have modules
There also are modules which, while not necessary for a functioning store, should still be included when designing a theme. You should try your best to build your theme with these modules in mind.
The "Must have" module templates are:
Module name | Why it is necessary |
---|---|
blockcategories | Displays the product categories. |
blockcms | Lists and displays the CMS pages (i.e. Terms & Conditions, Legal notice, etc.). |
blockcontact | Displays the Customer Service information. |
blockcontactinfos | Displays the stores contact info. |
blockmyaccountfooter | Displays links to the user's account pages in the footer. |
blocksearch | Displays the search engine and its results. |
blocktags | Displays the product tags. |
homefeatured | Displays featured products. |
Good-to-have modules
Finally, these modules are not as important as the others ones, but bring a lot of value to your store, and helps your customers discover products and learn more about your store. Again, you should design your store with these modules activated.
The "Good to have" module templates are:
Module name | Why it is necessary |
---|---|
blockbestsellers | Displays the best-selling product. |
blocklayered | Displays layered navigation filters. |
blocklinks | Displays additional custom links. |
blockmanufacturer | Lists and displays the manufacturers/brands of the store's products. |
blocknewproducts | Displays the newest products. |
blocknewsletter | Displays a form where customers can subscribe to your store's newsletter. |
blockrss | Displays the content of an RSS feed from another site. |
blocksocial | Displays information about your store's social networking pages. |
blockspecials | Displays the current discounts. |
blocstore | Displays a link to the store located. |
blocksupplier | Lists and displays the suppliers of the store's products. |
blockviewed | Lists the products that the customer viewed last. |
blockwishlist | Displays the customer's wishlists. |
productcomments | Displays a comment section in each product page. |
All these module templates are included by default in the default theme's /modules
folder, because they are front-end features that are needed by that theme. You can safely disable/uninstall any other module in the back office "Modules" page. This enables you to start on a somewhat clean slate.
Info |
---|
A fully clean slate would be to disable all modules and re-install them one by one, enabling you to integrate them into your design while building you theme. This is a good way to work, as you it helps you know which content broke your page layout, but it takes longer to reach your goal. Keep a known set of essential modules helps you build your theme faster while making sure it will work in most configuration. |
Creating content
Your theme will display content taken from the PrestaShop database. Whether you plan on keeping the theme to yourself or share/sell it for others to use, you simply cannot start designing it without content, along with the activation of some key features that any store might use, along with yourself.
The demo data installed with PrestaShop is enough to help with it, as it features products, categories, stores, etc. Starting with a fresh installation of PrestaShop gives you a head-start with demo content, while empty stores will require you to start adding content (either fake or real) to the store in order to actually see your theme react to it.
Design!
Now that the default theme has been turned into a folder of its own, it is time for you to explore its files: Smarty templates, CSS rules, JavaScript codes, location of the hooks and content blocks... Everything can be changed, and it is up to you to rework it the way you want!
The CSS files
You can edit your theme's styles by editing its CSS files.
The global.css
file contains the global structure and the most important part of the design for the theme.
Usually, there is one stylesheet per controller. For instance, the product's page has a product.css
file.
If you use Sass/Compass, you must edit the SCSS files first, then regenerate the CSS files.
Once the stylesheet is generated from a SCSS file, the SCSS line and file are referenced within the fileWystarczy 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.
Info |
---|
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.
Code Block | ||
---|---|---|
| ||
/* 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; } |
Code Block |
---|
.primary_block { margin-bottom: 40px; } .top-hr{ background: $top-line-color; height: 5px; margin: 2px 0 31px; } |
The images
Images which are used by the theme (not by products) are to be stored in the theme's /img
folder, while image which are to be used by the shop itself are to be stored in the /img
folder at the root of your PrestaShop installation.
...
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 uses FontAwesome as its icon setużywa FontAwesome jako zestaw ikon: http://fontawesome.io/. It is a font made of icons, giving you scalable vector icons that can instantly be customized.
Using FontAwesome enables you to:
...
Jest to trzcionka wykonana z ikon, co daje wektorowe skalowanie ikon, które można błyskawicznie dostosować.
Używanie FontAwesome pozwala na:
- użycie pojedynczego pliku do wyświetlania różnych ikon.
- cieszyć się elastycznością: Rozmiaru, koloru, cieni, i wszystkim tym co można zrobić z mocą CSS.
- doskonałe renderowanie na wszystkich rozmiarach ekranów: PC, TV, Retina, etcitd.)
The template files
...
Pliki Szablonu
Pliki szablonu Smarty (.tpl
) is Smarty's way to separate the content from the way that content is presented.
The template only have a few dynamic elements (where your content goes). This facilitates the design and update of your sites, both for your content and its presentationjest 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.
Code Block | ||||
---|---|---|---|---|
| ||||
<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> |
The template engine uses Silnik szablonu używa {...} to handle instructions. The rest of the document is sent to the browser as is.
It is possible to use a template to generate HTML files, and also XML files, text files, etc.
The PDF files
The PDF files are also generated from Smarty templates (.tpl
files). The main difference with the template files used to generate HTML, is that the PDF templates do not allow for external resources such as CSS. Therefore you must use internal or inline styling in order to change the style of your invoice, order slip, return slip, etc. A default PrestaShop installation comes with two style templates: 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
and i invoice.style-tab.tpl
. You can find these in the folder Możesz je w znaleźć folderze/pdf/
. The following table shows how the style tabs are linked:
...
Poniższa tabela pokazuje jak zakładki stylu są powiązane:
Szablon PDF | Zakładka stylu |
---|---|
Opóźnienia dostawy | delivery-slip.style-tab.tpl |
Supply orderKolejność dostawy | invoice.style-tab.tpl |
Order returnZwroty zamówienia | invoice.style-tab.tpl |
InvoiceFaktura | invoice.style-tab.tpl |
Order slipOpóźnienia zamówień | invoice.style-tab.tpl |
Note that if you would like to apply a different style template, you will have to override the corresponding PDF Class in the directory Zauważ, że jeśli chcesz zastosować inny szablon stylu, trzeba będzie zastąpić odpowiedni PDF Class w katalogu /classes/pdf/
.
The internal styling in the style tabs can only be applied to the main PDF template files, such as Wewnętrzna zakładka w katalogach stylu może być stosowana tylko do głównych plików szablonów PDF, takich jak invoice.tpl
, delivery-slip.tpl
, etc. In order to reuse the variables in this template in templates which are included, you can assign Smarty variables or apply inline styling separately in each of these files.
Scratching that itch: creating all files from zero
Oh wow. Really? You want to do it all by hand? That's courageous, but we'll try to help.
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: there are 60 of them. Yes, all are necessary to various PrestaShop features):
...
istnieje z ich 60, Tak wszystkie są konieczne do różnych funkcji PrestaShop):
Nazwa pliku | Dlaczego jest niezbędny | Inne pliki szablonów używane przez ten szablon w domyślnym temacie |
---|---|---|
404.tpl | Wyświetla się kiedy plik nie może być znaleziony | |
address.tplEnables the customer to create a new address | Umożliwia kientowi stworzyć nowy adres. |
|
addresses.tplEnables the customer to view her current addresses. | Umożliwia klientowi oglądanie aktualnych adresów | |
authentication.tplEnables the customer to log into her account | Umożliwia klientowi zalogować się do jego konta. |
|
best-sales.tpl | Displays the best-selling productsWyświetla najlepiej sprzedające się produkty. |
|
breadcrumb.tpl Displays the category path to the current product/category. | Wyświetla ścieżkę kategorii, do obecnego produktu/kategorii |
|
category-cms-tree-branch.tpl | Runs through the CMS categories in order to display themBiegnie przez kategorie CMS w celu ich wyświetlania. |
|
category-count.tplDisplays the number of products in a category. | Wyświetla liczbę produktów w kategorii | |
category-tree-branch.tplRuns through | the product categories in order to display themBiegnie przez kategorie produktów w celu ich wyświetlenia. |
|
category.tplDisplays the content | of a category: scene, image, text, product comparator, etcWyświetla zawartość kategorii: widoku, obrazu, tekstu, porównywarki produktów itd. |
|
cms.tpl | Displays the content of a CMS pageWyświetla zawartość strony CMS. | |
contact-form.tplDisplays the customer contact form | Wyświetla formularz kontaktowy klienta. |
|
discount.tplDisplays the list of the customer's vouchers. | Wyświetla listę kuponów klienta | |
errors.tplDisplays the current error(s). | Wyświetla aktualny błąd/błędy | |
footer.tplDisplays the footer. | Wyświetla stopkę |
|
global.tpl | Defines several Definiuje kilka zmiennych Smarty variables, most notable JavaScript ones., i najbardziej znaczące z nich JavaScript | |
guest-tracking.tplDisplays the tracking page for guest customers (visitors with no account). | Wyświetla stronę śledzenia dla klientów gości (interesantów bez konta) |
|
header.tpl | Displays the headerWyświetla nagłówek: HTML doctype, links to linki do plikó CSS files, etcitd. |
|
history.tplDisplays all her previous orders to the customer. | Wyświetla wszystkie swoje poprzednie zamówienia dla klienta |
|
identity.tplDisplays and updates the customer's personal information. | Wyświetla i aktualizuje dane osobowe klienta |
|
layout.tplCalls | upon the main bricks of the theme: header, footer, columns, current template and Live EditUruchamia główne paczki tematu: Nagłówek, stopkę, kolumny, aktualny szablon i edycje na żywo. |
|
maintenance.tplDisplays a special page for when the store is in maintenance. | Wyświetla specjalną stronę gdy sklep jest w konserwacji | |
manufacturer-list.tplDisplays a list of all manufacturers. | Wyświetla listę wszystkich producentów |
|
manufacturer.tplDisplay the products from a single manufacturer | Wyświetla produkty od tego samego producenta. |
|
my-account.tplDisplays the customer's account page. | Wyświetla stronę konta klienta | |
nbr-product-page.tplDisplays the number of products in the current page. | Wyświetla liczbę produktów na bierzącej stronę | |
new-products.tpl | Displays a block with the new products. |
|
order-address-multishipping-products.tplDisplays the addresses to deliver a product to in a multishipping situation. | Wyswietla adresy dostarczenia produktów w sytuacji multishippingu |
|
order-address-multishipping.tpl |
| |
order-address-product-line.tpl | ||
order-address.tpl |
| |
order-carrier.tpl |
| |
order-confirmation.tpl |
| |
order-detail.tpl | ||
order-follow.tpl | ||
order-opc-new-account.tpl | ||
order-opc.tpl |
| |
order-payment.tpl |
| |
order-return.tpl |
| |
order-slip.tpl | ||
order-steps.tpl | ||
pagination.tpl | ||
password.tpl |
| |
prices-drop.tpl |
| |
product-compare.tpl | ||
product-list-colors.tpl | ||
product-list.tpl | ||
product-sort.tpl | ||
product.tpl |
| |
products-comparison.tpl | ||
restricted-country.tpl | ||
scenes.tpl | ||
search.tpl |
| |
shopping-cart-product-line.tpl | ||
shopping-cart.tpl |
| |
sitemap.tpl |
| |
stores.tpl | ||
store_infos.tpl | ||
supplier-list.tpl | ||
supplier.tplMakes it possible to display the list of products per supplier. | Umożliwia wyświetlanie produktów za dostawcę |
|