Child pages
  • Posiciones de los módulos en el Front-Office

Versions Compared

Key

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

...

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 "A pesar de que en la lista desplegable "Insertar hook en" le ofrece una vista global de los hooks disponibles, no siempre puede ser del todo esclarecedora, sobre cuando se trata de encontrar un punto en particular donde insertar su módulo. No dude en probar con otro hook, si el resultado de su elección no es el que esperaba.
La lista le da algunos detalles más: algunos hooks tienen tras su nombre una breve descripción de lo que hacen, por ejemplo " 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.

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 para displayAttributeForm. Examínelos a todos con detenimiento con el fin de elegir el hook correcto.

Editar un módulo trasplantado

Cada módulo tiene dos iconos en el lado derecho de su fila: uno para editar su configuración, el otro para eliminar el módulo.

Para editar la configuración de un módulo se utiliza la misma interfaz que para el trasplante de módulos. La principal diferencia es que no puede cambiar la configuración de "Módulo" e "Insertar hook en", ya que están deshabilitados, y por tanto aparecerán en color gris. Tan solamente puede cambiar la configuración de las excepciones, que funciona como se ha descrito en la sección anterior "Insertar un módulo a un hook: Trasplantar".
Aunque no pueda editar la configuración de "Módulo" y de "Insertar hook en", estos pueden servirle para que recuerde la posición actual del módulo, en caso de que más tarde desee volver a posicionarlo en su sitio originario.

Image Added

Si quiere mover un módulo a otro hook, debe utilizar la interfaz de trasplante:

  1. 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.
  2. En la lista desplegable "Módulo", seleccione el módulo que desea mover a otro hook.
  3. En la lista desplegable "Insertar hook en", seleccione el lugar donde quiere trasplantar el módulo.
  4. 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.
  5. Guarde sus cambios. El hook aparece en la lista.
  6. Diríjase al hook en el que ha trasplantado el módulo: este debe aparecer aquí. Cambie su posición si es necesario.
  7. Diríjase al hook donde estaba el módulo originariamente, y haga clic en el icono de la papelera para eliminarlo de este hook. Esto evita que el mismo módulo aparezca dos veces.

Siempre debe comprobar el front-office de su tienda, para asegurarse de que el módulo aparece en donde desea.

Eliminar un módulo de un hook

Hay dos maneras de eliminar un módulo(s) de un hook:

  • Eliminar un sólo módulo: haga clic en el icono del bote de basura situada a la derecha de la fila del módulo.
  • Eliminar un lote de módulos: seleccione los módulos marcando las casillas situadas a la derecha de la fila, y luego haga clic en el botón "Eliminar hooks seleccionados", que encontrará tanto en la parte superior como en  la parte inferior del listado de hooks.

Trasplantar un módulo visualmente: Live Edit

Otra forma de posicionar los módulos en la página principal de la tienda es mediante el modo LiveEdit, que incrusta en dicha página de inicio una herramienta que le permite decidir visualmente dónde colocar los módulos. Puede acceder a esta desde la página "Posiciones de los módulos", haciendo clic en el botón "Inicie LiveEdit".

Image Added

Al hacer clic en este botón, PrestaShop abre la página inicial de la tienda en una nueva ventana / pestaña de su navegador, con el Live Edit script en la parte superior de la pantalla:

  • Todos los bloques de módulos tienen un borde de puntos rojos, que le permite observar los bloques que puede mover.
  • En la parte superior izquierda de cada bloque, aparece unos iconos específicos, junto con el nombre del bloque, que le permite encontrar fácilmente los diferentes bloques.
  • La parte superior derecha de cada bloque, muestra dos iconos:
    1. Un icono "mover": haga clic sobre éste para empezar a mover el módulo por la página.
    2. Un icono "papelera": haga clic sobre éste para eliminar el bloque de la página inicial.

Image Added

En la parte superior del modo Live Edit, una barra de herramientas le presenta dos botones: "Cerrar Live Edit" y "Guardar".

El primer botón guarda los cambios realizados; el segundo botón cancela todos los cambios que haya realizado en las posiciones de sus módulos durante esta sesión.

Warning

Una vez que haya eliminado un módulo, si quiere recuperarlo y que este regrese a su tienda, debe dirigirse a la página "Posiciones de los módulos" y utilizar el formulario "Trasplantar un módulo".

¿A dónde mover los módulos?

Los módulos no se pueden mover a cualquier lugar: esto depende tanto de los hooks disponibles en el tema, como del código fuente del módulo que puede permitir o no conectarlo a ciertos hooks (como se explicó en la sección anterior). Por lo tanto, sólo puede mover los módulos dentro del contexto para el que fueron diseñados y programados: los módulos diseñados para trabajar en columnas pueden ser posicionados dentro de una columna, así como trasplantarlos de una columna a otra (por ejemplo, de izquierda a derecha), mientras que los módulos comunes (los que está en el centro) sólo pueden ser posicionados dentro de su columna específica.

Para que tenga una ayuda visual sobre donde puede mover un módulo, PrestaShop le mostrará un bloque vacío con un borde punteado de color verde: si la ubicación es permitida, y un bloque vacío con un borde punteado de color rojo: si no puede moverlo a esa ubicación.

Trasplantar un módulo modificando su código

Info

Esta opción es indicada tan sólo para usuarios expertos: debe tener un amplio conocimiento de PHP y HTML antes de realizar cualquier modificación a un módulo.

Algunos módulos no pueden ser trasplantados en otras secciones del front-office, porque carecen del código necesario.

Por ejemplo, el bloque "Búsqueda rápida" (/blocksearch) contiene archivos de plantilla para mostrarse tanto en las columnas como en la cabecera, mientras que el bloque "Monedas" (/blockcurrencies) sólo tiene un archivo de plantilla para hacerlo funcionar en la sección cabecera de la página. Del mismo modo, el bloque "Productos destacados" (/homefeatured) sólo puede ser posicionado en la sección central de la página principal.

Si quiere mostrar los módulos, como el bloque "Monedas" a una posición para la cual no fue programado, debe editar los archivos de su plantilla.
  Los módulos más complejos, como el bloque "Productos Destacados", también se pueden modificar para aparecer en otras secciones de la página, pero puede ser que tengan que ser reprogramados parcialmente para que su diseño sea funcional en la nueva ubicación.

Para personalizar la posibilidad de trasplantar un módulo, debe dar a este la función PHP exacta para el hook de destino. Por ejemplo, el bloque "Moneda" tiene esta función:

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

In order to transplant the "Currency" block into the right column, for instance, you need to add the hookRightColumn() functionPara trasplantar el bloque "Monedas" en la columna derecha, por ejemplo, necesita añadir la función hookRightColumn():

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 locationUna vez hecho esto, debe escribir el código que mostrará el contenido de la página principal. En el mejor de los casos, esto significa copiar/pegar el contenido de la función hookTop(); en el peor de los casos, necesita reescribir el contenido de la función hookTop() para que funcione en la nueva ubicación.