#

Available Fields

Whether in the config or repeater section, the fields used remain identical. Here's an overview of the different types of available fields and how to use them in your PrettyBlocks blocks.

The following examples illustrate the configuration of various field types, which you can adapt according to your specific needs.

#

Text

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

#

Color

Displays a color picker with a choice of predefined colors and/or a field to enter a custom color.

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

#

Textarea

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

#

Fileupload

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 allows you to create a search field based on a PrestaShopCollection or ObjectModel

Returns ObjectPresenter

Example to search for a product:

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 allows you to create a field of type VueQuill or 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 allows you to create a field of type <input type='checkbox'> Ideal for certain configurations.

Returns Bool

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

#

Radio Group

radio_group allows you to create a choice in the form of <input type='radio'>

Returns 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 Allows you to create a choice in the form of <select></select>

Returns 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 Allows you to create multiple choices in the form of tags

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

#

Title

title Allows you to create a title field, which will be compatible with the Title component

Returns 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 Allows you to create a slider range field (<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 Allows you to create a datepicker field

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