PrestaShop 1.7 – umieszczenie baneru w stopce sklepu

Opis działania.

W wersji demo PrestaShop 1.7 mamy do dyspozycji baner na stronie głównej. Możemy go w prosty sposób przenieść do stopki i umieścić tam dowolną grafikę. Na grafikę może być nałożony dowolny link edytowalny w edycji modułu. W każdej chwili zdjęcie może być podmienione na inne bez podtrzeby programowania.

Modyfikacja dotyczy najnowszej (obecnie) wersji PrestaShop 1.7.8.2 i powinna zadziałać w każdej wersji 1.7.  Bazujemy tutaj wyłącznie na kodzie i modulach dostępnych „na starcie” w PrestaShop, więc nic nie musimy dodatkowo doinstalowywać.

Dla początkujących programistów PrestaShop artykuł może stanowić wprowadzenie do zasady funkcjonowania hooków (przyczepów) w architekturze tego CMS. Dodatkowo poznasz na przykładzie jak działa przekazywanie zmiennych z plików PHP modułu do szablonów TPL. Zapraszamy do lektury ! 🙂

Kopia zapasowa i przygotowanie hooków

Przed podjęciem prac wykonaj kopię zapasową w dziale:

Zaawansowane -> Baza danych

Najpierw musimy zrobić miejsce pod ten baner. Może być on umieszczony tak jak na screenie po prawej albo w dowolnej z 4 kolumn.

Aby potem ustawić banner w konkretnej kolumnie należy przesunać przyczepione do hooka moduły na stronie „Pozycje” w adminie

Wchodzimy w adminie w :

Wygląd -> Pozycje -> (znajdujemy sekcję) displayFooter

Usuwamy moduł: Informacje kontaktowe za pomocą opcji pod 3-ema kropkami

Jednocześnie w ten sam sposób odczepiamy moduł baner z hooka displayHome:

Przyczepienie modułu Banner do hooka stopki

Ok, w stopce zrobiła się dziura, którą możemy wykorzystać. Przyczepiamy do niego moduł Banner. Wciśnij przycisk „Przemieszczanie modułu” (na ww. stronie Pozycje) i do hooka displayFooter wstawiamy moduł Banner:

Zatwierdzamy operację przyciskiem pod formularzem.

Podmiana zdjęcia

Podmieniamy obrazek w banerze na kwadratowy, bo w tym momencie banner nie mieści się w kolumnie:

W dziale „Moduły” znajdź moduł Banner (ps_banner) i tam wstaw wybrany obrazek.

Wyłącz przy okazji cache w dziale:

Zaawansowane -> Wydajność

zaznaczając opcję ze screena:

Aby mieś pewność, że wszystko jest na nowo wczytane – wciśnij przycisk na górze strony:

„Wyczyść pamięć podręczną”

Edycja plików .tpl i .php

Otwieramy plik:

themes/classic/modules/ps_banner/ps_banner.tpl

Przed kodem HTML w tym pliku wstawiamy:

{if $hook_name == 'displayFooter'}
<div class="col-md-3 links block">
<a class="banner hidden-sm-down" href="{$banner_img}" title="{$banner_desc}">
  {if isset($banner_img)}
    <img src="{$banner_img}" alt="{$banner_desc}" title="{$banner_desc}" class="img-fluid" loading="lazy">
  {else}
    <span>{$banner_desc}</span>
  {/if}
</a>
</div>
{else}

Na końcu zamykamy klamrą:

{/if}

Następnym krokiem jest mała modyfikacja pliku PHP w module ps_banner:

Otwórz plik:

modules/ps_banner/ps_banner.php

Znajdź funkcję:

public function getWidgetVariables()

I zamień kod:

return array(
           'banner_link' => $this->updateUrl($banner_link),
           'banner_desc' => Configuration::get('BANNER_DESC', $this->context->language->id)
       );

Na:

return array(
    'banner_link' => $this->updateUrl($banner_link),
    'hook_name' => $hookName,
    'banner_desc' => Configuration::get('BANNER_DESC', $this->context->language->id)
);

Czyli dopisz nową zmienną hook_name której wartość ($hookName) będzie przekazywana z pliku PHP do szablonu TPL.

Gotowe! Baner jest już widoczny w stopce i moze linkować do dowolnego łącza, które zdeklarujemy w edycji modułu Banner (ps_banner):