Child pages
  • Organizacja szablonu

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Organization of a Theme

Let's diving into the way a theme is organized: folders, files, where they belong and how to handle them correctly

Table of Contents

Folders

The main folders of any PrestaShop theme are those:

  • The /cache folder contains all the temporary files that are generated and reused in order to lighten the server load. The folder is empty by default.
  • The /css folder contains all CSS files.
    • The /sass folder contains all the Sass .scss source files, before they are compiled into the CSS files.
  • The /font folder contains the needed font files.
  • The /img folder contains all images.
  • The /js folder contains all the JavaScript files.
  • The /lang folder contains the theme's translations. Its access rights should be set at CHMOD 666 (for instance), so that the back office translation tool can read and write into it.

The following folders are not directly theme-related, but help you make sure the whole of PrestaShop's feature have a design that is consistent with your theme:

...

Organizacja Szablonu

Zanurzmy się w organizacje szablonu: foldery, pliki, do których należą i jak je poprawnie obsługiwać.

Table of Contents

Foldery

To są główne foldery motywu PrestaShp:

  • Folder/cache zawiera wszystkie pliki tymczasowe, które są generowane i ponownie wykorzystane w celu zmniejszenia obciążena serwera. Folder jest domyslnie pusty.
  • Folder /css zawiera wszystkie pliki CSS.
    • Folder /sass zawiera wszystkie pliki żródłowe Sass .scss, za nim zostaną one skompilowane plikach CSS.
  • Folder/font zawiera niezbędne pliki trzcionek.
  • Folder /img zawiera wszystkie obrazy.
  • Folder/js zawiera wszystkie pliki JavaScript.
  • Folder/lang zawiera wszystkie tematy tłumaczeń. Jego prawa dostepu powinny być ustawione na CHMOD 666 (na przykład), tak że narzędzie do tłumaczenia w panelu administracyjnym może odczytywać i zapisywać do niego.

