Child pages
  • Podstawy rozwoju szablonu

Versions Compared

Key

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

Podstawy rozwoju

...

szablonu

Table of Contents

Koncepcja

System szablonów PrestaShop pozwala developerom i programistom łatwo zbudować swoją własną templatkęswój własny szablon, pod warunkiem, że mają solidne podstawy techniczne.

System templatek szablonów jest zbudowany na 3 - warstwowej architekturze :

  • Poziom danych (obiekty danych). Dostęp do bazy danych jest kontrolowany poprzez pliki w folderze  /classes.
  • Warstwa aplikacji (kontrola danych). Treści dostarczane przez uzytkowników są kontrolowane przez pliki w folderze głównym.
  • Poziom prezentacji (projekt).Wszystkie pliki motywu tematu są w folderze /themes.

Templatka Szablon należy do warstwy prezentacji: Szablon plików znajduje się w folderze /themes, będzie obsługiwać dane dostępowe wysyłane przez warstwę aplikacji i ich powrót do warstwy aplikacji.

...

Info

Jest to ta sama zasada jak  w Model-View-Controller (MVC) architektury, tylko jest to prostrzy i bardziej przystepny sposób.
Dowiedz się więcej na temat MVC w Wikipedii: http://en.wikipedia.org/wiki/Model-view-controller

Model

Model pokazuje zachowanie aplikacji: przetwarzania danych, interakcji bazy danych etc.

Opisuje lub zawiera dane które zostały przetworzone przez aplikacje. Zarządza tymi danymi i zapewnia ich integralność.

Widok

Widok jest interfejsem użytkownika z którym użytkownik wchodzi w interakcje.

...

Widok nie przetwarza, tylko wyświetla widok przetwarzania wykonywanego przez model i komunikuje się z użytkownikiem.

Kontroler

Kontroler ma za zadanie synchronizować zdarzenia pomiędzy Modelem a Widokiem i aktualizować obydwa jeśli jest taka potrzeba. Otrzymuje on wszystkie zdarzenia użytkownika i inicjuje potrzebne czynności do wykonania.

Jeśli jest potrzeba zmian danych, Kontroler zapyta Model w celu zmiany danych, a Model z kolei powiadomi, że dane zostały zmienione, tak aby widok mógł się aktualizować samoczynnie.

Jak działa

...

szablon

Templatka Szablon PrestaShop to zestaw plików które można edytować w celu zmiany wyglądu sklepu internetowego.

Oto kilka ważnych ciekawostekinformacji:

  • Wszystkie motywy tematy i pliki mają swoje lokalizacje w folderze  folderze głównym /themes.
  • Każdy z motywów ma swój własny sub-folder w folderze głównym motywówtematów.
  • Każdy z motywów tematów jest wykonany z pliku szablonów (.tpl), pliku obrazów (.gif, .jpg, .png), z jednego lub więcej plików CSS (.css), i czasami także z plików JavaScript (.js).
  • Każdy z motywów temtów ma podgląd 180*200 preview.jpg  pliku w folderze umożliwiając właścicielowi sklepu zobaczenie wyglądu sklepu bezpośrednio z panelu adminstracyjnego, a następnie wybór odpowiedniego motywutematu.

Specyficzne foldery

...

szablonu

Trzeba być świadomym, że istnieje 5 głównych folderów PrestaShop:

  • /modules: to To gdzie moduły są zlokalizowane. Moduł zawiera pliki szablonów, które mogą być w części tematycznej przedefiniowane.
  • /themes: jest Jest miejscem gdzie wszystkie motywy tematy są zlokalizowane. Domyślny temat 1.5 motyw jest w folderze /default (w 1.4, był w /prestashop).
  • /mails: this is where all the e-mail templates are located. E-mail templates should ideally reflect the style and design of the main theme. Each sub-folder contains language-specific templates
  • /img: this is where all the store's images are located. Theme-specific images are stored in the theme's own /img folder.
  • /pdf: this is where all the document models are located.

General information

How a theme works

A PrestaShop theme is a set of files which you can edit in order to change the look of your online shop.

Here are a few important tidbits:

  • All themes have their files located in the /themes root folder.
  • Each theme has its own sub-folder, in the main themes folder.
  • Each theme is made of template files (.tpl), image files Tutaj są zlokalizowane wszystkie e-maile szablonu. E-mail szablonu  powinien dokładnie odzwierciedlać styl i projekt głównego szablonu. Każdy sub-folder zawiera szablony dla danego języka.
  • /img: W tym miejscu są zlokalizowane wszystkie obrazy sklepu. Specyficzne obrazy dotyczące szablonu są we własnym folderze /img
  • /pdf: Tutaj są zlokalizowane wszystkie modele dokumentów.

Generalne informacje

Jak działają szablony

Szablon PrestaShop jest zestawem plików które można edytować w celu zmiany wyglądu własnego sklepu internetowego.

Oto kilka ważnych ciekawostek:

  • Wszystkie motywy mają swoją lokalizacje w w folderze głównym /themes.
  • Każdy z motywów ma swój własny sub-folder w głównym folderze tematów.
  • Każdy z motywów jest wykonany z pliku szablonów  (.tpl), pliki obrazów (.gif, .jpg, .png), one or more CSS files z jednego lub więcej plików CSS (.css), and sometimes even JavaScript files i czasami nawet z plików JavaScript (.js).
  • Each theme has a Każdy z nich ma 180*200 preview.jpg image file in its folder, enabling the shop-owner to see what the theme looks like directly from the back office, and select the theme appropriately.

