Child pages
  • Pozycje we Front-Office

Versions Compared

Key

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

Pozycje

...

we Front-Office

Table of Contents

Moduł potrafi posiadać Moduły często posiadają dwa widoki: Jeden w back-office (jego opcje, ekran konfiguracji etc), i drugi w we Front-Office. Część Front-Office odpowiada za sposób oraz położenie , gdzie moduł będzie widoczny w szablonie modułu w obrębie szablonu Twojego sklepu.

Kolejność, według której moduły pojawiają się w Twoim szablonie może być spersonalizowana, ponieważ możecie zmieniana zgodnie z Twoimi oczekiwaniami. Możesz chcieć, żeby jakiś blok modułu znajdował się powyżej , lub poniżej w odniesieniu do pozostałych częściinnych elementów strony. W żargonie PrestaShop nazywa się to przemieszczeniem, a używa się do tego narzędzia dostępnego w menu Moduły->Pozycje. Pozwala ono na niejako "przyczepienie" modułu do jednego z kilku węzłów zaczepienia dostępnych w aktualnym szablonie, bez pisania czegokolwiek w kodzie strony.

Strona "Pozycje" wyświetla wszystkie dostępne węzły zaczepienia, a także przypisane do nich odpowiednie moduły. Wiele węzłów jest domyślnie pustych domyślnie, ale te najczęściej używane mają dziesiątki modułów (np. punkt displayHeader posiada domyślnie 34 moduły).

Image RemovedImage Added

U góry strony znajduje się rozwijane menu, które pozwala na ograniczenie widoku do punktu, który Cię interesuje.
Domyślnie lista ta pokazuje wyłącznie węzły, gdzie możesz dodać funkcje. Zaznacz "Wyświetl nie pozycjonowalne niepozycjonowalne węzły", aby wyświetlić wszystkie węzły, nawet te, gdzie nie możesz nic przenieść.

W nagłówku każdego węzła znajduje się jego nazwa techniczna , oraz liczba przypisanych modułów. Tabela poniżej wyświetla je wszystkie.

Moduły są przedstawione w kolejności, z jaką pojawiają się w węźle.

Przemieszczenie modułu

...

do węzła zaczepienia

Istnieją dwa sposoby na przeniesienie modułu do węzła:

  • Click the up or down arrow. The page will reload and display the new order.
  • Drag and drop the module's row itself:
    1. Place the mouse cursor on the position number to have it change into a "move item" cursor.
    2. Click and hold while moving the cursor over the row/position where you want the module to be: the module's row changes position accordingly.
    3. Release the mouse button: the current position for the module is saved.

For most modules, transplantation can easily be done directly via the back-office. Some modules require you to alter their code in order to transplant them.

Attaching a module to a hook: Transplanting

In PrestaShop, "transplanting" is the action of attaching a module to a hook. You can add a module to more than one hook.

Two things to know before transplanting a module:

  • Some modules are written to only be attached to a given set of hooks.
  • Some hooks are written to not accept some specific kinds of modules.

Therefore, be aware that you cannot always transplant any module to any hook.

Info

Make sure to disable the cache when testing the effect of a new module on the front-end. You can do this in the "Preferences" page, under the "Advanced parameters" menu.

The transplanting process has its own interface:

  1. Go to the "Modules" menu, and its "Positions" page.
  2. Click the "Transplant a module" button at the top right. The transplanting interface appears.
  3. In the "Module" drop-down list, select the module you want to transplant.
  4. In the "Hook into" drop-down list, select where you want to transplant the module to. There are many available hooks. You can change your setting later if needed.
  5. In the "Exceptions" field, type the name of the file(s) of the pages in which you do not want the module to appear.
    You can perform a multiple selection simply by clicking on the file names while keeping the Ctrl key pressed. You can deselect files in the same manner: Ctrl+click.
  6. Do not forget to save your changes.

Image Removed

The "Hook into" drop-down menu gives you a good idea where module can be placed.

Even though the "Hook into" drop-down list gives a comprehensive overview of the available hooks, it might not always be clear which is the one to which you want to attach your module. Do not hesitate to try another hook if the result of your selection if not what you expect.
The list gives some detail: some hook have a description after the hook's name, for instance "Add fields to the form 'attribute value'" for displayAttributeForm. Peruse them all in order to choose your hook correctly.

Editing an attached module

Each module has two icons on the right side of its row: one to edit its settings, the other to delete the module.

