wdrożenia PrestaShop

Tworzenie szablonu od podstaw

  • 7 Odpowiedzi
  • 7888 Wyświetleń

0 użytkowników i 1 Gość przegląda ten wątek.

*

Offline jrrewers

  • Nowy
  • *
  • 9
  • 0
  • prestashop
  • PrestaShop: 1.6
  • Status: Programista
Tworzenie szablonu od podstaw
« dnia: Październik 21, 2014, 10:43:12 pm »


Cześć,
zaczynam uczyć się tworzyć od podstaw szablony do presty, albo inaczej mówiąc - kodować pliki .psd do gotowego szablonu.
Przeglądałem już dokumentację i różne tutoriale i widea, ale mam wrażenie, że nie do końca rozumiem pewne podstawowe kwestie... Może to wina tego, że przychodzę z Wordpressa, gdzie to wszystko było nieco mniej zagmatwane ;)


Interesuje mnie tylko front-end i nie do końca wiem, jak odwoływać się do modułów (rozumiem, że one z kolei pobierają dane z bazy danych i wysyłają do view w MVC?).


Tutoriale, które czytałem, na wstępnie zapewniały, że front-end developer nie musi napisać ani linijki PHP, a po chwili większość kursu polegała na tworzeniu nowych modułów, podczepiania ich do haków itp. a samego frontu nie było tam wcale...


Byłbym niezmiernie wdzięczny, gdybyście wskazali mi chociaż, gdzie zacząć szukać albo podrzucili przyjemniej najbardziej podstawowych wskazówek dla front-endowca.

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Tworzenie szablonu od podstaw
« Odpowiedź #1 dnia: Październik 22, 2014, 09:06:45 am »
z tym PHP zgodze sie, w okrojonej przestrzeni. mianowicie presta to przede wszystkim Smarty, do budowy szablonu wystarczy jego okrojona wiedza na zasadzie podstawiania zmiennych. dla samego szablonu wystarczy ci (dobra) znajmosc HTML, CSS (ten przede wszystkim na poziomie raczej zaawansowanym), JS, czyli typowe pliki szablonowe. jednak tutaj wspomniana przestrzen ogranicza sie do przerobki np. standardowe szablonu, blizej mowiac jego ukladu. 60-70% calego wizerunku presta opiera sie przede wszysykim o moduly, ich wglad i uklad. uklad uzyskujesz wlasnie prez wspomniane hook, ktore mozesz wizualnie przestawiac z poziomu panelu admina w sekcji PA > moduly > pozycje, tam ustawiasz sobie w ktorym hook ma sie znajesc modul oraz ustawiasz ich kolejnosci w damym hook. jednak nie obejdzie sie bez ALE: ale nie kazdy modul da sie do kazdego hooka wrzucic. tutaj juz wchodzi znajomosc kontrolerow, a co za tym idzie PHP, chociaz tutaj to mozna "nauczyc" sie automatycznosci bo to zasadniczo kwesia zmiany 2-3 linijek zeby modul mozna przerzucac w inne hook. raczej robota do przejscia bez znajomosci PHP.

to co powyzej mozna tez odniesc do twojego pytania o samo wysweitlanie modulow. swoistym MVC w presta to wlasnie hooki. ich kontrole masz opisana powyzej. jednak sam ich wyglad, jak to opisales, nie jest pobierany z bazy danych (z tej pobierana jest tylko ich pozycja i ewentualnei zmienne) a z plikow .tpl tak jak i reszta szablonu. czyli wracamy do poczatku i zostajemy przy HTML i CSS (ew. JS) + znajomosc uzywania zmiennych w Smarty.

podsumowujac, szablon, to co widoczne jest we frond-end (dla klienta) budowane jest przez pliki .tpl (pliki szablonowe Smarty) i teraz w zaleznosci, ktora strone chcesz zmieniac sa to albo pliki samego szablonu albo jego (czy ogolnych) modulow.
design4VIP z innej strony...

*

Offline jrrewers

  • Nowy
  • *
  • 9
  • 0
  • prestashop
  • PrestaShop: 1.6
  • Status: Programista
Odp: Tworzenie szablonu od podstaw
« Odpowiedź #2 dnia: Październik 22, 2014, 12:22:27 pm »

Cześć,
dzięki za odpowiedź.


Czy można powiedzieć, że za niezbędne elementy strony odpowiadają moduły, np. w pliku .tpl ustawiam w pewnym miejscu {HOOK_HEADER}, a następnie w panelu admina określam, że w tym hooku ma być logo, guzik do koszyka i guzik do logowania?


Idąc dalej, jak mogę ostylować te moduły - z tego, co się orientuje, to część styli dla modułów jest w root/modules.moduł, a część w root/themes/module/moduł. Czy wynika z tego, że tworząc template niejako bazuję na standardowym wyglądzie modułu zaciąganym z root/modules/moduł, a dodając plik .tpl dla danego modułu w root/themes/module/moduł nadpisuje ten standardowy wygląd w takim zakresie, jak potrzebuję?


