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 Making your module work with Bootstrap -

Making your module work with Bootstrap -

Making your module work with Bootstrap

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.

It's all = in the helpers

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.

Before / after

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().

Before
=20
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
After
=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 displayError() for error messages and 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.

=20
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

=20
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

Important de= tails

The 'b= ootstrap' variable

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:

=20
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.

Text field wid= th

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:

=20
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:

------=_Part_379287_1534567603.1711716031521--