#

Templating

The templates used are those utilizing PrestaShop's main template engine: Smarty

Each template must be registered using PrestaShop's new syntax:

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

Example: for a template located in: /modules/modulemodule/views/templates/hook/front.tpl using the syntax: module:modulemodule/views/templates/hook/front.tpl

This can be overridden by placing it in a theme: /themes/mytheme/modules/modulemodule/views/templates/hook/front.tpl

#

Using Block Data

PrettyBlocks returns a variable named $block in each block

#

Configuration

All data defined in the config section can be used in this form:

{$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],

To retrieve title, place in your templates: {$block.settings.title}

For color => {$block.settings.color} and so on...

#

Default Fields

There are several default fields that all blocks can use.

container Used to place content in a container or not (you can implement this as needed)

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

force_full_width Used to extend a block to 100% width

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

You can use the CSS class _force-full to extend the Block to 100% width

TIPS

You can combine the two classes container and _force-full (in this case, _force-full takes precedence)

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

bg_color to use a background-color

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

#

$block.styles

{$block.styles} generates a style='...' attribute on your Blocks if you use custom margins and paddings from PrettyBlocks

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

#

$block.classes

{$block.classes} allows you to place CSS classes automatically generated by PrettyBlocks when you use margins and paddings from PrettyBlocks (from 1 to 12)

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

#

Repeatable Fields

Similar to configuration fields, repeatable fields (repeater) are also present in each block. You can use them with this 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]

Example of how to use repeatable elements in your templates:

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