Posizionare un Hook su Prestashop 1.7

La fase di posizionamento di un hook è una fase delicata nella quale dobbiamo andare ad agire sul codice del nostro template. Come raccomandazione, do sempre quella di usare un tema child per fare le modifiche ai vari file.

Una volta creato il nostro hook come descritto nell’articolo precedente “Creare un Nuovo Hook con Prestashop 1.7.6” dobbiamo, ora, andare a posizionare all’interno del template (dove vogliamo) la nostra stringa di codice che andrà a richiamare l’hook creato e ciò che c’è al suo interno.

A questo punto in base alla pagina del template in cui vogliamo posizionare l’hook e i relativi moduli collegati andiamo a prendere il relativo file “.tpl”. Al suo interno incolliamo la seguente stringa:

{hook h='nomeDelNostroHook'}

Per andare a riportare l’esatto esempio, che poi mostreremo anche in un video, dell’articolo precedente possiamo andare ad incollare il nostro hook appena creato:

{hook h='displayRightFixed'}

In caso volessimo mostrarlo soltanto in homepage od in una pagina qualsiasi possiamo farlo direttamente nel file “.tpl” con un {if}, ad esempio:

{if $page.page_name == 'index'}
   {hook h='displayRightFixed'}
{/if}

In questo modo non sono i moduli collegati all’hook ad essere nascosti nelle altre pagine (come prevede il sistema di posizioni di PS) ma sarà l’hook stesso a presentarsi solo in home, sollevandoci dall’obbligo di spegnere i moduli collegati nella altre pagine da BO.

Nel caso in cui, invece, volessimo mostrare i moduli allegati all’hook in tutte le pagine possiamo lasciarlo con la stringa semplice (come nel primo esempio) andando poi ad agire da BO su Design > Posizioni.

Applicare lo Stile all’Hook tramite CSS

Ora dobbiamo pensare a come mostrarlo. Torniamo al nostro esempio considerando che vogliamo mostrare il modulo “Informazioni di Contatto” tramite il nostro nuovo Hook fissato a destra della pagina Home.

Prendiamo la stringa del nostro hook {hook h='displayRightFixed'} e contorniamola con un <div></div> a cui attribuiremo una classe. Vi faccio l’esempio:

<div class="right-fixed-contacts">
   {if $page.page_name == 'index'}
      {hook h='displayRightFixed'}
   {/if}
</div>

Andiamo nel nostro custom.css del tema-child via FTP (o tramite un pannello come cPanel) e procediamo con la dichiarazione della nostra classe:

.right-fixed-contacts {
  position: fixed;
  right: 0;
  top: 50vh;
  z-index: 4;
}