#

Campos Disponibles

Ya sea en la sección config o repeater, los campos utilizados permanecen idénticos. Aquí tienes una visión general de los diferentes tipos de campos disponibles y cómo utilizarlos en tus blocks de PrettyBlocks.

Los siguientes ejemplos ilustran la configuración de varios tipos de campos, que puedes adaptar según tus necesidades específicas.

#

Texto

1'title' => [
2    'type' => 'text', // type of field
3    'label' => 'Title', // label to display
4    'default' => 'Customer reviews' // default value
5]

#

Color

Muestra un selector de color con una selección de colores predefinidos y/o un campo para ingresar un color personalizado.

1'color' => [
2    'type' => 'color', // type of field
3    'label' => 'Background color', // label to display
4    'default' => '#121212' // default value
5]

#

Área de texto

1'description' => [
2    'type' => 'textarea', // type of field
3    'label' => 'Title', // label to display
4    'default' => 'Customer reviews' // default value
5]

#

Carga de archivos

1'upload' => [
2    'type' => 'fileupload', // type of field
3    'label' => 'File upload', // label to display
4    'path' => '$/cz_gallery/imgs/', // path to upload
5    'default' => [ // default value
6        ['url' => 'https://via.placeholder.com/100x100'],
7    ],
8]

#

Selector

Selector te permite crear un campo de búsqueda basado en una PrestaShopCollection o ObjectModel

Devuelve ObjectPresenter

Ejemplo para buscar un producto:

1'product' => [
2    'type' => 'selector', // type of field
3    'label' => 'Choose a product', // label to display
4    'collection' => 'Product', // Collection to cearch
5    'default' => 'default value', // default value
6    'selector' => '{id} - {name}' // will be replaced by Object Attribute and will be used for search results
7]

#

Editor

Editor te permite crear un campo de tipo VueQuill o TinyMce

1'text' => [
2    'type' => 'editor', // type of field
3    'label' => 'Editor', // label to display
4    'provider' => 'vuequill' // default, you can use tinymce by you need to put your api key
5    'default' => '<p>Hello <strong>World</strong> !' // default HTML value
6]

#

Checkbox

checkbox te permite crear un campo de tipo <input type='checkbox'> Ideal para ciertas configuraciones.

Devuelve Bool

1'show' => [
2    'type' => 'checkbox', // type of field
3    'label' => 'Use custom image', // label to display
4    'default' => false // default value (Boolean)
5]

#

Grupo de Radio

radio_group te permite crear una opción en forma de <input type='radio'>

Devuelve String

 1'radio_group' => [
 2    'type' => 'radio_group', // type of field
 3    'label' => 'Choose a value',  // label to display
 4    'default' => '3', // default value (String)
 5    'choices' => [
 6        '1' => 'Radio 1',
 7        '2' => 'Radio 2',
 8        '3' => 'Radio 3',
 9    ]
10],

#

Select

select Te permite crear una opción en forma de <select></select>

Devuelve String

 1'choices' => [
 2    'type' => 'select', // type of field
 3    'label' => 'Choose a value', // label to display
 4    'default' => '3', // default value (String)
 5    'choices' => [
 6        '1' => 'Radio 1',
 7        '2' => 'Radio 2',
 8        '3' => 'Radio 3',
 9    ]
10],

#

MultiSelect

multiselect Te permite crear múltiples opciones en forma de etiquetas

Devuelve String

 1'choices' => [
 2    'type' => 'multiselect', // type of field
 3    'label' => 'Choose a value', // label to display
 4    'default' => ['1','2'], // default value (Array)
 5    'choices' => [
 6        '1' => 'Select 1',
 7        '2' => 'Select 2',
 8        '3' => 'Select 3',
 9        '4' => 'Select 4',
10        '5' => 'Select 5',
11    ],
12],

#

Título

title Te permite crear un campo de título, que será compatible con el Componente de Título

Devuelve void

 1'title' => [
 2    'type' => 'title',
 3    'label' => 'Title',
 4    'force_default_value' => true, // force default value
 5    'default' => [
 6        'tag' => 'h2',
 7        'classes' => [],
 8        'value' => "Default value",
 9        'focus' => false,
10        'bold' => false,
11        'italic' => false,
12        'underline' => false,
13        'size' => 18,
14    ],
15],

#

Slider

slider Te permite crear un campo de rango deslizante (<input type="range">)

1'slider' => [
2    'type' => 'slider',
3    'label' => 'Slider',
4    'force_default_value' => true, // force default value
5    'step' => 3, // default 1
6    'min' => 0,// set a min value
7    'max' => 12, // set a max value.
8    'default' = 0 // set a default value
9],

#

Date

date Te permite crear un campo datepicker

1'date' => [
2    'type' => 'datepicker',
3    'label' => 'Date',
4    'force_default_value' => true, // force default value
5    'default' => date('Y-m-d', strtotime('+30 days')), // set now() + 30 days
6],