#

Plantillas

Las plantillas utilizadas son aquellas que emplean el motor principal de plantillas de PrestaShop: Smarty

Cada plantilla debe registrarse utilizando la nueva sintaxis de PrestaShop:

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

Ejemplo: para una plantilla ubicada en: /modules/modulemodule/views/templates/hook/front.tpl utilizando la sintaxis: module:modulemodule/views/templates/hook/front.tpl

Esta puede ser sobrescrita colocándola en un tema: /themes/mytheme/modules/modulemodule/views/templates/hook/front.tpl

#

Uso de datos del Block

PrettyBlocks devuelve una variable llamada $block en cada block

#

Configuración

Todos los datos definidos en la sección config pueden utilizarse de esta forma:

{$block.settings.{$nombre_de_la_clave}}

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

Para recuperar title, coloca en tus plantillas: {$block.settings.title}

Para color => {$block.settings.color} y así sucesivamente...

#

Campos Predeterminados

Existen varios campos predeterminados que todos los blocks pueden utilizar.

container Se utiliza para colocar el contenido en un contenedor o no (puedes implementarlo según tus necesidades)

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

force_full_width Se utiliza para extender un block al 100% del ancho

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

Puedes utilizar la clase CSS _force-full para extender el Block al 100% del ancho

TIPS

Puedes combinar las dos clases container y _force-full (en este caso, _force-full tiene prioridad)

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

bg_color para utilizar un background-color (color de fondo)

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

#

$block.styles

{$block.styles} genera un atributo style='...' en tus Blocks si utilizas márgenes y rellenos personalizados desde PrettyBlocks. Esta funcionalidad te permite aplicar estilos específicos a cada Block de manera dinámica y flexible.

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

#

$block.classes

{$block.classes} te permite colocar clases CSS generadas automáticamente por PrettyBlocks cuando utilizas márgenes y rellenos desde PrettyBlocks (del 1 al 12)

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

#

Campos Repetibles

De manera similar a los campos de configuración, los campos repetibles (repeater) también están presentes en cada block. Puedes utilizarlos con esta 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]

Ejemplo de cómo utilizar elementos repetibles en tus plantillas:

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