...
Text input
Here is how to generate an a basic <input> element:
| Code Block | ||
|---|---|---|
| ||
array( 'type' => 'text', // This is a regular <input> tag. 'label' => $this->l('Name'), 'type' => 'text', // The <label> for this <input> tag. 'name' => 'name', // The content of the 'id' attribute of the <input> tag. 'size' => 50, // The content of the 'size' attribute of the <input> tag. 'required' => true, // If set to true, this option must be set. 'desc' => $this->l('Please enter your name.') // A help text, displayed right next to the <input> tag. ), |
Selector
Here is how to generate a <select> element:
| Code Block | ||
|---|---|---|
| ||
array( 'type' => 'select', // This is a <select> tag. 'label' => $this->l('Shipping method:'), // The <label> for this <select> tag. 'desc' => $this->l('Choose a shipping method'), // A help text, displayed right next to the <select> tag. 'name' => 'shipping_method', // The content of the 'id' attribute of the <select> tag. 'required' => true, // If set to true, this option must be set. 'options' => array( 'query' => $options, // $options contains the data itself. 'id' => 'id_option', // The value of the 'id' key must be the same as the key for 'value' attribute of the <option> tag in each $options sub-array. 'name' => 'name' // The value of the 'name' key must be the same as the key for the text content of the <option> tag in each $options sub-array. ) ), |
The content of the selector is stored in the $options variable, which is an array of arrays. It must contain two keys: id and name.
$options can take this value:
| Code Block | ||
|---|---|---|
| ||
$options = array( array( 'id_option' => 1, // The value of the 'value' attribute of the <option> tag. 'name' => 'Method 1' // The value of the text content of the <option> tag. ), array( 'id_option' => 2, 'name' => 'Method 2' ), ); |
...but of course, you would be better off 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 | ||
|---|---|---|
| ||
$options = array(); foreach (Gender::getGenders((int)Context::getContext()->language->id) as $gender) { $genders$options[] = array( "id" => (int)$gender->id, "name" => $gender->name ); } |
...
Checkbox
Here is how to generate a <input> of type "checkbox":
| Code Block | ||
|---|---|---|
| ||
array( 'nametype' => 'optionscheckbox', 'type' // This is an <input type="checkbox"> tag. 'label' => $this->l('checkboxOptions'), 'label // The <label> for this <input> tag. 'desc' => $this->l('OptionsChoose options.'), // A help text, displayed right next to the <input> tag. 'name' => 'options', // The content of the 'id' attribute of the <input> tag. 'values' => array( 'query' => $options, // $options contains the data itself. 'id' => 'id_option', // The value of the 'id' key must be the same as the key for 'value' attribute of the <option> tag in each $options sub-array. 'name' => 'name', ), 'desc' => $this->l('Choose options.') // The value of the 'name' key must be the same as the key for the text content of the <option> tag in each $options sub-array. ), ), |
Just as for a selector input, check boxes take an array of arrays as the value of $options.
Radio
...
button
Here is how to generate a <input> of type "radio":
| Code Block | ||
|---|---|---|
| ||
array( 'type' => 'radio', // This is an <input type="checkbox"> tag. 'label' => $this->l('Enable this option'), // The <label> for this <input> tag. 'desc' => $this->l('Are you a customer too?'), // A help text, displayed right next to the <input> tag. 'name' => 'active', // The content of the 'id' attribute of the <input> tag. 'required' => true, // If set to true, this option must be set. 'class' => 't', // The content of the 'class' attribute of the <label> tag for the <input> tag. 'is_bool' => true, // If set to true, this means you want to display a yes/no or true/false option. // The CSS styling will therefore use green mark for the option value '1', and a red mark for value '2'. // If set to false, this means there can be more than two radio buttons, // and the option label text will be displayed instead of marks. 'values' => array( // $values contains the data itself. array( 'id' => 'active_on', // The content of the 'id' attribute of the <input> tag, and of the 'for' attribute for the <label> tag. 'value' => 1, // The content of the 'value' attribute of the <input> tag. 'label' => $this->l('Enabled') // The <label> for this radio button. ), 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 on your radio buttons labels in order to have the proper styling (but you can redefine that class using the "class" variable).
...
The type variable of the element declaration makes it possible to generate just about any kind of <input> element: text, select, textarea, radio, checkbox, file and many others! See the list of available types here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
You can also use some PrestaShop specific: shop, asso_shop, free, color. Try them out!