Message-ID: <1432551880.379288.1711716031526.JavaMail.root@confluence-doc2-production> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_379287_1534567603.1711716031521" ------=_Part_379287_1534567603.1711716031521 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
Version 1.6 of PrestaShop brings a whole new design to the default theme= and the software itself. These designs are technically based on the Bootst= rap 3 CSS framework (http://getbootstrap.com/), which enables design= ers and developers to rely on its tools and templates in order to create gr= eat and responsive designs.
As a module developer, you should strive to update your module to use Bo= otstrap, so that they integrate will into the new design.
In itself, it is not complicated: most of the work is handled by PrestaS= hop's Helper methods, which have been upgrade to use Bootstrap the way it s= hould be. Therefore, the hardest part for you is to move your module's inte= rface code from the old way, where you defined your forms directly in HTML,= into the new way that was introduced with PrestaShop 1.5, and which makes = the Helpers methods do the heavy lifting.
Here is an example of how your module can make use of the Bootstrap fram=
ework, through PrestaShop's Helper methods. This example is taken from the =
blockcart module, and concentrates on two methods: getContent()
(which PrestaShop calls in order to display the module's configuration pa=
ge), and displayForm()
(which is replaced by renderForm(=
)
).
You can see the difference right on Github:
First, getContent()
.
public f= unction getContent() { =09$output =3D '<h2>'.$this->displayName.'</h2>'; =09if (Tools::isSubmit('submitBlockCart')) =09{ =09=09$ajax =3D Tools::getValue('cart_ajax'); =09=09if ($ajax !=3D 0 && $ajax !=3D 1) =09=09=09$output .=3D '<div class=3D"alert error">'.$this->l('Ajax= : Invalid choice.').'</div>'; =09=09else =09=09=09Configuration::updateValue('PS_BLOCK_CART_AJAX', (int)($ajax)); =09=09$output .=3D '<div class=3D"conf confirm">'.$this->l('Settin= gs updated').'</div>'; =09} =09return $output.$this->displayForm(); }=20
public f= unction getContent() { =09$output =3D ''; =09if (Tools::isSubmit('submitBlockCart')) =09{ =09=09$ajax =3D Tools::getValue('cart_ajax'); =09=09if ($ajax !=3D 0 && $ajax !=3D 1) =09=09=09$output .=3D $this->displayError($this->l('Ajax : Invalid ch= oice.')); =09=09else =09=09=09Configuration::updateValue('PS_BLOCK_CART_AJAX', (int)($ajax)); =09=09$output .=3D $this->displayConfirmation($this->l('Settings upda= ted')); =09} =09return $output.$this->renderForm(); }=20
The changes are minimal, the most important one being that we do not use=
direct HTML code anymore to output content, but rather use PrestaShop's displayConfirmation(=
)
for success messages. It is no longer necessary to include d=
isplayName()
in the output since this it taken into account by Prest=
aShop methods.
As you can see, getContent()
no longer calls on displ=
ayForm()
, but rather renderForm()
. We could simply rewr=
ite displayForm()
's code to use the HelperForm methods, but ch=
anging the name of the method too helps to make the step to the new way of =
building forms since PrestaShop 1.5.
Let's first get a reminder of what displayForm()
looked lik=
e.
public f= unction displayForm() { =09return ' =09<form action=3D"'.Tools::safeOutput($_SERVER['REQUEST_URI']).'" metho= d=3D"post"> =09=09<fieldset> =09=09=09<legend><img src=3D"'.$this->_path.'logo.gif" alt=3D""= title=3D"" />'.$this->l('Settings').'</legend> =09=09=09<label>'.$this->l('Ajax cart').'</label> =09=09=09<div class=3D"margin-form"> =09=09=09=09<input type=3D"radio" name=3D"cart_ajax" id=3D"ajax_on" valu= e=3D"1" ' .(Tools::getValue('cart_ajax', Configuration::get('PS_BLO= CK_CART_AJAX')) ? 'checked=3D"checked" ' : '').'/> =09=09=09=09<label class=3D"t" for=3D"ajax_on"> <img src=3D"../img= /admin/enabled.gif" alt=3D"' .$this->l('Enabled').'" title=3D"'.$this->l('Enable= d').'" /></label> =09=09=09=09<input type=3D"radio" name=3D"cart_ajax" id=3D"ajax_off" val= ue=3D"0" ' .(!Tools::getValue('cart_ajax', Configuration::get('PS_BL= OCK_CART_AJAX')) ? 'checked=3D"checked" ' : '').'/> =09=09=09=09<label class=3D"t" for=3D"ajax_off"> <img src=3D"../im= g/admin/disabled.gif" alt=3D"' .$this->l('Disabled').'" title=3D"'.$this->l('Disab= led').'" /></label> =09=09=09=09<p class=3D"clear">'.$this->l('Activate AJAX mode for = cart (compatible with the default theme)').'</p> =09=09=09</div> =09=09=09<center><input type=3D"submit" name=3D"submitBlockCart" v= alue=3D"'.$this->l('Save').'" class=3D"button" /></center> =09=09</fieldset> =09</form>'; }=20
Now, here is the renderForm()
method, which makes pretty mu=
ch the same thing as displayFrom()
, but in a cleaner, more por=
table and now responsive way. This is how you should build forms from now o=
n.
For a complete presentation of HelperForm, see this documentation page: = http://doc.prestashop.com/display/PS15/HelperFo= rm
public f= unction renderForm() { =09$fields_form =3D array( =09=09'form' =3D> array( =09=09=09'legend' =3D> array( =09=09=09=09'title' =3D> $this->l('Settings'), =09=09=09=09'icon' =3D> 'icon-cogs' =09=09=09), =09=09=09'input' =3D> array( =09=09=09=09array( =09=09=09=09=09'type' =3D> 'switch', =09=09=09=09=09'label' =3D> $this->l('Ajax cart'), =09=09=09=09=09'name' =3D> 'PS_BLOCK_CART_AJAX', =09=09=09=09=09'is_bool' =3D> true, =09=09=09=09=09'desc' =3D> $this->l('Activate AJAX mode for cart (com= patible with the default theme)'), =09=09=09=09=09'values' =3D> array( =09=09=09=09=09=09array( =09=09=09=09=09=09=09'id' =3D> 'active_on', =09=09=09=09=09=09=09'value' =3D> 1, =09=09=09=09=09=09=09'label' =3D> $this->l('Enabled') =09=09=09=09=09=09), =09=09=09=09=09=09array( =09=09=09=09=09=09=09'id' =3D> 'active_off', =09=09=09=09=09=09=09'value' =3D> 0, =09=09=09=09=09=09=09'label' =3D> $this->l('Disabled') =09=09=09=09=09=09) =09=09=09=09=09), =09=09=09=09) =09=09=09), =09=09'submit' =3D> array( =09=09=09'title' =3D> $this->l('Save'), =09=09=09'class' =3D> 'btn btn-default pull-right') =09=09), =09); =09 =09$helper =3D new HelperForm(); =09$helper->show_toolbar =3D false; =09$helper->table =3D $this->table; =09$lang =3D new Language((int)Configuration::get('PS_LANG_DEFAULT')); =09$helper->default_form_language =3D $lang->id; =09$helper->allow_employee_form_lang =3D=20 Configuration::get('PS_BO_ALLOW_EMPLOYEE_FORM_LANG') ? Configuratio= n::get('PS_BO_ALLOW_EMPLOYEE_FORM_LANG') : 0; =09$this->fields_form =3D array(); =09$helper->identifier =3D $this->identifier; =09$helper->submit_action =3D 'submitBlockCart'; =09$helper->currentIndex =3D $this->context->link->getAdminLink= ('AdminModules', false) .'&configure=3D'.$this->name.'&tab_module=3D'.$this->t= ab.'&module_name=3D'.$this->name; =09$helper->token =3D Tools::getAdminTokenLite('AdminModules'); =09$helper->tpl_vars =3D array( =09=09'fields_value' =3D> $this->getConfigFieldsValues(), =09=09'languages' =3D> $this->context->controller->getLanguages= (), =09=09'id_language' =3D> $this->context->language->id =09); =09return $helper->generateForm(array($fields_form)); }=09=09=20
One last thing to watch out for: if your module uses a bootstrapped cont=
roller, you must add the bootstrap
variable to the module's co=
nstructor method.
Indeed, helpers do most of the hard work, but as long as you do not indi= cate that you are using Bootstrap, your controller will be surrounded by "c= lassic" CSS classes, whereas a single line makes PrestaShop use the "bootst= rapped" CSS classes:
public f= unction __construct() { =09$this->bootstrap =3D true; =09$this->display =3D 'view'; =09$this->meta_title =3D $this->l('Your Merchant Expertise'); =09parent::__construct(); }=20
This MUST be placed in your module's __construct()
method t=
o work =E2=80=93 if you use bootstrapped controllers.
If you are not use a bootstrapped controller, then PrestaShop will wrap = it with a specific class, which will do its best to handle the controller a= s effectively as possible, thus ensuring a certain level of retrocompatibil= ity.
If you want to choose the width of your text fields, just add a class on= the input, directly in the array described in your HelperForm.
For instance:
array ( =09'type' =3D> 'text', =09'label' =3D> $this->l('Field name'), =09'name' =3D> 'field_name', =09'class' =3D> 'fixed-width-xs', // Add this line. =09'required' =3D> true ),=20
In this example, "xs" is used to choose the width of the field.
There are several available sizes you can use: