Page History

...

L'ordre dans lequel les modules du front office apparaissent peut être personnalisé, car vous pouvez par exemple souhaiter qu'un module soit placé plus haut (ou plus pas). Dans le jargon PrestaShop, cette démarche est appelée "greffe (transplanting)", et est effectuée en utilisant l'outil disponible dans le sous-onglet "Positions" de l'onglet "Modules". En effet, cela vous permet d'attacher un module à l'un des nombreux crochets disponibles dans le thème actuel, sans écrire de code.

...

Chaque tableau de crochet affiche le nom du crochet, son nom technique, le nombre de modules attachés, et liste tous les modules attachés. Pour chaque module, vous avez accès à leur position dans le crochet.

Moving a module

You have two ways of moving a module within a hook:

• 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 between the moving arrows and the module's name to have it change into a "move item" cursor.
  2. Click and hold: the row turns orange
  3. Move the cursor over the row/position where you want the module to be: the module's row changes position accordingly.
  4. Release the mouse button: the now position for the module is saved.

For most modules, transplantation can easily be done directly via the Back Office. Certain modules require altering the code in order to transplant the module.

Transplanting a module via the back-office

Image Removed

1. Go to the "Modules" tab, and its "Positions" sub-tab.
2. Click the "Transplant a module" link.
3. In the "Module" drop-down menu, select the module you want to transplant.
4. In the "Hook Into" drop-down menu, select where you want to transplant the module to.
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.
6. Click the "Save" button.

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

Transplanting a module by modifying its code

Some modules cannot be transplanted into other page sections because they lack the necessary code. For example, the Quick Search block contains templates for both column display and header display, while the Currencies block only has one template file which only pertains to the header section. Likewise, the default Featured Products block can only be placed in the center content section of the main page. If you want to move it to a column, you'll have to do the customization yourself.

If you want to display simpler modules such as the Currencies block or the Featured block in a position for which it wasn't built, you'll have to edit its template files.

...

Déplacer un module

Il existe deux manières de déplacer un module à l'intérieur d'un crochet:

• Cliquez sur la flèche montante ou descendante. La page sera réactualisée et affichera le nouvel ordre.
• Glissez et déposez la ligne correspondant au module :
  1. Placez le curseur entre les flèches et le nom du module, le curseur deviendra une croix fléchée.
  2. Cliquez sans relâcher : le curseur deviendra orange.
  3. Bougez le curseur jusqu'à la position désirée : la ligne du module sera déplacée vers cette position.
  4. Relâchez maintenant le bouton de la souris : la position est maintenant enregistrée.

Pour la plupart des modules, la transplantation peut être effectuée facilement depuis le back office. Certains modules nécessitent de modifier le code afin de transplanter le module.

Greffer un module depuis le back office

Image Added

1. Allez dans le sous-onglet "Positions" de l'onglet "Modules".
2. Cliquez sur le lien "Greffer un module".
3. Dans le menu déroulant "Module", choisissez le module que vous voulez greffer.
4. Dans le menu déroulant "Greffer le module sur", choisissez l'emplacement où vous voulez que le module soit greffé.
5. Dans le champs "Exceptions", tapez le nom du (des) fichier(s) correspondant aux pages sur lesquelles vous ne voulez pas le module d'apparaître.
6. Cliquez sur "Enregistrer".

Le menu déroulant "Greffer le module sur" vous aide à savoir où le module peut être greffé.

Greffer un module sans modifier son code

Certains modules ne peuvent être greffés dans d'autres pages car ils ne possèdent pas le code nécessaire. Par exemple, le bloc Recherche rapide contient à la fois des modèles pour l'affichage des colonnes ainsi que l'affichage de l'en-tête, tandis que le bloc Devises n'a qu'un seul fichier de modèle qui se rapporte uniquement à la section d'en-tête. De même, le bloc de produits phares sur la page d'accueil ne peut être placé que dans la section de contenu située au centre de la page principale. Si vous voulez le déplacer vers une colonne, vous aurez à effectuer vous-même la personnalisation.

Si vous souhaitez afficher des modules plus simples comme par exemple le bloc Devises, vous devrez modifier ses fichiers modèles.

Pour personnaliser la greffe d'un module sur un crochet, vous devez lui déterminez sa fonction PHP pour le crochet. Reprenons l'exemple du bloc Devises :

function hookTop($params)
  {
  ...
  }

In order for instance to transplant the Currency block into the right column, you need to createPour par exemple greffer le bloc Devises dans la colonne de droite, vous devez créer :

function hookRightColumn($params)
  {
  ...
  }

... and edit its et modifier ses codes PHP, HTML and et CSS code accordinglyen conséquence.

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 let's you graphically decide where to place your modules. You can access it from the "Position" sub-tab, by clicking the "Run LiveEdit" button.

Image Removed

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

• All 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 bottom of the Live Edit mode, a row presents you with two buttons: "Save" and "Close Live Edit".

Image Removed

The first one is explicit, the second one cancels all changes you might have made to your modules during this live-editing session. Note that once you have clicked after having removed a module, you'll have to go to the "Positions" sub-tab and use the "Transplant a module" form in order to bring it back.

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 notL'autre manière de déplacer les modules dans la page d'accueil est le mode Live Edit, qui intègre la dite page d'accueil au sein d'un outil qui vous permet de placer vos modules "géographiquement". Vous pouvez y accéder en vous rendant dans le sous onglet "Positions" de l'onglet "Module", en cliquant sur le bouton "Lancer LiveEdit".

Image Added

Après avoir cliqué, PrestaShop ouvre la page d'accueil dans une nouvelle fenêtre, avec le script Live Edit sur le haut de la page:

• Tous les blocs sont entourés d'un cadre rouge en pointillé, vous permettant de voir quels blocs vous pouvez déplacer.
• En haut à gauche des pointillés se trouve une icône indiquant le nom du bloc, ce qui vous permet de facilement retrouver les différents blocs.
• En haut à droite des pointillés, vous trouverez deux icônes:
  1. Un icône "Déplacer" : cliquez dessus pour déplacer le module sur la page.
  2. Un icône "Poubelle" : cliquez dessus pour retirer le bloc de la page d'accueil.

Image Added

Au bas de la page Live Edit, vous trouverez une ligne contenant deux boutons : "Enregistrer" et "Fermer Live Edit".

Image Added

Le 1er bouton permet de sauvegarder les modifications, le deuxième annule tous les changements effectués durant la session de Live Edit. Notez qu'après avoir supprimé un module, vous devez aller dans le sous-onglet "Positions" et utiliser le formulaire "Greffer un module" pour le remettre dans votre boutique.

Où déplacer les modules

Les modules ne peuvent pas être déplacés n'importe où : cela dépend à la fois des crochets du thème, et ce avec quoi chaque crochet du module peut fonctionner (comme nous l'avons au-dessus). Par conséquent, vous ne pourrez déplacer la plupart des modules que dans leur contexte : les modules de colonnes peuvent être déplacés à l'intérieur de la colonne ou dans une autre colonne (par exemple, de gauche à droite), tandis que les modules d'accueil (ceux au centre de la page) ne peuvent être déplacés que dans leur colonne spécifique.

Afin de vous donner un indice visuel vous indiquant où un module peut être déplacé, PrestaShop affichera un bloc vert vide si l'emplacement et correct, ou un bloc rouge vide si l'emplacement est mauvais.