Time for action—Modifying the Top of pages

To get these elements back on the pages, you will need to install and enable the relevant modules. These simple steps will need little modifications unless you want to add a new currency and a new language.

Let's enable these modules through these simple steps:

  1. Currency block —go to Modules | scroll down to Blocks | Currency block .
  2. Languages block —go to Modules | scroll down to Blocks | Language block .
  3. Search block —go to Modules | scroll down to Blocks | Quick Search block .
  4. Permanent link block —go to Modules | scroll down to Blocks | Permanent links block .

By default, these modules tend to appear on the pages in the order you installed and enabled them. The first one will appear the leftmost while the last one will be the rightmost. You can shift the arrangement by installing them according to what you want to appear on the leftmost or the rightmost sides. Notice that the Permanent link block is on the right as we enabled it last. There is an easier way to do this as well, which we will cover in the next section.

You can modify this by working on the position of the modules within the Top of pages hooks.

Note

There are two similar hooks, which can be quite confusing, that is, the Top of pages and Header . The blocks are positioned or "transplanted" in a Top of pages hook and not Header of pages .

The Welcome , Log in , Cart , and the User login links can be enabled through Back Office | Modules | Blocks | User info block . Upon installing and enabling the module, you will have the Welcome , Log in , Your Account , and Cart link displayed on your front office. By default, all those are automatically hooked to the Top of pages once they are enabled. If it is not, you can have it hooked through transplanting the module to the hook, as shown in the next screenshot. This can be done by following these simple steps:

  1. Go to Back Office | Modules | Position | Transplant a module .
  2. Choose the Module you want to transplant from the drop-down menu.
  3. Choose the hook from Hook into , the one you want the Module to go into.
  4. Click on the Sav e button.

The arrangement of the blocks can be done by moving them around within the hooks, which we will see next.

Go to Modules | Positions . There you can arrange the position of the modules within the hooks by dragging each of them to the required position as we have learned in the previous chapter. As you can see, there are the two similar hooks which may be confusing, namely, the Header of pages and the Top of pages .

Compare it with what you have at the front office in the next screenshot.

The Quick Search block does not appear despite it being hooked at the Header of pages . The other blocks which are hooked to the Top of pages are displayed in the front office. The same thing with the User info block ; you only see the one which is hooked to the Top of pages and not the one in the Header of pages .

Note

The Top of pages hook is used to display a module at the top of the page. The Header of pages hook is used to put code in the <head> tag of the website. If you want to move a module or delete it from the top of the page, you should use the Top of pages hook, not the Header of pages hook. Modules that are in the Header of pages hook should not be removed, since they are required for the module to function correctly. For example, if you remove the Quick search block from the Header of pages hook, the search autocomplete will not work, since the code for it is missing. The resulting JavaScript error will also cause other problems on the website such as the Categories block not displaying any categories.

To move the modules to the left or right, you need to move them up within the hook. The lower it is within the hook, the more to the right the module will appear, whereas the upper within the hook will be displayed on the left. For example, the Currency block is first in the list, and it is displayed on the left of the Top of pages section on the webpage.

What just happened?

You just learned the differences between the hooks Top of pages and Header of pages in PrestaShop. You also get to modify the blocks you want to use on the top of the page and how to move them around within the hook.

上一章目录下一章