PrettyBlocks
Créer un block PrettyBlocks

#
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 Description Type Required
name Nom d'affichage de votre block String true
description Description de votre block String true
code Description de votre block doit absolument être unique String true
icon Icon heroicons (v2) en format camelCase
ex: academic-cap => AcademicCapIcon
Liste disponible ici: Heroicons
String false
icon_path Url de votre icon personnalisé String false
nameFrom Donner un nom custom à votre block
ex: title
Prendra le valeur du contenu du champs de configuration title
String false
need_reload Rechargement de l'iframe après avoir sauvegardé un block, utile si vous développez un block de type slider par exemple
Default: true
Bool false
insert_default_values Mets les valeurs des champs par défaut (les champs doivent avoir l'option 'force_default_value' => true,) lors de l'insertion du block (afin d'avoir des données de démonstration)
Default: false
Bool false
templates Templates de votre block, il est impératif d'avoir un template avec la clé default
Vous pouvez enregistrer autant de templates que vous souhaitez
Array true
config Champs de configuration de votre block
Doit avoir un tableau de champs
'fields' => [ /*... fields ...*/ ]

voir Champs disponibles
Array false
repeater Champs répétables
Plus de détails ci-dessous Champs répétable
Array false

#
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.

Champs Description Type Required
name Nom par défaut des éléments listés String true
nameFrom Prend le nom de la valeur du champs répété
ex: 'nameFrom' => 'title' affichera la valeur du champs title dans la liste
String false
groups Liste des champs
voir Champs disponibles
Array false