Reading list Switch to dark mode

    How to develop a widget module in PrestaShop

    Updated 4 December 2023

    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:

    Searching for an experienced
    Prestashop Company ?
    Find out More
    • 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:

    How to develop PrestaShop widget module 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].

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home