#

Creando Tu Primer Block

#

Concepto

Un módulo puede registrar múltiples blocks en PrettyBlocks. Esta flexibilidad te permite crear una variedad de contenido personalizable para tu sitio PrestaShop.

Desde la versión 3.1, PrettyBlocks integra nativamente los siguientes blocks:

• Slider
• Banner de imagen
• Título
• Texto personalizado
• Productos destacados
• Preguntas frecuentes
• Renderizar módulo
• Renderizar hook
• Lista de productos

Estos blocks integrados proporcionan una base sólida para la creación de contenido, permitiéndote personalizarlos según tus necesidades.

Es importante tener en cuenta que los classicblocks ahora se consideran obsoletos y ya no se recomiendan para nuevas implementaciones.

#

Estructura del Módulo

Para comenzar a crear tus propios blocks, primero necesitas entender la estructura básica de un módulo PrestaShop compatible con PrettyBlocks. Aquí tienes un ejemplo de la estructura típica de dicho módulo:

 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}

Desde la versión 2.0.0, puedes utilizar nuestra interfaz proporcionada para crear una estructura más legible y organizada: En primer lugar, crea una clase para tu 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}

Luego, en tu módulo, registra tu block en el hook ActionRegisterBlock de la siguiente manera:

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

El hook ActionRegisterBlock está diseñado para registrar uno o más block(s) en Prettyblocks. Puedes utilizar los dos ejemplos proporcionados para registrar tus blocks. Si estás utilizando la interfaz proporcionada, asegúrate de que Composer cargue automáticamente tus clases de block de la siguiente manera:

 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  }

En este ejemplo, nuestros blocks se encuentran en la carpeta classes/blocks de nuestro módulo. A continuación, ejecuta composer dump-autoload en el directorio de tu módulo. Si tus blocks no se cargan, no olvides agregar el autoload en tu módulo:

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

#

Detalles del Block

#

Campos Repetibles

Los campos repetibles te permiten agregar tantos datos como el usuario desee. Se requieren varios parámetros.