Posiciones de los módulos en el Front-office

Posiciones de los módulos en el Front-office

Un módulo puede tener dos aspectos: uno en el back-office (sus opciones, o incluso su pantalla de configuración), y el otro en el front-office. La parte front-office corresponde a cómo y dónde se mostrará el módulo en su tema.

La posición de un módulo en su tema puede ser cambiada, porque es posible que desee que el bloque de un módulo esté posicionado más arriba (o más abajo) en la página que otros. En la jerga PrestaShop, a esta acción se la denomina "trasplante", y se realiza mediante la herramienta disponible en la página "Posiciones de los módulos", bajo el menú "Módulos". En realidad, ésta le permite conectar un módulo a uno de los muchos hooks disponibles en el tema actual, sin necesidad de escribir ningún código.

La página "Posiciones de los módulos" le muestra todos los hooks disponibles, así como los módulos correspondientes que están conectados a ellos. Muchos están vacíos por defecto, pero la mayoría utilizan  fácilmente una docena de módulos (el hook displayHeader, perteneciente a la cabecera de la tienda, tiene 33 módulos de forma predeterminada).

En la parte superior de la página, un menú desplegable le permite mostrar sólo el hook en el que esté interesado.
De forma predeterminada, la lista sólo muestra los hooks en los cuales puede posicionar módulos. Al marcar la casilla "Mostrar hooks invisibles" se mostrarán todos los hooks, incluso aquellos en donde no puede colocar nada.

La cabecera de la tabla para cada hook muestra el nombre del hook, su nombre técnico (para algunos de ellos, una rápida descripción), y su número de módulos conectados. La tabla muestra los módulos que están conectados a ese hook.

Los módulos son mostrados en el orden en el que aparecen en el hook.

Mover un módulo dentro de un hook

Tienes dos maneras de cambiar la posición de un módulo dentro de un hook:

• Haciendo clic en las flechas arriba o abajo. La página se actualizará y mostrará el nuevo orden.
• Arrastrando y soltando el módulo a la posición deseada:
  
  1. Coloque el cursor del ratón entre las flechas de movimiento y el nombre del módulo para que este cambie a un cursor de "movimiento de elementos". Lo reconocerá porque el cursor se convierte en una cruz.
  2. Haga clic con el botón derecho del ratón y manténgalo presionado, mientras mueve el cursor del ratón a la fila / posición deseada: el módulo pasará a ocupar la fila / posición correspondiente.
  3. Suelte el botón derecho del ratón: para guardar la nueva posición del módulo.

Para la mayoría de los módulos, el trasplante se puede hacer fácilmente a través del back-office. Algunos módulos requieren una modificación en su código para poder trasplantarlos.

Insertar un módulo en un hook: Trasplantar

En PrestaShop, "trasplantar" es la acción de insertar un módulo en un hook. Puede añadir un módulo a más de un hook.

Hay dos cosas que debe conocer antes de trasplantar un módulo:

• Algunos módulos están escritos para sólo poder conectarlos a un conjunto de hooks específicos.
• Algunos hooks han sido desarrollados para no aceptar ciertos tipos de módulos.

Por lo tanto, sea consciente de que no siempre puede trasplantar cualquier módulo a cualquier hook.

El proceso de trasplante tiene su propia interfaz:

1. Diríjase a la página "Posiciones de los módulos", disponible en el menú "Módulos".
2. Haga clic en el botón "Insertar un hook" situado en la parte superior derecha. La interfaz de trasplante de módulos, aparecerá en pantalla.
3. En la lista desplegable "Módulo", seleccione el módulo que desea trasplantar.
4. En la lista desplegable "Insertar hook en", seleccione el lugar donde quiere trasplantar el módulo. Hay muchos hooks disponibles. Puede cambiar su decisión más tarde si es necesario.
5. En el campo "Excepciones", escriba el nombre del archivo(s) correspondiente(s) a las páginas en las que no desea que el módulo aparezca.
   Puede realizar una selección múltiple, haciendo clic en los nombres de archivo mientras mantiene pulsada la tecla Ctrl. Puede anular la selección de los archivos de la misma manera: Ctrl + clic.
6. No olvide guardar sus cambios.

El menú desplegable "Insertar hook en" le ofrece información sobre dónde puede colocar el módulo.

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.

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.

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.

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.

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

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.

To customize the transplantation ability of a module, you must give it the correct PHP function for the new target hook. For example, the "Currency" block has this function:

function hookTop($params)
  {
  ...
  }

In order to transplant the "Currency" block into the right column, for instance, you need to add the hookRightColumn() function:

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 location.