Child pages
  • Podstawy rozwoju szablonu

Versions Compared

Key

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

...

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 Domyślny szablon (/themes/default-bootstrap) uses używa HTML5, CSS3 and jQueryi JQuery-driven steruje JavaScript (http://jquery.com/). We use Używamy jQuery v1.11+.

Smarty 3

At its core, a PrestaShop's theme is based on the Smarty 3 template engine W swej istocie motyw PrestaShop jest oparty na silniku szablonu Smarty 3 (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 co pozwala programistą i developerom łatwo zabudować własnego motywu, z niewielką wiedzą techniczną  .

Smarty 2 jest od dawna przestarzała i nie powinna być używana do motywów w PrestaShop 1.6 themes.

Bootstrap v3

Since version Od kiedy wersja 1.6 , PrestaShop includes the Bootstrap front-end framework PrestaShop zawiera strukturę czołową Bootstrap  (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.

PrestaShop uses Bootstrap for both its front office and back office default templates.

Info

Designers creating a new back office theme MUST use Bootstrap.

Designers creating a new front office theme SHOULD use Bootstrap. While this is not an obligation, Bootstrap is deeply built into PrestaShop.

Bootstrap initially uses the LESS dynamic stylesheet language Jest to zbiór narzedzi HTML i CSS które pozwalają zbudować programiście ładną i responsywną  stronę (co oznacza, że można je łatwo dostosować do dowolnej wielkości ekranu). Początkowo służyło to do wewnętrznych wzorców i projektów w firmie Twitter, ale szybko urosło do najczęściej używanej ramy struktury czołowej.

PrestaShop używa Bootstrapa dla obydwu narzędzi szablonu zarówno czołowego jak i panelu administracyjnego.

Info

Projektanci tworzący nowy panel administracyjny muszą używać Bootstrapa.

Projektanci tworzący nową stronę czołową powinni użyć Bootstrapa. Nie jest to obligatoryjne, ale Bootstrap jest mocno wkomponowany w PrestaShop.

Bootstrap początkowo używa mniej dynamicznego arkusza stylów LESS (http://lesscss.org/), but PrestaShop uses the Bootstrap For Sass port ale PrestaShop używa Bootstrapa dla portu Sass (https://github.com/twbs/bootstrap-sass), Sass being the language that inspired LESS. This makes it possible to use the Compass 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 jest językiem który inspiruje LESS. To umożliwia użycie ramy Compass.

Przewodnik dla projektanta poruszy ten temat głębiej o Bootstrapie w późniejszym rozdziale.

Sass i Compass

Wersja 1.6 także daje możliwość użycia języka skryptu Sass (http://sass-lang.com/), and the accompanying Compass frameworki komponuje się z ramką Compassa.

Sass (short for Syntactically Awesome Stylesheets) is a CSS3 preprocessor – that is, a layer between the stylesheets you author and the .css files you serve to the browser (as said by Dan Cederholm hereskrót składniowy arkusza stylów) jest preprocesorem CSSS3 czyli warstwą pomiedzy arkuszami stylów których jesteś autorem i.css plików które służą przeglądarce (jak powiedział Dan Cederholm: http://alistapart.com/article/why-sass). It aims at making life easier when creating CSS files by extending the CSS language:

  • It adds variables, mixins, and functions (with heritage).
  • It helps prevent code repetition.
  • It makes it easier to maintain code.
  • It makes writing code faster.
  • etc.

Instead of directly creating .css files, the designer creates .sass or .scss files which are then interpreted into standard CSS files using a command-line program or an online tool.
Note that this can be done with altering the way you are used your usual CSS process: as Dan Cederholm writes again, "Sass is an extension of CSS3, and its SCSS (“Sassy CSS”) syntax is a superset of CSS3. Meaning, any valid CSS3 document is a valid SCSS document as well."

For its partMa on na celu ułatwianie życia podczas tworzenia plików CSS poprzez rozszerzenie języka CSS:

  • Dodaje zmienne wstawek i funkcje (dziedziczy).
  • To pomaga w zapobiec powtórzenia kodu.
  • To sprawia, że łatwiej jest zachować kod.
  • To sprawia, że piszę się go szybciej.
  • etc.

Zamiast bezpośredniego tworzenia plików .css, projektant tworzy plik .sass albo.scss który jest interpretowany do standardu pliku CSS  przy użyciu wiersza polecenia lub narzędzia online.
Należy pamiętać, że można to zrobic zmieniając sposób w jaki używane jest zwykły proces CSS: Jak znowu pisze Dan Cederholm, "Sass jest przedłużeniem CSS3, a jego SCSS (“Sassy CSS”) składnia jest rozszerzeniem CSS3. Oznacza to, że ważny dokument CSS3 jest również ważnym dokumentem SCSS."

Ze swej strony, Compass (http://compass-style.org/) is a Sass framework – that is, a combination of tools created to help you build and manage your CSS files using the Sass language. It is written in Ruby.

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:

...

jest ramą Sassa – czyli kombinacja narzędzi jest stworzoną, aby pomóc budować i zarządzać plikami CSS używając języka Sass. Jest napisany w Ruby.

Ten przewodnik projektanta zagłębi się mocniej w Sass i Compass w następnym rozdziale.

Porady

Rozszerzenia przeglądarki

Wszyscy projektanci stron i programiści powinni stosować następujące rozszeżenia przeglądarki:

They provide a lot of useful tools, among which Zapewniają one wiele przydatnych narzędzi, wśród których DOM explorer, edytor CSS editors, network inspector, etcitp., and are a huge help when debugging a to ogromna pomoc podczas debugowania HTML, CSS, JavaScript, and even Ajax requestsi nawet żądań Ajaxa.

Best practices

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

...

Najlepsze porady

Tutaj znajduje się niewyczerpująca lista najlepszych porad którymi powinieneś się kierować kiedy kreujesz widok:

  1. Nie mieszaj kodu HTML i PHP; używaj tagów Smarty w celu uzyskania dynicznej strony.
  2. Nie mieszaj kodu HTML i CSS; kod CSS wstawiaj w separator pliku.css.
  3. Zawsze uprawamacniaj swój kod HTML i CSS używając walidatora W3C: http://validator.w3.org/ for dla HTML and i XHTML, http://jigsaw.w3.org/css-validator/ for dla CSS.
  4. Do not make SQL queries from a PHP controller Nie rób zapytań SQL z kontrolera PHP (.php file at the w pliku root of PrestaShop); use the existing methods from the PrestaShop classes, or create new methods for these classes.
  5. Always check if a method you need already exists in the available classes.
  6. Do not ever edit PrestaShop's own files; always build your code into modules in order to facilitate updates.
  7. Make sure to always produce a clear and readable code, making it easy to maintain that code for anyone in the foreseeable future.
  8. Do comment your code, and write both method names and comments in plain English.
  9. When editing the theme on a production site, always put the shop in Maintenance Mode first, via the back office' "Maintenance" preference page.
  10. Use modern browsers, such as Firefox (latest non-beta version), Google Chrome (latest non-beta version), IE10+ or Opera (latest non-beta version) – and make sure your friends and family members do too!
  11. Whenever possible, use CSS sprites (read używaj istniejące metody z klasy PrestaShop, albo użyj nowej metody dla tej klasy.
  12. Zawsze sprawdzaj czy metoda której potrzebujesz czasem już nie istnieje w dostępnych klasach.
  13. Nigdy nie edytuj plików własnych PrestaShop, zawsze twórz swój kod w modułach w celu ułatwienia aktualizacji.
  14. Zawsze upewnij się że tworzysz przejrzysty i czytelny kod, na przyszłość twój kod będzie łatwy do odczytania przez inne osoby.
  15. Komentarze do kodu i nazwy metod napisz w prostym języku angielskim.
  16. Kiedy edytujesz motyw na stronie produkcyjnej sklepu, zawsze pamiętaj żeby najpierw umieścić sklep w trybie konserwacji poprzez panel administracyjny "Konserwacja " w zakładce preferencje.
  17. Używaj nowoczesnch przeglądarek takich jak, Firefox (najnowsza wersja non-beta), Google Chrome (najnowsza wersja non-beta), IE10+ albo Opera (najnowsza wersja non-beta) – i upewnij się że twoi znajomi rodzina również!
  18. Jeśli to tylko możliwe używaj CSS sprites (czytaj http://www.alistapart.com/articles/sprites and http://www.alistapart.com/articles/sprites2/).
  19. Disable your browser's cache when developingWyłącz pamieć podręczną swojej przeglądarki kiedy pracujesz.