Blog navigation keyboard_arrow_down

Blog Rss rss_feed

A Comprehensive Guide to Widgets in PrestaShop: What They Are and How to Use Them

A Comprehensive Guide to Widgets in PrestaShop: What They Are and How to Use Them

In the world of e-commerce, flexibility and adaptability of site functions play a vital role. With the introduction of widgets in PrestaShop 1.7, developers gained a powerful tool for enhancing user interaction. This article is dedicated to explaining what widgets are, how they work, and why using them can significantly simplify the module development process and interface customization.

What Are Widgets?

Widgets are an advanced concept that extends the functionality of hooks in PrestaShop. Unlike basic hooks, which are limited to displaying content in strictly defined places within a template, widgets allow module developers to display content anywhere it is needed.

Limitations of Hooks

When using hooks, if a module wants to show additional content in several places, it needs to register and implement all possible hooks. This requires significant effort and often leads to code duplication. Widgets address this issue by allowing modules to be more universal and adaptive.

How to Use Widgets?

To make a module widget-compliant, developers need to follow a few simple steps.

1. Implement the Interface

First, it is necessary to implement the PrestaShop\PrestaShop\Core\Module\WidgetInterface. This confirms that your module supports widget functionality.

2. Declare Mandatory Methods

After implementing the interface, two methods must be declared:

  • renderWidget($hookName, array $configuration): This method is responsible for generating the widget view, allowing you to retrieve the necessary data and display the template.
  • getWidgetVariables($hookName, array $configuration): This method returns the variables to be passed to the Smarty template.

The parameters for both methods are identical and allow the module's behavior to be adapted based on the provided hook.

Code Example

Here is an example of a module implementation with widgets:

<?php if (!defined('_PS_VERSION_')) { exit; } use PrestaShop\PrestaShop\Core\Module\WidgetInterface; class MyModule extends Module implements WidgetInterface { public function __construct() { $this->name = 'mymodule'; $this->tab = 'front_office_features'; $this->version = '1.0.0'; $this->author = 'Firstname Lastname'; $this->need_instance = 0; $this->ps_versions_compliancy = [ 'min' => '1.7', 'max' => _PS_VERSION_ ]; $this->bootstrap = true; parent::__construct(); $this->displayName = $this->l('My module'); $this->description = $this->l('Description of my module.'); $this->confirmUninstall = $this->l('Are you sure you want to uninstall?'); } public function renderWidget($hookName, array $configuration) { $this->smarty->assign($this->getWidgetVariables($hookName, $configuration)); return $this->fetch('module:'.$this->name.'/views/templates/widget/mymodule.tpl'); } public function getWidgetVariables($hookName , array $configuration) { $myParamKey = $configuration['my_param_key'] ?? null; return [ 'my_var1' => 'my_var1_value', 'my_var2' => 'my_var2_value', 'my_var_n' => 'my_var_n_value', 'my_dynamic_var_by_param' => $this->getMyDynamicVarByParamKey($myParamKey), ]; } public function getMyDynamicVarByParamKey(string $paramKey) { if($paramKey === 'my_param_value') { return 'my_dynamic_var_by_my_param_value'; } return null; } }

Calling Widgets

Once the module has implemented the renderWidget() method, there are two ways to call it:

  1. Using Hooks:

    • Hooks can be triggered through a PHP class: Hook::exec($hook_name) or in a Smarty template: {hook h='<hook_name>'}.
  2. Using Widgets:

    • The renderWidget() function can be called directly from a Smarty template:
    {widget name='<module_name>'}

    or with the specified hook name:

    {widget name='<module_name>' hook='<hook_name>'}

Widgets in PrestaShop open new horizons for developers, providing flexible and powerful tools for creating adaptive content. They simplify the process of integrating modules and enhance user experience. By using widgets, you can significantly speed up development and improve content management.

What do you think of widgets? Have you tried using them in your projects? Share your thoughts in the comments!

Was this blog post helpful to you?

    
No comments at this moment
close

Checkout

close

Favourites