Editing a module's setting uses the same interface as the one used for the transplanting a module. The major difference is that you cannot change the "Module" and "Hook into" settings, as they are disabled, and thus grayed out. You can only edit the exception setting, which works just as described in the "Attaching a module to a hook" method above.
While you cannot edit the "Module" and "Hook into" settings, they can serve as a handy reminder of their current position, should you want to put them back there later on.

Image Removed

If you want to move a module to another hook, you must use the transplanting interface:

  1. Click the "Transplant a module" button at the top right. The transplanting interface appears.
  2. In the "Module" drop-down list, select the module you want to move to another hook.
  3. In the "Hook into" drop-down list, select where you want to transplant the module to.
  4. In the "Exceptions" field, type the name of the file(s) of the pages in which you do not want the module to appear.
  5. Save your changes. The hook list appears.
  6. Go to the hook where you have transplanted the module: it should appear in there. Change its position if necessary.
  7. Go to the hook where the module first was, and click the trashcan icon in order to remove it from that hook. This prevents you from having the same module appear twice.

Always check your front-office to make sure the module is indeed where you intended it to be.

Removing a module from a hook

There are two ways to remove a module from a hook:

  • Removing a single module: click the trashcan icon on the right of the module's row.
  • Removing a batch of modules: select the modules by checking the box on the right of their row, and then click the "Unhook" button, found at the top and the bottom of the list of hooks.

Moving a module visually: Live Edit

Another way to move modules around on the shop's homepage is the Live Edit mode, which embeds said homepage into a tool that lets you visually decide where to place your modules. You can access it from the "Position" page, by clicking the "Run Live Edit" button.

Image Removed

When clicked, PrestaShop opens the homepage in a new browser windows/tab, with the Live Edit script on top:

  • All module blocks have a dotted red border, enabling you to see which blocks you can move.
  • At their top left side, a block-specific icon appears, along with the block's name, enabling you to always find your way among blocks.
  • At their top right side, they have two icons:
    1. A "move" icon: click on it to start moving the module around.
    2. A "trash" icon: click it to remove the block from the home.

Image Removed

At the top of the Live Edit mode, a toolbar presents you with two buttons: "Close Live Edit" and "Save".

The first one is quite self-explanatory; the second one cancels all changes you might have made to your modules' position during this live-editing session.

Warning

Once you have removed a module, if you want to bring it back, you will have to go to the "Positions" page and use the "Transplant a module" form.

Where to move modules?

Modules cannot be moved just about anywhere: it depends on both the theme's hooks, and each module's hook support (as seen in the above section). Therefore, you mostly can only move modules within their understood context: column modules can be moved within a column as well as from one column to the other (right to left, for instance), while regular homepage modules (the ones at the center) can only be moved within their specific column.

In order to give you a visual hint about where a given module can be moved, it will display an empty green block if the location is correct, and an empty red block if not.

Transplanting a module by modifying its code

Info

This is for experts only: you must have a good knowledge of PHP and HTML before attempting anything with the code of a module.

Some modules cannot be transplanted into other sections of the front-office simply because they lack the necessary code.

For example, the "Quick Search" block (/blocksearch) contains templates for both column display and header display, whereas the "Currencies" block (/blockcurrencies) only has one template file which only works with the header section. Likewise, the default "Featured Products" block (/homefeatured) can only be placed in the center content section of the main page.

If you want to display simple modules such as the "Currencies" block in a position for which it was not built, you will have to edit its template files.
More complex module, such as the "Featured" block, can also be made to be displayed in other sections of the page, but they might have to be partly rewritten in order to have their design work with that new location.

...

  • Naciśnięcie strzałki do góry/ w dół, aby zmienić kolejność modułu w węźle. Strona następnie zaktualizuje się i pokaże nową kolejność.
  • Przeciągnięcie i upuszczenie modułu na odpowiednią pozycję w ramach węzła:
    1. Umieść kursor na numerze pozycji modułu, kursor zmieni się w krzyżyk.
    2. Przeciągnij moduł na wybraną pozycję, ramka z modułem zostanie tam przeniesiona.
    3. Upuść moduł, a jego pozycja zostanie zmieniona i zapisana.

Dla większości modułów przemieszczenie można wykonać łatwo z poziomu Back-Office. Niemniej jednak istnieją moduły, które wymagają zmian bezpośrednio w kodzie.

