#

Templating

Les templates utilisés sont des templates utilisant le moteur de template principal de PrestaShop: Smarty

Chaque template doit être enregistré en utilisant la nouvelle syntaxe de PrestaShop:

Exemple: module:modulemodule/views/templates/hook/front.tpl

Ex: pour un template localisé dans: /modules/modulemodule/views/templates/hook/front.tpl utlisant la syntaxe: module:modulemodule/views/templates/hook/front.tpl

Ce dernier peut être surclassé en le plaçant dans un thème: /themes/montheme/modules/modulemodule/views/templates/hook/front.tpl

#

Utiliser les données du bloc

PrettyBlocks renvoie dans chaque block, une variable nommée: $block

#

Configuration

Toutes les données définies dans la section config peuvent être exploitées sous cette forme:

{$block.settings.{$nom_de_la_cle}}

 1// exemple
 2'config' => [
 3    'fields' => [
 4        'title' => [
 5            'type' => 'text', // type of field
 6            'label' => 'Title', // label to display
 7            'default' => 'Customer reviews' // default value
 8        ],
 9        'color' => [
10            'type' => 'color', // type of field
11            'label' => 'Choose a background color', // label to display
12            'default' => '#121212' // default value
13        ]
14],

Pour récupérer title placez dans vos templates: {$block.settings.title}

Pour color => {$block.settings.color} etc...

#

Champs par défaut

Il existe plusieurs champs par défaut que tous les blocks peuvent utiliser.

container Utilisé pour placer dans un container ou non (à vous de l'utiliser de cette manière)

1<div class="{if $block.settings.default.container} container {/if}"> ... </div>

force_full_width Utilisé pour étendre un block à 100%

1<div class="{if $block.settings.default.force_full_width} _force-full {/if}"> ... </div>

Vous pouvez utiliser la classe CSS _force-full afin d'étendre le Block à 100%

TIPS

Vous pouvez combiner les 2 classes container et _force-full (_force-full prends à ce moment le dessus)

1<div class="{if $block.settings.default.container}container{/if}{if $block.settings.default.force_full_width}_force-full{/if}"> ... </div>

bg_color pour utiliser un background-color

1<div style="{if $block.settings.default.bg_color}background-color: {$block.settings.default.bg_color} {/if}"> ... </div>

#

$block.styles

{$block.styles} permet de généré un style='...' sur vos Blocks si vous utilisez des margins et paddings personnalisés depuis PrettyBlocks

1<div {$block.styles}> ... </div>

#

$block.classes

{$block.classes} permet de placer les classes css automatiquement générés par PrettyBlocks lorsque vous utilisez des margins et paddings depuis PrettyBlocks (de 1 à 12)

1<div class="{$block.classes}"> ... </div>

#

Champs répétables

Comme pour les champs de configuration, les champs répétables (repeater) sont également présents dans chaque block Vous pouvez les utiliser avec cette variable: {$block.states}

 1// exemple
 2'repeater' => [
 3    'name' => 'Element repeated',
 4    'nameFrom' => 'title',
 5    'groups' => [
 6        'title' => [
 7            'type' => 'text', // type of field
 8            'label' => 'Title', // label to display
 9            'default' => 'Customer reviews' // default value
10        ],
11        'color' => [
12            'type' => 'color', // type of field
13            'label' => 'Choose à background color', // label to display
14            'default' => '#121212' // default value
15        ]
16    ]
17]

Exemple pour utiliser les éléments répétables dans ses templates.

1{foreach from=$block.states item=$state}
2    {$state.title}
3    {$state.color}
4{/foreach}