#

Créer votre premier block

#

Concept

Un module peut enregistrer plusieurs blocks dans PrettyBlocks. Cette flexibilité permet de créer une variété de contenus personnalisables pour votre site PrestaShop.

Depuis la version 3.1, PrettyBlocks intègre nativement les blocks suivants :

• Slider
• Bannière Image
• Titre
• Texte personnalisé
• Produits phares
• FAQ
• Render Module
• Render Hook
• Liste de produits

Ces blocks intégrés offrent une base solide pour la création de contenu, tout en vous permettant de les personnaliser selon vos besoins.

Il est important de noter que les classicblocks sont désormais considérés comme obsolètes et ne sont plus recommandés pour les nouvelles implémentations.

#

Structure du module

Pour commencer à créer vos propres blocks, vous devez d'abord comprendre la structure de base d'un module PrestaShop compatible avec PrettyBlocks. Voici un exemple de la structure classique d'un tel module :

 1 
 2use PrestaShop\PrestaShop\Core\Module\WidgetInterface;
 3class FakeModule extends Module implements WidgetInterface
 4{
 5    public function __construct()
 6    {
 7        $this->name = 'fakemodule';
 8        $this->tab = 'administration';
 9        $this->version = '1.0.0';
10        $this->author = 'PrestaSafe';
11        $this->need_instance = 1;
12 
13        $this->bootstrap = true;
14        parent::__construct();
15 
16        $this->displayName = $this->l('Fake module');
17        $this->description = $this->l('Fake module');
18 
19        $this->ps_versions_compliancy = array('min' => '1.7', 'max' => _PS_VERSION_);
20    }
21 
22    public function install()
23    {
24        return parent::install() && $this->registerHook('ActionRegisterBlock');
25    }
26 
27    public function uninstall()
28    {
29        return parent::uninstall() && $this->unregisterHook('ActionRegisterBlock');
30    }
31 
32    // Register blocks here.
33    public function hookActionRegisterBlock()
34    {
35        $blocks = [];
36        $blocks[] = [
37            'name' => 'Fake block',
38            'description' => 'Description of your block',
39            'code' => 'fake_block', // required must be uniq + used for execution of beforeRendering hook (beforeRenderingFakeBlock in this case)
40            'icon' => 'StarIcon', // https://heroicons.com V2
41            'icon_path' => 'https://yoursite.com/img/icon.png', // custom icon
42            'need_reload' => true, // reload iframe after save
43            'nameFrom' => 'field_name', // take the name of a config field
44            'templates' => [
45                'default' =>  'module:'.$this->name.'/views/templates/block/default.tpl'
46            ],
47            'config' => [
48                'fields' => [
49                    // ... array of fields
50                ]
51            ],
52            'repeater' => [
53                'name' => 'Element repeated',
54                'nameFrom' => 'field name',
55                'groups' => [
56                    // ... array of fields
57                ]
58            ]
59 
60        ];
61 
62        return $blocks;
63    }
64 
65}

Depuis la version 2.0.0 vous pouvez utiliser notre inferface fournie afin d'avoir une structure plus lisible: Veuillez tout d'abord créer une classe pour votre block:

 1use PrestaSafe\PrettyBlocks\Interfaces\BlockInterface;
 2 
 3class MyCustomBlock implements BlockInterface
 4{
 5    private $module;
 6 
 7    public function __construct($module)
 8    {
 9        $this->module = $module;
10    }
11 
12 
13    public function registerBlocks(): array
14    {
15        return
16        [
17            'name' => $this->module->l('Fake block'),
18            'description' => $this->module->l('Description of your block'),
19            'code' => 'fake_block', // required must be uniq + used for execution of beforeRendering hook (beforeRenderingFakeBlock in this case)
20            'icon' => 'StarIcon', // https://heroicons.com V2
21            'icon_path' => 'https://yoursite.com/img/icon.png', // custom icon
22            'need_reload' => true, // reload iframe after save
23            'nameFrom' => 'field_name', // take the name of a config field
24            'insert_default_values' => true, // new since 2.0.0
25            'templates' => [
26                'default' =>  'module:'.$this->module->name.'/views/templates/block/default.tpl'
27            ],
28            'config' => [
29                'fields' => [
30                    // ... array of fields
31                ]
32            ],
33            'repeater' => [
34                'name' => $this->module->l('Element repeated'),
35                'nameFrom' => $this->module->l('field name'),
36                'groups' => [
37                    // ... array of fields
38                ]
39            ]
40        ];
41    }
42}

Puis dans votre module, sur le hook ActionRegisterBlock enregistrez votre block comme ceci:

 1public function hookActionRegisterBlock()
 2{
 3 
 4    return HelperBuilder::renderBlocks(
 5        [
 6            new MyCustomBlock($this)
 7            // new MySecondCustomBlock($this)
 8        ]
 9    );
10}

Le hook ActionRegisterBlock est prévu pour enregistrer un ou plusieurs block(s) dans le Prettyblocks. Vous pouvez utiliser les 2 exemples pour enregistrer vos blocks. Si vous utilisez l'interface fournie, pensez bien à faire en sorte que composer charge vos classes de blocks automatiquement comme ceci:

 1{
 2    "name": "company/your_module",
 3    "description": "your description",
 4    "license": "AFL-3.0",
 5    "keywords": [
 6      "prestashop",
 7    ],
 8    "authors": [
 9      {
10        "name": "Authors",
11        "homepage": "https://...."
12      }
13    ],
14    "config": {
15      "preferred-install": "dist",
16      "prepend-autoloader": false
17    },
18    "autoload": {
19      "classmap": [
20        "classes/blocks"
21      ],
22      "exclude-from-classmap": []
23    },
24    "type": "prestashop-module"
25  }

dans cet exemple, nos blocks sont dans le dossier classes/blocks de notre module faites ensuite un composer dump-autoload dans votre dossier de module. Si vos blocks ne sont pas chargés, n'oubliez pas d'ajouter l'autoload dans votre module

1use PrestaShop\PrestaShop\Core\Module\WidgetInterface;
2if (file_exists(__DIR__ . '/vendor/autoload.php')) {
3    require_once __DIR__ . '/vendor/autoload.php';
4}
5class FakeModule extends Module implements WidgetInterface
6{
7    // ...

#

Détails d'un block

#

Champs répétables

Les champs répétables vous permettront de mettre autant de données que l'utilisateur le souhaite. Plusieurs paramètres sont requis.