Theme-specific folders

As a theme developer, there are mostly 5 root folders you must be aware of:

  • /modules: this is where all the modules are located. A module has templates files, can also redefine theme parts.
  • /themes: this is where all the themes are located.
    • The default 1.6 theme is in the /default-bootstrap folder.
    • The default 1.5 theme was in the /default folder.
    • The default 1.4 theme was in the /prestashop folder.
  • /mails: this is where all the e-mail templates are located. E-mail templates should ideally reflect the style and design of the main theme. Each sub-folder contains language-specific templates.
  • /img: this is where all the store's images are located. Theme-specific images are stored in the theme's own /img folder.
  • /pdf: this is where all the document models are located.

Overview of a theme's folder

Here is an overview of the file structure of a PrestaShop theme (here, the default theme):

Image Removed

  • 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 /mobile folder contains the mobile version of the theme.
  • The /modules folder contains the needed template files for many modules.
  • The root of the folder contains TPL files only (Smarty files), as well as the preview.jpg thumbnail file.

Technologies

Basics

...

  • plik obrazka w folderze, umożliwiający właścicielowi sklepu zobaczenie wyglądu szablonu bezpośrednio z pozycji panelu adminstracyjnego i następnie wybór odpowiedniego motywu.

Specyficzne foldery szablonów

Jako developer musisz zwrócić uwagę na 5 głównych folderów:

  • /modules:to gdzie wszystkie moduły są zlokalizowane. Moduły szablonów  mają swoje pliki, możesz również przedefiniować części tematyczne.
  • /themes: tutaj są zlokalizowane wszystkie motywy.
    • Domyślny motyw 1.6 jest w folderze /default-bootstrap.
    • Domyślny motyw 1.5 był w folderze /default.
    • Domyślny motyw 1.4 był w folderze /prestashop.
  • /mails: Tutaj są zlokalizowane wszystkie szablony. Szablony e-mail powinny idealnie odzwierciedlać styl i design głównego motywu. Każdy sub-folder zawiera szablony dla danego języka.
  • /img: Tutaj są zlokalizowane obrazki sklepu. Specyficzne motywy obrazków są zapisywane we własnym folderze  /img.
  • /pdf: Tutaj są zlokalizowane modele dokumentów.

Podgląd na folder tematów

Oto podgląd na strukturę tematów w PrestaShop  (tutaj domyśny motyw):

Image Added

  • Folder /css, zawiera wszystkie pliki CSS
    • Folder sass zawiera wszystkie foldery Sass.scss Pliki źródłowe, za nim zostaną skompilowane w plikach CSS.
  • Folder /font contkie potrzebuje plików trzcionek.
  • Foder /img zawiera wszystkie obrazki.
  • Folder/js zawiera wszystkie pliki JavaScript.
  • Folder /lang zawiera wszystkie tłumaczenia tematu.Jego prawa dostępu powinny być ustawione na CHMOD 666 (na przykład), tak, że narzędzie panelu adminstracyjnego do tłumaczenia może odczytywać i zapisywać do niego.
  • Folder/mobile zawiera mobilną wersje strony.
  • Folder /modules  zawiera potrzebny szablon plików do wielu modułów.
  • Folder główny zawiera tylko pliki TPL (pliki Smarty), jak również plik miniatur preview.jpg.

Technologie

Podstawy

Tak jak każda strona, szablony PrestaShop są wyświetlane jako mix HTML, CSS i JavaScript. Te trzy języki są podstawą każdej strony internetowej, dlatego powinienieś je znać za nim podejmiesz się edycji istniejącego tematu lub utworzysz nowy.

More specifically, the default template (/themes/default-bootstrap) uses HTML5, CSS3 and jQuery-driven JavaScript (http://jquery.com/). We use jQuery v1.11+.

Smarty 3

At its core, a PrestaShop's theme is based on the Smarty 3 template engine (http://www.smarty.net/), which allows web-designers and developers to easily build their own theme, with little technical knowledge.

Smarty 2 has long been deprecated, and should not be used for PrestaShop 1.6 themes.

Bootstrap v3

Since version 1.6, PrestaShop includes the Bootstrap front-end framework (http://getbootstrap.com/). It is a collection of HTML and CSS tools built to help web designer create consistently beautiful and responsive designs (meaning that they can easily adapt to any screen size). Initially an internal effort to document and share common design patterns and assets within the Twitter company, it has quickly grown to become the most used front-end framework.

...

This Designer Guide will dive on more depth into Bootstrap in a later chapter.

Sass and Compass

Version 1.6 also makes it possible to use the Sass scripting language (http://sass-lang.com/), and the accompanying Compass framework.

...

This Designer Guide will dive on more depth into Sass and Compass in a later chapter.

Advices

Browser extensions

All web-designers and developers should use the following developer browser extensions:

...

They provide a lot of useful tools, among which DOM explorer, CSS editors, network inspector, etc., and are a huge help when debugging HTML, CSS, JavaScript, and even Ajax requests.

Best practices

Here is a non-exhaustive list of best practices that you should follow when creating a theme:

...