#
Hooks Disponibles

Para extender de la mejor manera la funcionalidad de PrettyBlocks, hemos implementado ciertos hooks para facilitar la vida de los desarrolladores.

#
Registrar Hooks (ActionRegisterBlock)

Al enganchar tu módulo al hook ActionRegisterBlock, puedes añadir fácilmente tus blocks.

 1public function hookActionRegisterBlock()
 2{
 3    $blocks = [];
 4    $blocks[] = [
 5        'name' => 'Fake block',
 6        'description' => 'Description of your block',
 7        'code' => 'fake_block', // required must be uniq + used for execution of beforeRendering hook (beforeRenderingFakeBlock in this case)
 8        'icon' => 'StarIcon', // https://heroicons.com V2
 9        'need_reload' => true, // reload iframe after save
10        'templates' => [
11            'default' =>  'module:'.$this->name.'/views/templates/block/default.tpl'
12        ],
13        'config' => [
14            'fields' => [
15                // ... array of fields
16            ]
17        ],
18        'repeater' => [
19            'name' => 'Element repeated',
20            'nameFrom' => 'field name',
21            'groups' => [
22                // ... array of fields
23            ]
24        ]
25 
26    ]
27 
28    return $blocks;
29}

#
Registrar Configuraciones (ActionRegisterThemeSettings)

El hook ActionRegisterThemeSettings te permite registrar configuraciones generales para tu tema. Para registrar configuraciones, necesitas devolver un array de Campos Solo el parámetro tab te permitirá añadir tu configuración a una pestaña existente, o crearla si no existe. Por ejemplo: 'tab' => 'design' colocará la configuración en una pestaña Diseño

 1public function hookActionRegisterThemeSettings()
 2{
 3    return [
 4        'settings_name' => [
 5            'tab' => 'design',
 6            'type' => 'color',
 7            'default' => '#000000',
 8            'label' => 'Change your color'
 9        ],
10        'select' => [
11            'tab' => 'TEST',
12            'type' => 'select',
13            'label' => 'Select field',
14            // 'default' => '2',
15            'choices' => [
16                '1' => 'Value 1',
17                '2' => 'Value 2',
18                '3' => 'Value 3',
19            ]
20        ],
21        'radio_group' => [
22            'tab' => 'TEST',
23            'type' => 'radio_group',
24            'label' => 'Choose a value',
25            'default' => '3',
26            'choices' => [
27                '1' => 'Radio 1',
28                '2' => 'Radio 2',
29                '3' => 'Radio 3',
30            ]
31        ],
32        'settings_name_radio' => [
33            'tab' => 'design',
34            'type' => 'radio',
35            'default' => false,
36            'label' => 'Add this option'
37        ],
38        'settings_name_textarea' => [
39            'tab' => 'Custom tabs !',
40            'type' => 'textarea',
41            'default' => 'Hello you !',
42            'label' => 'type textarea'
43        ],
44        'new_logo' => [
45            'tab' => 'design',
46            'type' => 'fileupload',
47            'label' => 'File upload',
48            'path' => '$/fakemodule/views/images/test/',
49            'default' => [
50                ['url' => 'https://via.placeholder.com/141x180'],
51            ],
52        ]
53    ];
54}

#
Extender block (beforeRendering{BlockCode})

Para ampliar los datos de tu block, puedes añadir información a través de este hook: Por ejemplo, para un block con el código: block_category_products se ejecuta un hook con el código del block en camelCase: hookbeforeRenderingblockCategoryProducts

Puedes utilizar todos los datos de tu block en $params['block']

 1public function hookbeforeRenderingClassicFeaturedProduct($params)
 2   {
 3       $settings = $params['block']['settings'];
 4 
 5       if($settings)
 6       {
 7           if(isset($settings['category']['id']))
 8           {
 9               $id_category = (int)$settings['category']['id'];
10               return ['products' => $this->getProducts($id_category)];
11           }
12       }
13       return ['products' => false];
14 
15   }