Nastepujące foldery nie są bezpośrednio związane tematycznie, ale mają pomóc upewnić się, że cała funkcja PrestaShop ma konstrukcje któa jest zgodna z szablonem:

  • Folder/mails zawiera szablony które wysyła PrestaShop (potwierdzenie zamówienia, żądanie chasła, powiadomienia wysyłki itp.).
  • Folder/mobile zawiera mobilną wersje motywu,
  • Folder/modules zawiera pliki szablonu dla wielu modułów.
  • Folder/pdf zawiera pliki szablonu dla plików PDF, które PrestaShop generuje ( folder contains the template files for the PDF files that PrestaShop generates (invoicesfaktury, delivery slip, supply orders, etcpotweirdzenie dostawy, zamówienia dostawy, itd.).

The root of the folder contains TPL files only, as well as the Folder root zawiera tylko pliki TPL, a także pliki miniatur preview.jpg thumbnail file .

...

Pliki miniatur

The preview.jpg file at the root of the theme's folder is the thumbnail that is used by PrestaShop in its back office theme selector.

It serves as a visual reminder of what the theme is, and you should therefore make it a screenshot rather than your company's logo.

It can have any size – the default theme's is 180*445 pixels.

It must be a JPEG file.

CSS and Sass

CSS

The theme's CSS files are located in the /css folder.

It is recommended to have a common style sheet for global CSS rules: global.css.
Then, each of the controller should have its own CSS file: for instance, product.css for the Product pagePlik  preview.jpg  w katologu głównym w folderze szablonu jest miniaturą która jest używana przez selektor motywów w panelu administracyjnym PrestaShop.

Służy ona jako wizualne przypomienie tego co jest tematem, a zatem należy zrobić zrzut ekranu zamiast loga firmy.

To może mieć dowolny rozmiar - domyślny motyw ma 180'445 pikseli.

Musi to być plik JPEG.

CSS i Sass

CSS

Pliki szablonu CSS są zlokalizowane w folderze /css.

Zaleca się, aby mieć wspólny arkusz stylów dla globalnych reguł CSS: global.css.
Następnie każdy regulator powinien mieć własny plik CSS na przykład, product.css dla strony produktu.

Sass / Compass

Pliki Sass and Compass files are optional: you do not need to use these tools to build the CSS files for your back office theme.

If you do use Sass and Compass, we strongly advise to put the source .scss files in the /sass theme, so that other developers can have access to theme and rework them more easily.

From there, you can generate the CSS files in the /css folders from the Sass files in the /sass folder!

Font

The /font folder is optional: it contains the fonts that you chose to use for your theme.

For instance, the default PrestaShop theme uses the Font Awesome font set i Compass są opcjonalne: Nie trzeba używać tych narzędzi to tworzenia plików CSS dla motywu panelu administracyjnego.

Jeśli używasz Sass i Compass radzimy umieścić pliki żródłowe.scss w temacie /sass, aby inni programiści mogli mieć dostep do motywu i łatwiej mogli go przerobić.

Stamtąd możesz generować pliki CSS w folderach/css z plikami Sass w folderze /sass !

Trzcionka

Folder/font jest opcjonalny: Zawiera trzcionki które używa się do tworzenia motywu.

Na przykład domyslny motyw PrestaShop używa trzcionkę Font Awesome (http://fortawesome.github.io/Font-Awesome/) for its responsive icons, and therefore has the following files in its /font folderdla responsywnych ikon i w związku z tym ma następujące pliki z folderu /font:

  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff

If you do not build your theme with a specific font or icon set in mind, you can skip this folder.

Image

Theme-related images are to be stored in the /img folder.

You can create sub-folder for a better organization. For instance, the default theme has the following subfolders:

  • /icon for simple icons (for instance, those not available in your chosen font set).
  • /jquery for jQuery-specific images.

You can create more if needed.

JavaScript

JavaScript files are to be stored in the /js folder.

Unlike CSS files, we recommend you NOT to have a common/global JavaScript file, nor should you have a single file per controller.

Language

All the translation files are to be stored in the /lang folder.

Files should be named after their ISO 3166-1 alpha-2 code in lowercase: for instance, fr.php.

These files should be generated by PrestaShop integrated translation tool (located in the Localization / Translations menu).

The mobile theme

Info

The default theme in PrestaShop 1.6 is fully responsive, meaning that it adapts itself to any screen size.

Your own theme should be responsive too! If not, then you should build an alternative theme targeted at smaller screen – or use/adapt the one available in PrestaShop 1.5's default theme.

PrestaShop has a mobile theme option in its back office: in the Preferences / Themes page, the "Mobile" tab in the "Your current theme" section gives you the following choices: disable the option, or enable it for smartphones, tablets or both.

Once this option is enabled, the theme that is displayed to the mobile visitor is not the default desktop theme but the alternative theme that is located in the /mobile folder: it is better suited for small screen sizes, and therefore your customers will appreciate the difference.

In essence, the content of the /mobile folder is another complete PrestaShop theme: it has the same overall file structure with its own /css, /img and /js folders, and its own template files.

Files

Templates files

PrestaShop uses the Smarty template engine for its theme system. Smarty makes it possible to separate content (the information being presented) from presentation (the way the information is displayed). The template file mixes both in order to generate a fully-formed HTML file.

A template file is built with two types of block of code:

  • Code that does not change throughout the HTML rendering process: mostly design sections, and some immutable content (logo, menu, links, etc.).
  • Code that does change depending on the context of the rendered page: variables in the code are replaced with the actual content that is expected by the visitor in this context.

Note that you can generate more than just HTML pages with Smarty: XML files, text files, email file, etc.

See for instance the constant and variable blocks in 404.tpl, the template file displayed when PrestaShop needs to send a 404 File Not Found error message:

...

Jeśli nie tworzysz swojego szablonu z konkretnej trzcionki, lub zestawu ikon możesz pominąć ten folder.

Obraz

Obrazy związane tematycznie powinny być przechowywane w folderze /img.

Można utworzyć podfolder dla lepszej organizacji. Na przykład, domyślny motyw ma następujące podfoldery:

  • /icon dla prostych ikon (na przykład, nie są dostępne z wybranym wymiarem czcionek).
  • /jquery dla specyficznych obrazów jQuery. .

Można stworzyć więcej jeśli jest taka potrzeba.

JavaScript

Pliki JavaScript mają być przechowywane w folderze /js .

W przeciwieństwie do plików CSS, zalecamy, aby nie mieć współnego pliku/globalnego JavaScript, ani nie powinień być pojedynczy plik za kontrolera.

Język

Wszystkie pliki z tłumaczeniami powinny być przechowywane w folderze /lang.

Pliki powinny się nazywać po ich ISO 3166-1 alpha-2 kod z małej litery na przykład, fr.php.

Pliki te pownny być generowane przez zintegrowane narzędzie do tłumaczenia PrestaShop (znajduje się w menu Lokalizacja/Tłumaczenia).

Szablon mobilny

Info

Domyślny motyw PrestaShop 1.6 ijest w pełni responsywny, co oznacza, że dostosowuje się do każdego rodzaju ekranu. .

Twój własny motyw graficzny powinien być także responsywny! Jeśli nie jest, to powinieneś stworzyć alternatywny szablon ukierunkowany na mniejsze ekrany - albo użyj/dostosować jeden z dostepnych domyślnych szablonów PrestaShop 1.5.

PrestaShop posiada w panelu adminstracyjnym opcje szablonu mobilnego: Na stronie Preferencje/Motywy, "Mobilne" w zakładce "Twój aktualny szablon" sekcja daje Tobie następujące możliwości: Wyłącz opcje, lub włącz ją dla smarfonów, tabletów lub obydwu z nich.

Gdy ta opcja jest włączona, to szablon który jest wyświetlany na telefonie użytkownika nie jest domyślnym szablonem pulpitu, ale alternatywnym szablonem znajdującym się w folderze/mobile: To lepiej nadaje się do niewielkich rozmiarów ekranu, a zatem klienci docenią różnice.

W istocie zawartość folderu/mobile to kolejny kompletny szablon PrestaShop: Ma taką samą ogólną strukturę pliku z własnym /css, /img i folderami /js, a także z własnymi plikami szablonów.

Pliki

Pliki Szablonów

PrestaShop używa silnika szablonu Smarty dla swojego systemu szablonów. Smarty umożliwia oddzielenie treści (informacje są prezentowane) od prezentacji (sposób w jaki informacje są wyświetlane). Plik szablonu łączy obydwa w pełny utworzony plik HTML.

Plik szablonu jest zbudowany z dwóch rodzajów bloków kodu:

  • Kod który nie zmienia się w trakcie całego procesu renderowania HTML: Przede wszytkim zaprojektowane sekcje i niektóre niezmienne treści (logo, menu, linki, itd.)
  • Kod który ulega zmianie w zależności od kontekstu renderowanej strony: Zmienne w kodzie są zastępowane przez rzeczywiste zawartości, który jest oczekiwany przez użytkownika w tym kontekście.

Zauważ, że można generować więcej niż tylko strony HTML ze Smarty: Pliki XML, pliki tekstu, pliki email, itd.

Zobacz na przykład stałe i zmienne bloki w 404.tpl, kiedy wyświetlany plik szablonu PrestaShop musi wysłać komunikat o błędzie 404 Nie znaleziono strony:

Code Block
<div>
 <div>
 <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')}" method="post">
		 <div>
			 <label for="search_query">{l s='Search our product catalog:'}</label>
			 <input id="search_query" name="search_query" type="text" />
    		<button type="submit" name="Submit" value="OK">{l s='Ok'}</button>
		 </div>
	 </form>
 	
 <div>
		 <a href="{$base_dir}" title="{l s='Home'}">{l s='Home page'}</a>
	 </div>
</div>

(this is a simplified version of the real template file, which you can find hereto jest uprostrzona wersja szblonu pliku, którą możesz znaleźć tutaj: https://github.com/PrestaShop/PrestaShop/blob/1.6/themes/default-bootstrap/404.tpl)

People familiar with HTML (which you should be if you intend to build a PrestaShop theme) will immediately notice some Osoby zaznajomione z HTML(które powinny być jeśli zamierzają zbudować szablon PrestaShop) natychmiast zauważą pewne{$tag_name} tags in the regular HTML content. These are PrestaShop's Smarty variables.There are already a few interesting variables here tagi w zwykłej zawartości HTML. Są to zmienne PrestaShop Smarty.

Istnieje tutaj już kilka interesujących zmiennych:

  • {$img_dir} returns the absolute file path for the zwraca bezwględną ścieżkę pliiku w folderze/img folder.
  • {l s='My text'} is a special method for strings that need to be translated. Every string should be encapsulated in a jest specjalna metoda ciągów, które muszą być przetłumaczone. Każdy ciąg powinien być zamknięty w sposób {l s='...'} tag.
  • {$link->getPageLink('search')} returns the absolute file path to another template file, in this case the zwraca bezwględną ścieżkę pliku do innego pliku szablonu, w tym przypadku do pliku search.tpl file .
  • {$base_dir} returns the absolute file path to the root of PrestaShop's folder – and therefore, to the home page.

...

  • zwraca bezwględną ścieżkę pliku do katogu głównego folderu PrestaShop  – a zatem do strony głównej.

PrestaShop używa silnik Smarty 3. Możesz się dowiedzieć więcej o Smarty i jego składni tutaj: http://www.smarty.net/docs/en/smarty.for.designers.tpl.

Style sheets

Template files render into HTML files, with no styling (except for inline styles, if any), which means that the blocks of content are displayed as-is, bare bones, one block after the other. This is where style sheets (CSS files) are useful: they are here to redefine the way the blocks of content are displayed, sometimes even rearranging whole portions of the page in order to make it look better. Font, margin, columns and many other design aspects can be recomposed using CSS.

You can create and edit CSS files any way you want, making sure that they are stored in the /css folder.
It is recommended to have a common style sheet for global CSS rules: global.css.
Then, each of the controller should have its own CSS file: for instance, product.css for the Product page.

If you are starting from the default theme's style sheet files, you should rather edit the corresponding Sass files in the /sass folder, then generate the new CSS files and store it in the /css folder. This ensures consistency between CSS and Sass files.

...

Arkusze stylów

Pliku szablonów renderują do plików HTML, bez stylizacji (z wyjątkiem stylów inline, jeśli w ogóle), co oznacza, że bloki treści są wyświetlane jak są szkielety, jeden blok po drugim. To gdzie arkusze stylów (pliki CSS) są użyteczne: Są tutaj po to aby przedefinowac sposób w jaki bloki zawartości się wyświetlają, czasami nawet całe rozmieszczenie części strony, aby wyglądała lepiej. Czcionki, margines, kolumny i wiele innych aspektów projektowania można komponować za pomocą CSS.

Można tworzyć i edytować pliki CSS w dowolny sposób, upewniając się, że są przechowywane w folderze /css.
Zaleca się aby mieć wspólny arkusz stylów dla globalnych reguł CSS: global.css.
Nastepnie każdy z kontrolerów powinen mieć swój własny plik CSS: na przykład. product.css dla strony produktu.

Jeśli zaczynasz z plików arkuszy stylów domyślnego motywu, Powinieneś raczej zmodyfikować odpowiednie pliki w folderze Sass /sass, nastepnie wygenerować nowe pliki CSS i przechowywać go folderze/css. Zapewnia to spójność plików CSS i Sass.

Oto przykład pliku Sass:

Code Block
languagecss
titleFilename: /sass/product.scss
.primary_block {
  margin-bottom: 40px;
}
.top-hr{
  background: $top-line-color;
  height: 5px;
  margin: 2px 0 31px;
}

...which gets rendered into these CSS linesktóra zostanie wygenrowana w tych liniach CSS:

Code Block
languagecss
titleFilename: /css/product.css
/* 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;
}

As you can see, the Jak widzisz zmienna $top-line-color variable in the Sass file turns into the #c4c4c4 value in the rendered CSS file. Sass variables in the default PrestaShop 1.6 theme are stored in the   w pliku Sass przemienia się w wartość #c4c4c4 w renderowanym pliku CSS. Zmienne Sass w domyślnym szablonie PrestaShop 1.6 są przechowywane w pliku _theme_variables.scss file.

Image files

...

Pliki obrazów

Obrazy używane przez szablon powinny być przechowywane w folderze /img (i podfolderze dla szczególnych przypadków, na przykład /img/icon for dla ikon Gif icons and /img/jquery for jQuery-specific images).
You can use pretty much any kind of image you wish when creating your design.

In terms of icons, PrestaShop uses the Font Awesome font set, stores in the /font folder. Using a font for icons has many advantages:

  • A single file for many different icons.
  • Many possible variations: size, color, shades, rotation, etc.
  • Display equally great on all screen sizes and resolutions: PC, TV screen, Retina, etc.

Tools

As an aside, you need a solid IDE (and a good knowledge of it) in order to quickly locate the needed file with a grep-like tool.

You also need to get acquainted with pre-compilation tools, to make your life easier dla szczególnych obrazów jQuery).
Możesz korzystać z prawie każdego rodzaju obrazu jaki chcesz podczas tworzenia projektu.

Pod względem ikon PrestaShop używa zestawu czcionek Font Awesome przechowywanym w folderze /font. Używanie czcionki dla ikon ma wiele zalet:

  • Pojedynczy plik dla wielu różnych ikon.
  • Wiele możliwych wariantów: rozmiar, kolor, cienie, obracanie itd.
  • Wyświetlanie równie dobrze na wszystkich rozmiarach i rozdzielczościach; PC, ekranch telewizorów, Retina, itd.

Narzędzia

Tak na marginesie trzeba mieć solidne IDE (i jego dobrą znajomość) w celu szybkiego znalezienia poszukiwanego pliku takim narzędziem jak grep.

Należy również zapoznać się z narzędziami pre-kompilacji, aby ułatwić sobie życie.