#
Available Hooks

To best extend the functionality of PrettyBlocks, we have implemented certain hooks to make developers' lives easier.

#
Register Hooks (ActionRegisterBlock)

By hooking your module to the ActionRegisterBlock hook, you can easily add your 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}

#
Register Settings (ActionRegisterThemeSettings)

The ActionRegisterThemeSettings hook allows you to register general settings for your theme. To register settings, you need to return an array of Fields Only the tab parameter will allow you to add your setting to an existing tab, or create it if it doesn't exist. e.g.: 'tab' => 'design' will place the setting in a Design tab

 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}

#
Extend block (beforeRendering{BlockCode})

To extend the data of your block, you can add data via this hook: For example, for a block with the code: block_category_products a hook is executed with the block code in camelCase: hookbeforeRenderingblockCategoryProducts

You can use all the data from your block in $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   }

All returned keys can be used in the $block.extra variable on the front office. Result of our example: $block.extra.products will return an array of products.

#
Extend Templates (actionExtendBlockTemplate{BlockCode})

Why rebuild an entire block or module just to modify a simple display? A module can add one or more templates based on a block.

As in the previous example, for a block with the code block_category_products, you can add one or more templates for it:

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}

#
SASS compilation (ActionQueueSassCompile)

Prettyblocks simplifies your development work. Thanks to this hook, you can compile your SASS or CSS styles.
Our helper uses the scssphp library.

(Since version 3.0.0), the current profile (data from the prettyblocks_settings table) is accessible from the ActionQueueSassCompile hook parameters.

Here's an example:

 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   }

To better utilize this feature, you can simply use the Themes settings in a scss or css file and Prettyblocks takes care of the rest. There's no need to compile with NPM or yarn, although for fans of these technologies, you can use these tools without interfering with the builder's functionality :) import_path: adds an import path (See scssphp library) entries: input files (no limit on the number) out: the file that will be compiled as output

Example: with the $sass variable

 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];

Content of file '$/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;

File compiled by 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 has taken the value from the Theme Settings with the name bg_dark. It is mandatory to use $SETTINGS_ + {settings_name} to match the value correctly.

#Available Hooks

#Register Hooks (ActionRegisterBlock)

#Register Settings (ActionRegisterThemeSettings)

#Extend block (beforeRendering{BlockCode})