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:

• 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ęć:

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:
   • 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".
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/ serwer FTP

You can of course create that copy yourself:

1. Go to the /themes folder for your installation of PrestaShop (either online or on your desktop).
2. 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.
3. 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:

• Template file: /themes/default-bootstrap/modules/blocklayered/blocklayered.tpl .
• 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 folder: /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:

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:

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:

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.

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 file.

/* 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;
}

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.

Icons are a special case: PrestaShop 1.6 uses FontAwesome as its icon set: 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:

• use a single file to display many different icons.
• enjoy great flexibility: size, color, drop shadow, and anything that can be done with the power of CSS.
• have an excellent render on all screen sizes : PC, TV, Retina, etc.)

The template files

A template files (.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 presentation.

<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 {...} 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: delivery-slip.style-tab.tpl and invoice.style-tab.tpl. You can find these in the folder /pdf/. The following table shows how the style tabs are linked:

Note that if you would like to apply a different style template, you will have to override the corresponding PDF Class in the directory /classes/pdf/.

The internal styling in the style tabs can only be applied to the main PDF template files, such as 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.

First, here is the list of necessary template files (spoiler alert: there are 60 of them. Yes, all are necessary to various PrestaShop features):