Jeszcze jedna sprawa - w PA -> moduły -> pozycje mam sporo hooków, np. actionAttributePostProcess, actionAuthentication, a nie widzę ich w plikach .tpl. Poza tym, czy hooków nie jest tylko kilka, około 6?

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Tworzenie szablonu od podstaw
« Odpowiedź #3 dnia: Październik 22, 2014, 02:02:27 pm »
zaczne od konca, bedzie prosciej tlumaczyc pierwotne pytania. hookow jest tyle ile zechcesz, hooki sa zasadniczo od wszystkiego, jak pisalem, presta ma budowe modulowa, a wlasnie przez hooki sie te moduly odpala w konkretnych miejscach. to, ze niektorych nie widac, nie znaczy, ze ich nie ma ;) czesto hooki wywoluje sie bezposrednio w kontrolerach, ale to juz typowo kwestie silnikowe, nei szalbonowe, wiec tutaj, przy tym pytaniiu nie maja wiekszego znaczenia. czy jest ich 6... hmmm podstawowych jest z 20 ;) tych tylko odpowiedzialnych za wysweitlanie danych elementow a rowniez, w prosty sposob mozna dodawac swoje (opis z FAQ tego forum).
dla ciebie na poczatek, do samej nauki i poznania podstaw beda moduly zaczynajace od 'display' czyli np. displayTop, displayLeftColumn, displayFooter.... itd. jak, kiedy i gdzie ich uzywac, raczej to juz musisz rozgrysc np. przez standardowy szablon na wlasna reke. w sumie kazdy ma swoje jakies "widzimisie" i swoj typ tworzenia szablonu, wiec nawet jakbym dokladnie opisal krok po kroku jak i gdzie z czym postepowac to rozpetala by sie wojna i przekrzykiwanie, bo ja to robie w ten spowb a ktos inny robi to w inny. tutaj juz musisz sam sobie wypracowac swoj indywidualny styl.

kolejne pytanie o moduly, to juz opisuje non stop prawie w kazdym poscie odnosnie modulow czy wogladu sklepu (pomalu robi sie to nudne). sa dwa miejsca umiejscowienia modulow:

1. glowny w katalogu ./modules i tutaj musza sie znalesc wszystkie nowe moduly (niestandardowe) oraz stare w pelnej wersji, czyli zawierajace komplet plikow (php, css, tpl, js)

2. katalog skorki ./themes/skorka/ i tutaj:
a. ./modules - tu zbierane sa nadpisy plikow typowo szablonowych (.tpl, tlumaczenia)
b. ./css/modules - tutaj zbierane sa pliki nadpisu stylu
c. ./js/modules 0 tutaj nadpisy skryptow

przy pkt 2 nalezy tez pamietac aby zachowywac strukture plikow i katalogow wzgledem modulu oryginalu (z pkt 1). czyli np. jezeli w glownym katalogu style uzyte sa w katalogu np. css to taki tez katalog musi sie znalesc w pkt 2b, jezlei styl wrzuciny jest w glowny katalog modulu to tez w nadpisie musi byc uzyty bez katalogu. to samo z reszta plikow

pliki z pkt 2 sa zawsze brane w pierwszej kolejnsoci do wyswietlenia, dopeiro jak ich tutaj brakuje to brane sa te z katalogu glownego ./modules 
design4VIP z innej strony...

*

Offline jrrewers

  • Nowy
  • *
  • 9
  • 0
  • prestashop
  • PrestaShop: 1.6
  • Status: Programista
Odp: Tworzenie szablonu od podstaw
« Odpowiedź #4 dnia: Październik 24, 2014, 12:15:51 pm »
Cześć,
gdziem mogę znaleźć hooki zaczynające się od "display"? Albo inaczej, jak odróżnić je od innych?
Powoli przeglądam sobie standardowy szablon do presty i mam kilka pytań...



Rozumiem, że {hook h="displayBanner"} pobiera z modules/blockbanner
Ale skąd pobiera dane {hook h="displayNav"}? Nawet po wykomentowanie całego <div class="header-container"> pojawiaja się elementy nagłówka - dlaczego?
Skąd też pobiera dane{hook h="displayTopColumn"}?


Inna sprawa, czym się różni {hook h="displayTopColumn"} od {$HOOK_LEFT_COLUMN}? Chodzi o samą różnicę między {hook h="xxx"} i {$xxx}


Pomyślałem, że może nieco łatwiej będzie mi to zrozumieć na przykładzie... Załóżmy, że mamy taki kod:


<div class="search"> <!--Pasek wyszukiwarki-->
    <input type="text" />
<>


