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:
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:
-
Using Hooks:
- Hooks can be triggered through a PHP class:
Hook::exec($hook_name)or in a Smarty template:{hook h='<hook_name>'}.
- Hooks can be triggered through a PHP class:
-
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>'} - The
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!
