How to develop a widget module in PrestaShop

In this block, we will learn how to develop a widget module in PrestaShop. In PrestaShop, the widget is the extended version of hooks. Hooks are displayed on the pre-defined positions in the theme but using a widget, we can display the contents everywhere by injecting the widget shortcode into the template or any hooks. A widget can be also called in the PHP classes like hooks.

You can check the below link for the PrestaShop widget documentation:

https://devdocs.prestashop-project.org/8/modules/concepts/widgets/

PrestaShop already uses some existing widget compatible modules like ps_shoppingcart, ps_sharebuttons, ps_mainmenu, etc. This feature was introduced in the PrestaShop v1.7.

When a module implements widgets in its code, it allows:

• A theme to call the module directly with {widget name="<module_name>"}
• the core to fallback on it if a registered hook is called but its method hook<hook_name>() does not exist.

To make our module widget compatible, we need to implement the PrestaShop\PrestaShop\Core\Module\WidgetInterface interface and define the below two mandatory methods in the module main file:

public function renderWidget($hookName, array $configuration);
public function getWidgetVariables($hookName, array $configuration);

The renderWidget method is responsible returns the generated view and the getWidgetVariables method is responsible for returning the widget variables.

In both methods, we pass the below two arguments:

• $hookName: providing the hook name allows the module to have a different behavior according to it.
  • null when the module is called directly from the widget system.
  • Name of the hook when a non-implemented hook (fallback) is called.
• $configuration: Array of parameters passed by hooks when it is called.

As we have discussed initially in the blog, there are two ways to call the widget. One way to call using the widget and another way to call using a hook.

Call using widget:

To call a widget, we can use the below code:

<!-- Generic call -->
{widget name='<module_name>'}

<!-- Call with a hook name -->
{widget name='<module_name>' hook='<hook_name>'}

We can also call the widget in the PHP class using the below code:

Hook::coreRenderWidget($module, $hook_name, $params);

Call using hook:

If your module registered a hook but its definition is not available in the module’s main file then the renderWidget() method will be executed.

If your module registered a hook and its definition is available then it works as normally and executes the hook definition block.

For a better understanding, you can check the below flow chart:

You can see in the above image that the displayLeftColumn hook is called then PrestaShop checks if this hook is registered and has its definition is available in the module then executes the hook method.

If the module has registered this hook and its definition is not available then again PrestaShop checks for if the module has implemented the widget interface. If yes, then the renderWidget method is executed and the hook name is passed to this method and displays the widget content on this hook.

PrestaShop does nothing if the above two cases are not satisfied.

As we know that hook can be triggered in two ways:

• in PHP class:

Hook::exec($hook_name)

• in smarty template:

{hook h='<hook_name>'}

That’s all about this blog.

If any issue or doubt please feel free to mention it in the comment section.

I would be happy to help.

Also, you can explore our PrestaShop Development Services & a large range of quality PrestaShop Modules.

For any doubt contact us at [email protected].