<div class="categories"> <!--Kategorie wyświetlane obok siebie-->
    <ul>
        <li>Kategoria 1</li>
        <li>Kategoria 2</li>
        <li>Kategoria 3</li>
        <li>Kategoria 4</li>
    </ul>
<>


<div class="shopping_cart"><> <!--Rozwijalny przycisk z informacją o stanie koszyka-->


W jaki sposób dodalibyście do niego zmienne presty, żeby połączyć frontend z backendem?




*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Tworzenie szablonu od podstaw
« Odpowiedź #5 dnia: Październik 24, 2014, 01:42:16 pm »
no nie wiem, czy ja dzisiaj mam kiepski dzien czy... nawet nie wiem co za bardzo odpisywac.

gdziem mogę znaleźć hooki zaczynające się od "display"? Albo inaczej, jak odróżnić je od innych?
no jak odroznic hooki zaczynajac sie od "display" od innych... no chyba po tym, ze zaczynaja sie od "display"?



Rozumiem, że {hook h="displayBanner"} pobiera z modules/blockbanner
Ale skąd pobiera dane {hook h="displayNav"}? Nawet po wykomentowanie całego <div class="header-container"> pojawiaja się elementy nagłówka - dlaczego?
Skąd też pobiera dane{hook h="displayTopColumn"}?
Inna sprawa, czym się różni {hook h="displayTopColumn"} od {$HOOK_LEFT_COLUMN}? Chodzi o samą różnicę między {hook h="xxx"} i {$xxx}
te dwa pytania to zasadniczo jedno. zawezilbym je do pytania "czym się różni {hook h="displayTopColumn"} od {$HOOK_LEFT_COLUMN}?" jednak to ewiedentnie pokazuje, ze nie czytasz forum a przede wszystkim dzialu "FAQ", gdzie opisany jest dokladnie {hook h=""} czym sie roznia, tym, ze te bezposrednie {$HOOK} sa to haczyki glowne presta, generowane bezposrednio przez silnik presta i zapisane w jej glownych kontrolerach a {hook h=""} sa to haczyki dodawane przez nowe kontrolery, np. modulow. czyli haki indywidualne.


W jaki sposób dodalibyście do niego zmienne presty, żeby połączyć frontend z backendem?
no tym mnie w ogole zabiles. co ma piernik do wiatraka? nie da sie polaczyc back z frond -end. mozesz sobie okreslic np w panelu w danych modulach jakies zmienne i skierowac ich wyswietlenie w danym hook we Front, ale nie da sie tego polaczyc(?) tutaj wracamy do moich powyzszych odpowiedzi. jak chcesz edytowac (!) szablon to starczy znajomosc postawoych jezykow szalbonowych, ale juz budowa wlasnych mozliwosci i rozbudowa wg widzimisie wymaga wiekszej znajomosci tak PHP, Smarty, JS czy podobnych jak i znajmosc, dosc spora, budowy presta, jej kontrolerow, korzystania z wbudowanych funcji itp. no to juz "wyzsza szkola jazdy". tu nie da sie wkoczyc na gleboka wode, krok po kroku brnac w ta glebie, to jedyna mozlia metoda.
design4VIP z innej strony...

*

Offline jrrewers

  • Nowy
  • *
  • 9
  • 0
  • prestashop
  • PrestaShop: 1.6
  • Status: Programista
Odp: Tworzenie szablonu od podstaw
« Odpowiedź #6 dnia: Październik 24, 2014, 04:12:01 pm »
Hej,
heejay3, dziękuję Ci bardzo za Twoje odpowiedzi - dużo przede mną, ale jest to już nieco bardziej klarowne :)

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Tworzenie szablonu od podstaw
« Odpowiedź #7 dnia: Październik 27, 2014, 09:07:23 am »
Hej,
heejay3, dziękuję Ci bardzo za Twoje odpowiedzi - dużo przede mną, ale jest to już nieco bardziej klarowne :)
wszystko jest do nauczenia. ja tez nie jestem po  zadncyh szkolach czy nawet kursach (no chyba, ze tutarialach internetowych) Prestashop. raczej jestem swoistym samoukiem, co na moim przykladzie mozna wykazac, ze jak sie chce to mozna ;) ale nie od razu. moja obecna wiedza budowana jest od ladnych paru lat (gdzies od pocztkow wersji 1.3) a i tak jeszcze wiem, ze wiele przede mna.

nie pozostaje nic innego jak zawzietosc, konsekwencja w dazeniu do celu i godziny przed komputerem. z tym forum na pewno bedzie o wiele prosciej (za moich poczatkow takiego profi forum  nie bylo, wiec masz juz ulatwiona drogge :D). pytaj, pokazuj, ze chcesz i ze sam wiele pracujesz a na pewno twoje pytania nie zostana bez odpowiedzi. 
design4VIP z innej strony...