Child pages
  • Układanie Fundamentów Tematu

Versions Compared

Key

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

Układanie Fundamentów Tematu

Table of Contents

Dwa pierThe 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:

  1. Go the "Themes" preference page.
  2. Click on the "Add new theme" button, at the top right of the screen.
  3. In the "Import theme" screen that opens, scroll down to the "Create new theme" section and click on the "Create new theme" button.
  4. 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".
  5. 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.

...

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:

...