How to set front office position in Module/themes in Prestashop?

Learn how to set the front office position in module/theme in PrestaShop with few steps.

Modules can be found: One on the back office (its options, or a configuration screen), and one in the front office. The front office display is how and where your shop is displayed within the theme in PrestaShop.

Build innovative stores that escalate your business to the next level!!!

The position of a module in your theme can be modified, because you may want one module’s block to be placed too high(or less) in the page that others in PrestaShop idiom, this is called “transplanting”, and is done using the tools presented in the “position” page, under the “module” menu.

In effect, this permits you to join a module to one of the many presented in the current theme, without writing any code.

The “Positions” page shows all the presented hooks and their joined modules. More are empty by default, but some of the most useful ones have a dozen of modules (the display header hook has 33 modules by default).

How to set the front office position in Module/themes in PrestaShop?

At the top of the page, a drop-down menu will help you to show only the hooks you are interested in.

By default, this page shows any hooks that you can position the functions. Check out the “Display Non-Positionable Hooks” check box at the bottom of all the hooks, even if you cannot afford something.

The heading table for each hook shows the name of hooks and their technical name (with a quick description of some) and the number of its connected volumes. The table lists the blocks that are connected to that hook.

Moving a module within a hook: Front office setup in PrestaShop

The blocks are displayed in the order they show the hook.
You have two behaviors of modifying a module’s position within a hook:
Tap the up or down arrow. The page will reload and show the new order.

Drag and crash the module’s row itself:
Situate the mouse cursor on the position number to have it modified into a “move item” cursor.

Tap and hold while moving the cursor over the row/position where you desire the module to be: the module’s row modifies position accordingly.

Publish the mouse button: the existing position for the module is saved.

Most modules are made directly on the back of the alternative surgeon. Some modules are needed to change their code.

Connecting a module to a hook: Transplanting

In PrestaShop you can add, “transplanting” is the action of connecting a module to a hook. You can include a module to extra than one hook.

Two things to know before a module transplanting:

Some modules are written to only be joined to a given set of hooks.
Some hooks are written to not admit some specific kinds of modules.

Consequently, be aware that you cannot always relocate any module to any hook.

Make sure to disable the cache while testing a new module effect on the front end. Under the “Advanced Parameters” menu, you can do this on the “Preferences” page.

The transplanting process has its own interface:

Navigate to the “Modules” menu and its “Positions” page.
Tap the “transplant the module” button on the top right. The transplanting interface shows.
In the “section” drop-down list, select the block you want to restore.
In the “Hook in to” drop-down list, select the place where you want to transfer the volume. There are many available hooks. You can change your setting later if necessary.
In the “Exceptions” field, enter the name of the file (s) in the pages that do not want the block to appear. By pressing the Ctrl key, you can make multiple selections by pressing the file names. To delete files in the same way: Ctrl + click.
Do not forget to save your changes.

The “Hook into” drop-down menu offers you a good idea of where the module can be located.

Although “hook” has provided a comprehensive overview of available hooks on the drop-down list, it will not be accurate enough to connect your model. The outcome of your choices is that what you expect is that you do not hesitate to try another hook.

This list provides some details: Some hooks have an explanation after the hook name, for example, “Add fields to the form attribute value” for displayattributeForm. Consider all of them to select your hook properly.

Build innovative stores that escalate your business to the next level!!!

Editing an added module

Each block has two icons on the right side of its array: one of its settings, one block to remove the block.

The editing of a block layout also uses the same interface as a block replacement. The main difference is that you cannot change the settings of “module” and “hook into” because they are disabled and are softened. You can only edit the exception layout, which is described in the “Link to a Volume to a Volume” mentioned above.

While you cannot edit settings for the “Module” and “hook into” settings, they will be helpful for their current position, and then put them back on.

If you want to shift a module to a new hook, you should use the transplanting interface:

Click the “Transplant a module” button to the top right. The transplanting interface appears.
In the “module” drop-down list, select the volume you want to move to another hook.
Drop down the list of “hook into”, where you want to swap the volume.
In the “Exceptions” field, enter the name of the file (s) of the pages that do not want the volume to appear.
Save your changes. The Hook list appears.
You go to the hook that transplanted the module: there will appear. Change its position if needed.
Go to the first hook of the module and click the drop-down icon to remove it from the hook. This is the same thing that appears twice and prevents you.
Always verify your front-office to ensure the module is indeed where you planned it to be.

Removing a block from a hook

There are two ways to remove a block from a hook

Delete single modules: Click the Trash icon on the right side of the volume row.
Deleting a batch of modules: Select the modules by verifying the box on the right side of the row and then clicking on the “Unhook” button and shows on the top and bottom hooks list.

Move a block to view: Live Edit

Another way to move models on the homepage of the homepage is the Live Edit Mode, which is embedded as a tool to help you decide where to place your collection. 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 window/tab, with the Live Edit script on top:
All block modules have a dotted red border, which modules you can move can be viewed.
On the upper left side, the barrier mark appears with the black name, and you can occasionally find your way through the blocks.
On the upper right side of them, they have two icons:

A “Move” logo: Click on it to start moving the block around.
A “Trash” logo: Click on it to remove the block from home.

At the peak of the Live Edit mode, a toolbar offers you two buttons: “Close Live edit “and “Save”.

The first is quite a self-description; second, during this live-editing session, you can cancel all the changes you made to your modules.

If a block is deleted, and you want to bring it back, you should go to the “Position” page and use a “Transplant a Module” form.

Where to move the module?

The blocks cannot go anywhere: this depends on both the hooks of the theme and the hook support of each module (found at the top of the page). So, you can move only the components in the context you understand:

Column blocks can only be moved in a column, as well as from one column to another (on the right, for example), the usual interface blocks (in the center) only in their particular column.

If you provide a visual note about where the given volume can be moved, the plain green block will be displayed if the location is correct, otherwise, there is no empty red block.

Transplanting a code by modifying its code

This is for experts: you have good knowledge of PHP and HTML before attempting something with a code of a module.

Some modules will not be converted into other sections of the pre-office because they do not have the required code.

For example, there are templates for the “Quick Search” block (/ blocksearch) column display and header display, while “currencies”block (/ blockcurrencies) only work with the same header template. Likewise, the default “Featured Products” module (/ homefeatured) will only be placed in the center section of the main page.

If you desire to exhibit 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 modules, such as the “Featured” block, can also be made to be shown in other sections of the page, but they may have to be partially rewritten in order to have their design work with that new location.

To customize a module alternative, you need to give the correct PHP function to the new target hook. For example, the “Currency” module has this function:

Function hookTop ($ params)

{

…

}

For example, to change the “currency” block to the correct column, you must include the hookRightColumn () function:

Function hookRightColumn ($ params))

{

…

}

Then, you have to write code that displays the content on the front page. The best thing to do is to copy/paste the contents of the hookTop () function; at worst, you need to review the content of the hookTop () function in some way working for a new place.

This is how you could set the front office position in Module/themes in the PrestaShop platform.

Click here to get started with advanced PrestaShop developmental services.