...
Fields inside [brackets] are optional as per the HTML standard.
Values between {curly braces} list the possible values for this field.
| Code Block |
|---|
$this->fields_form = array(
'legend' => array(
'title' => $this->l('Edit carrier'), // This is the name of the fieldset, which can contain many option fields
'image' => '../img/admin/icon_to_display.gif' // The icon must, if there is one, must be of the size 16*16
),
'input' => array(
array(
'type' => {'text', 'select', 'textarea', 'radio', 'checkbox', 'file', 'shop', 'asso_shop', 'free', 'color'},
['label'] => $this->l('Shipping method'), // Theoretically optional, but in reality each field has to have a label
'name' => 'shipping_method', // The name of the object property from which we get the value
['required'] => {true, false}, // If true, PrestaShop will add a red star next to the field
['desc'] => $this->l('Description displayed under the field'),
['hint'] => $this->l('Invalid characters:').' <>;=#{}' // This is displayed onwhen hoverthe mouse hovers the field.
['suffix'] => 'kg' // This is displayed after the field (for exie. to indicate the unit of measure)
['options'] => array( // This is only useful if type == select
'query' => $array_of_rows, // $array_of_rows must contain an array of arrays, inner arrays (rows) being mode of many fields
'id' => 'id_carrier', // The key that will be used for each option "value" attribute
),
['values'] => array( // This is only useful if type == radio
array(
'id' => 'active_on',
'value' => 1,
'label' => $this->l('Enabled')
),
array(
'id' => 'active_off',
'value' => 0,
'label' => $this->l('Disabled')
)
),
[is_bool] => {true, false}, // This is only useful if type == radio,. It display asa "yes or no" choice.
['empty_message'] => $this->l('To be displayed when the field is empty'),
['lang'] => {true, false}, // is the field multilang?
),
array(
//another field
),
),
'submit' => array(
'title' => $this->l(' Save '), // This is the button that saves the whole fieldset.
'class' => 'button'
)
); |
| Note |
|---|
If you want to use the "color" type, you can add the |
Basic declaration
Removing all the optional fields, this is how to build a basic HelperForm element:
| Code Block |
|---|
$this->fields_form = array( 'legend' => array( 'title' => $this->l('Edit carrier'), 'image' => '../img/admin/icon_to_display.gif' ), 'input' => array( array( 'type' => 'text', 'name' => 'shipping_method', ), ), 'submit' => array( 'title' => $this->l('Save'), 'class' => 'button' ) ); |
This specific code generates this HTML code (simplifier for readability):
| Code Block |
|---|
<form id="_form">
<fieldset id="fieldset_main_conf">
<legend>
<img alt="Edit carrier" src="../img/admin/icon_to_display.gif">Edit carrier
</legend>
<div class="margin-form">
<input type="text" class="" value="" id="shipping_method" name="shipping_method">
</div>
<div class="clear"></div>
<div class="margin-form">
<input type="submit" class="button" name="" value="Save" id="_form_submit_btn">
</div>
</fieldset>
</form> |
Generating specific elements
The 'input' variable of the form declaration takes an array containing the content of your form. Using the various offered possibilities, you can build just about any type of form, and be assured that it will comply with PrestaShop's style and form processing.
You can use as many element arrays as necessary for your form, one after the other.
Text input
Here is how to generate an <input> element:
| Code Block |
|---|
array(
'label' => $this->l('Name'),
'type' => 'text',
'name' => 'name',
'size' => 50,
'required' => true,
'desc' => $this->l('Please enter your name.')
), |
Selector
Here is how to generate a <select> element:
| Code Block |
|---|
array(
'type' => 'select',
'label' => $this->l('Shipping method:'),
'name' => 'shipping_method',
'required' => true,
'options' => array(
'query' => $options,
'id' => 'id_option',
'name' => 'name'
)
),
|
The content of the selector is stored in the $options variables, which is an array of arrays.
$options can take this value:
| Code Block |
|---|
$shipping_methods = array(
array(
'id_option' => 1,
'name' => 'Method 1'
),
array(
'id_option' => 2,
'name' => 'Method 2'
),
); |
...but of course, you would be better of generating such an array of arrays yourself, from the data stored in PrestaShop. For instance, here is how to display a gender (social title) selector:
| Code Block |
|---|
foreach (Gender::getGenders((int)Context::getContext()->language->id) as $gender)
{
$genders[] = array(
"id" => (int)$gender->id,
"name" => $gender->name,
);
} |
Check boxes
Here is how to generate a <input> of type "checkbox":
| Code Block |
|---|
array(
'name' => 'options',
'type' => 'checkbox',
'label' => $this->l('Options'),
'values' => array(
'query' => $options,
'id' => 'id_option',
'name' => 'name',
),
'desc' => $this->l('Choose options.')
), |
Just like selectors, check boxes take an array of arrays as the value of $options.
Radio buttons
Here is how to generate a <input> of type "radio":
| Code Block |
|---|
array(
'type' => 'radio',
'label' => $this->l('Enable this option'),
'name' => 'active',
'required' => true,
'class' => 't',
'is_bool' => true,
'values' => array(
array(
'id' => 'active_on',
'value' => 1,
'label' => $this->l('Enabled')
),
array(
'id' => 'active_off',
'value' => 0,
'label' => $this->l('Disabled')
)
),
'desc' => $this->l('Are you a customer too?')
), |
Note that you have to use the "t" CSS class to radio buttons.
Other HTML elements
The type variable of the element declaration makes it possible to generate just about any kind of HTML element: text, select, textarea, radio, checkbox, file. And the PrestaShop specific: shop, asso_shop, free, color.