#

Champs disponibles

Que ce soit dans la section config ou repeater, les champs utilisés restent identiques. Voici un aperçu des différents types de champs disponibles et comment les utiliser dans vos blocks PrettyBlocks.

Les exemples suivants illustrent la configuration de divers types de champs, que vous pouvez adapter selon vos besoins spécifiques.

#

Text

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

#

Color

Affiche un sélecteur de couleur avec un choix de couleurs prédéfinies et/ou un champ pour saisir une couleur personnalisée.

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 Vous permettra de créer un champs de recherche en fonction d'une PrestaShopCollection ou ObjectModel

Return ObjectPresenter

Exemple pour rechercher un produit:

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 Vous permettra de créer un champs de type VueQuill ou 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 Vous permettra de créer un champs de type <input type='checkbox'> Idéal pour certaines configurations.

Return 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 Vous permettra de créer un choix sous forme de <input type='radio'>

Return 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 Vous permettra de créer un choix sous forme de <select></select>

Return 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 Vous permettra de créer un choix multiple sous forme de tag

Return 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 Vous permettra de créer un champs de type titre, qui sera compatible avec le composant Title

Return 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 Vous permettra de créer un champs de type slider range (<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 Vous permettra de créer un champs de 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],