Todas las claves devueltas pueden utilizarse en la variable $block.extra en el front office. Resultado de nuestro ejemplo: $block.extra.products devolverá un array de productos.

#
Extender Plantillas (actionExtendBlockTemplate{BlockCode})

¿Por qué reconstruir un block o módulo completo solo para modificar una simple visualización? Un módulo puede añadir una o más plantillas basadas en un block.

Como en el ejemplo anterior, para un block con el código block_category_products, puedes añadir una o más plantillas para él:

1 public function hookactionExtendBlockTemplateBlockCategoryProducts($params)
2{
3    return [
4        'override1' => 'module:'.$this->name.'/views/templates/blocks/template1.tpl',
5        'override2' => 'module:'.$this->name.'/views/templates/blocks/template2.tpl',
6    ];
7}

#
Compilación SASS (ActionQueueSassCompile)

Prettyblocks simplifica tu trabajo de desarrollo. Gracias a este hook, puedes compilar tus estilos SASS o CSS.
Nuestro helper utiliza la biblioteca scssphp.

(Desde la versión 3.0.0), el perfil actual (datos de la tabla prettyblocks_settings) es accesible desde los parámetros del hook ActionQueueSassCompile.

Aquí tienes un ejemplo:

 1public function hookActionQueueSassCompile($params)
 2   {
 3       $id_shop = (int)$params['id_shop'];
 4       $profile = $params['profile'];
 5       $vars = [
 6           'import_path' => [
 7               '$/themes/classic/_dev/css/'
 8           ],
 9           'entries' => [
10               '$/modules/'.$this->name.'/views/css/vars.scss'
11           ],
12           'out' => '$/themes/classic/_dev/css/helpers/_custom_vars.scss'
13       ];
14 
15       $theme = [
16           'import_path' => [
17               '$/themes/classic/_dev/css/'
18           ],
19           'entries' => [
20               '$/themes/classic/_dev/css/theme.scss'
21           ],
22           'out' => '$/themes/classic/assets/css/theme.css'
23       ];
24 
25 
26       return [$vars, $theme];
27   }

Para aprovechar mejor esta función, simplemente puedes usar la configuración de Temas en un archivo scss o css y Prettyblocks se encarga del resto. No es necesario compilar con NPM o yarn, aunque para los aficionados a estas tecnologías, puedes usar estas herramientas sin interferir con la funcionalidad del constructor :) import_path: agrega una ruta de importación (Ver biblioteca scssphp) entries: archivos de entrada (sin límite en el número) out: el archivo que se compilará como salida

Ejemplo: con la variable $sass

 1 
 2$vars = [
 3    'import_path' => [
 4        '$/themes/classic/_dev/css/'
 5    ],
 6    'entries' => [
 7        '$/modules/'.$this->name.'/views/css/vars.scss'
 8    ],
 9    'out' => '$/themes/classic/_dev/css/helpers/_custom_vars.scss'
10];

Contenido del archivo '$/modules/'.$this->name.'/views/css/vars.scss'

1$gray-900:  $SETTINGS_bg_dark !default;
2$icon-color-top-bar: $SETTINGS_icon_top_bar_color !default;
3$primary: $SETTINGS_primary_color !default;

Archivo compilado por PrettyBlocks $/themes/classic/_dev/css/helpers/_custom_vars.scss

1$gray-900:  #373f50 !default;
2$icon-color-top-bar: #fe696a !default;
3$primary: #fe696a !default;

$SETTINGS_bg_dark ha tomado el valor de la configuración del tema con el nombre bg_dark. Es obligatorio usar $SETTINGS_ + {nombre_configuración} para que coincida correctamente con el valor.

#Hooks Disponibles

#Registrar Hooks (ActionRegisterBlock)

#Registrar Configuraciones (ActionRegisterThemeSettings)

#Extender block (beforeRendering{BlockCode})