#
Hooks disponibles

Afin d'étendre au mieux les fonctionnalités de PrettyBlocks, nous avons implémenté certains hooks pour faciliter la vie des développeurs.

#
Register Hooks (ActionRegisterBlock)

En greffant votre module sur le hook ActionRegisterBlock vous pourrez simplement rajouter vos blocs.

 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)

Le hook ActionRegisterThemeSettings vous permettra d'enregistrer des paramètres généraux pour votre thème. Pour enregistrer des paramètres, vous devez retourner un tableau de Champs Seul le paramètre tab vous permettra d'ajouter votre paramètre dans un tab existant, ou de le créer si il n'existe pas. ex: 'tab' => 'design' placera le paramètre dans un onglet Design

 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})

Afin d'étendre les données de votre block, vous pouvez rajouter des données via ce hook: Exemple pour un block aillant pour code: block_category_products un hook est exécuté avec le code du block en camelCase: hookbeforeRenderingblockCategoryProducts

Vous pouvez utiliser toutes les données de votre bloc dans le $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   }

Toutes les clés retournées pourront être utilisées dans la variable $block.extra sur le front office. Résulat de notre exemple: $block.extra.products retournera un tableau de produits.

#
Extends Templates (actionExtendBlockTemplate{BlockCode})

Pourquoi devoir refaire un bloc ou un module afin de modifier un simple affichage ? Un module peut rajouter un ou plusieurs templates en fonction d'un bloc.

Comme pour l'exemple précédent, pour un bloc aillant le code block_category_products vous pouvez rajouter un ou plusieurs templates pour ce dernier:

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 vous mâche votre travail de développeur, grâce à ce hook, vous pouvez compiler vos styles SASS ou CSS.
Notre helper utilise la librairie scssphp

(depuis la version 3.0.0), le profil en cours (données de la table prettyblocks_settings) est accessible depuis les paramètres du hook ActionQueueSassCompile

Voici un exemple:

 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   }

Afin de mieux l'exploiter, vous pouvez simplement utiliser les Themes settings dans un fichier scss ou css et Prettyblocks se charge du reste. Il n'est donc pas nécessaire de compiler avec NPM ou yarn, cela dit, pour les plus fan de ces technologies, vous pouvez utiliser ces outils sans perturber le fonctionnement du builder :) import_path: ajoute un chemin d'import (CF lib scssphp) entries: les fichiers à mettre en entrée (pas de limite de nombre) out: le fichier qui sera compilé en sortie

Ex: avec 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];

Contenu du fichier '$/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;

Fichier compilé par 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 a pris la valeur du Theme Settings qui a pour nom bg_dark il est obligatoire d'utiliser $SETTINGS_ + {nom_du_settings} afin de faire matcher la valeur.

#Hooks disponibles

#Register Hooks (ActionRegisterBlock)

#Register Settings (ActionRegisterThemeSettings)

#Extend block (beforeRendering{BlockCode})