#

Creating Your First Block

#

Concept

A module can register multiple blocks in PrettyBlocks. This flexibility allows you to create a variety of customizable content for your PrestaShop site.

Since version 3.1, PrettyBlocks natively integrates the following blocks:

• Slider
• Image Banner
• Title
• Custom Text
• Featured Products
• FAQ
• Render Module
• Render Hook
• Product List

These integrated blocks provide a solid foundation for content creation while allowing you to customize them according to your needs.

It's important to note that classicblocks are now considered deprecated and are no longer recommended for new implementations.

#

Module Structure

To start creating your own blocks, you first need to understand the basic structure of a PrestaShop module compatible with PrettyBlocks. Here's an example of the typical structure of such a 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}

Since version 2.0.0, you can use our provided interface to create a more readable structure: First, please create a class for your 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}

Then in your module, register your block on the ActionRegisterBlock hook as follows:

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

The ActionRegisterBlock hook is designed to register one or more block(s) in Prettyblocks. You can use the two examples provided to register your blocks. If you're using the provided interface, make sure Composer automatically loads your block classes as follows:

 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  }

In this example, our blocks are located in the classes/blocks folder of our module. Next, run composer dump-autoload in your module directory. If your blocks are not loaded, don't forget to add the autoload in your 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    // ...

#

Block Details

#

Repeatable Fields

Repeatable fields allow you to add as much data as the user wants. Several parameters are required.