Przypisanie modułu do węzła przypisania: Przemieszczenie

W PrestaShop czynność "przemieszczenia" modułu polega na przypisaniu go do konkretnego węzła. Możecie przypisać moduł do więcej niż jednego węzła.

Są dwie ważne kwestie przed przypisaniem modułu:

  • Niektóre moduły są ograniczone do przypisania wyłącznie dla wybranych węzłów.
  • Niektóre węzły są stworzone, aby przyjmować tylko niektóre moduły.

Bądź świadom po prostu, że nie zawsze będziesz mógł przypisać każdy moduł do każdego węzła.

Info

Upewnij się że wyłączyłeś pamięć podręczną przeglądarki (cache) podczas testowania nowego modułu. Można ją wyłączyć w menu Zaawansowane->Wydajność.

Proces przemieszczenia posiada własny interfejs:

1. Przejdź na stronę "Pozycje" w menu "Moduły".
2. Naciśnij przycisk "Przemieszczanie modułu" u góry po prawej. Pokaże się interfejs, gdzie wyświetli się wiele modułów.
3. Z listy rozwijanej "Moduł" wybierz ten moduł, który chcesz przemieścić.
4. Z listy rozwijanej "Dodaj do", wybierz miejsce, do którego chcesz przypiąć moduł.
5. W polu "Wyjątki" podaj nazwę odpowiedniego(ch) pliku(ów) odnoszącą się do stron, na których moduł ma się nie wyświetlać.
Można dokonać licznego wyboru, klikając na pliki przyciskając jednocześnie klawisz CTRL. Odznacz pliki także w ten sam sposób: CTRL + przycisk myszy.
6. Nie zapomnij na końcu zachować zmian.

Image Added

Menu rozwijane "Dodaj do" pomaga określić, gdzie moduł może być przypięty.

Nawet jeśli lista daje kompletny obraz dostępnych węzłów, nie musi być ona dostatecznie jasna, jeśli chodzi o dodanie do konkretnego węzła. Nie krępuj się próbować z innymi węzłami, jeśli otrzymany rezultat nie odpowiada Twoim oczekiwaniom.

Modyfikacja modułu przemieszczonego

Każdy moduł posiada dwa przyciski na prawo w swojej komórce: jeden, aby modyfikować jego ustawienia, drugi, do odczepienia modułu.

Modyfikacje modułu odbywają się w tym samym miejscu, co w przypadku procesu przemieszczenia. Główna różnica sprowadza się do tego, że nie można zmienić pól "Moduł" oraz "Dodaj do", które są nieaktywne. Można tylko modyfikować pole "Wyjątki", które funkcjonuje jak w przypadku procesu przemieszczenia opisanego powyżej.
Chociaż nie możesz modyfikować pól "Moduł" i "Dodaj do", to mogą one służyć jako przypomnienie aktualnej pozycji modułu, jeśli później będziesz chciał go przenieść.

Image Added

Aby przenieść moduł do innego węzła, użyć interfejsu przemieszczenia:

  1. Naciśnij przycisk "Przemieszczanie modułu" u góry na prawo. Pokaże się interfejs, gdzie wyświetli się wiele modułów.
  2. Na rozwijanej liście "Moduł", wybierz moduł który chcesz przemieścić.
  3. Z listy rozwijanej "Dodaj do", wybierz miejsce, gdzie chcesz przypiąć moduł.
  4. W polu "Wyjątki" podaj nazwę odpowiedniego(nich) pliku(ów) odnoszącą(e) się do stron na których nie chcesz, aby moduł się wyświetlał.
  5.  Zapisz zmiany. Pojawi się lista węzłów.
  6. Przejdź do węzła gdzie przemieściłeś moduł, powinien być tam obecny, w razie potrzeby zmień jego kolejność.
  7. przejdź do węzła, gdzie moduł znajdował się pierwotnie, i naciśnij na ikonę "Odepnij", aby usunąć go z tego miejsca. To pozwala uniknąć podwójnego pojawiania się tego samego modułu.


Zawsze sprawdź, czy moduł pojawił się tam, gdzie powinien.

 

Usunięcie modułu z węzła

Moduł można usunąć z węzła na dwa sposoby:

  • usunąć jeden moduł: naciśnij na ikonę "Odepnij" po prawej stronie okna modułu.
  • usunąć wiele modułów: zaznacz kilka kolejnych modułów, w polu po lewej stronie każdego modułu, a następnie naciśnij przycisk na dole strony: "Uwolnij (unhook) wybrane".

Przemieszczanie modułów wizualnie: Edycja na żywo

Innym sposobem na przemieszczanie modułów jest zmiana ich pozycji w podglądzie na żywo który integruje stronę główną z narzędziem, które pozwoli CI na przemieszczenie wizualne modułów. Możesz przejść tam przechodząc przez menu Moduły, podstrona "Pozycje", po prawej stronie znajduje się przycisk "Uruchom edycję na żywo".

Image Added

Po naciśnięciu PrestaShop otworzy stronę główną w nowej zakładce, wraz z uruchomioną edycją na żywo:

  • Wszystkie bloki będą otoczone czerwoną ramką, co pozwoli Ci na określenie, które bloki można przemieścić.
  • W lewym rogu ramki znajduje się nazwa bieżącej ramki.
  • W prawy rogu ramki znajdują się dwie ikony:
    1. Ikona do przemieszczania, naciśnij ją aby zmień położenie danego bloku.
    2. Ikona "kosz", która pozwala na odczepienie (usunięcie" danego bloku.

Image Added

Na górze okna, znajdują się dwa przyciski, "Zapisz" oraz "Zamknij edycję na żywo".
Pierwszy pozwala zapisać wszelkie dokonany zmiany, drugi zamyka okno bez zapisywania zmian.

Warning

Pamiętaj, że po usunięciu modułu, musisz iść na stronę "Pozycje" i użyć formularza "Przemieszczanie modułu", aby ponownie go umieść w sklepie.

Gdzie przemieszczać moduły?

Moduły nie mogą być przemieszczone nie wiadomo gdzie: Wszystko zależy od węzłów danego szablonu i od tego z z czym dany węzeł może funkcjonować. W wyniku tego można przemieszczać modułu tylko w ich wybranym kontekście: moduły kolumn mogą być przemieszczone do środka kolumny, albo do innej kolumny, podczas gdy moduły strony głównej (te z środka strony) mogą być przemieszczone tylko w określone strefy.

Aby dać temu wyraz wizualnie, PrestaShop wskaże, gdzie moduł może być przeniesiony otaczając prawidłowe bloki zielonym tłem i obramowaniem, a złe czerwonym (w edycji na żywo).

Przemieszczanie modułu poprzez zmiany w kodzie

Info

Dotyczy to tylko ekspertów: musisz znać dobrze HTML i PHP aby zmienić cokolwiek w kodzie modułu

Niektóre moduły nie mogą być przypisane do innych stron ponieważ nie posiadają odpowiedniego kodu.

Na przykład blok "Szybkie wyszukiwanie" /blocksearch zawiera jednocześnie sposoby wyświetlania jaki i wyświetlanie w nagłówku, podczas gdy blok "Waluty"(/blockcurrencies) posiada tylko jeden plik który odnosi się wyłącznie do nagłówka; Tak samo blok "Produkty promowane na stronie głównej" (/homefeatured) może być wyświetlony wyłącznie w części centralnej strony.

Jeśli chcesz umieścić proste moduły jak "Waluty" w miejscu, dla którego nie zostało to przewidziane, musisz sam dokonać zmian w kodzie.
Moduły bardziej zaawansowane jak "Produkty promowane na stronie głównej" mogą być również zmodyfikowane do wyświetlania się na innych stronach, ale to wymaga przepisania części kodu aby mogły one funkcjonować prawidłowo.

aby spersonalizować przemieszczenie modułu do węzła należy określić jego funkcję PHP dla danego punktu. Weźmy na przykład blok "Waluty":

Code Block
function hookTop($params)
  {
  ...
  }

In order to transplant the "Currency" block into the right column, for instance, you need to add the Aby przemieścić blok "Waluty" do prawej kolumny na przykład, musisz dodać funkcję hookRightColumn() function: 

Code Block
function hookRightColumn($params)
  {
  ...
  }

Afterwards, you must write the code that displays the content on the front page. At best, that means copy/pasting the content of the hookTop() function; at worst, you need to rework the content of hookTop() function into something that will work for the new locationNastępnie musisz napisać kod, który wyświetli zawartość w kolumnie. W najlepszym razie wystarczy przekopiować zwartość funkcji hookTop(), w najgorszym trzeba będzie przypisać zawartość tej funkcji, aby zaczęła funkcjonować w nowej części.