Создание модуля с помощью Bootstrap

Опубликовано Опубликовано в рубрике prestashop, Руководство разработчика PrestaShop, Русская документация PrestaShop 1.6, Создание модулей PrestaShop

Создание модуля с помощью Bootstrap

Версия 1.6 PrestaShop предлагает совершенно новый дизайн для темы по умолчанию и самого программного обеспечения. Эти проекты технически основаны на структуре Bootstrap 3 CSS (http://getbootstrap.com/), что позволяет разработчикам полагаться на свои инструменты и шаблоны, чтобы создавать отличные и отзывчивые проекты.

Как разработчик модуля, вы должны стремиться разработать свой модуль, используя Bootstrap.

Это все есть в хелперах

Сама по себе это не сложно: большая часть работы обрабатывается методами хелпера PrestaShop, которые были обновлены для использования Bootstrap. Поэтому самая сложная часть для вас — это переделать код интерфейса вашего модуля, где вы определяли свои формы непосредственно в HTML, в новый вид, который стал доступен начиная с PrestaShop 1.5, и который делает методы Helpers более удобными.

До / после

Ниже приведен пример того, как ваш модуль может использовать структуру Bootstrap, используя методы хелпера PrestaShop. Этот пример взят из модуля blockcart и концентрируется на двух методах: getContent() (который PrestaShop вызывает, чтобы отобразить страницу конфигурации модуля), и displayForm() (который заменяется на renderForm()).

Вы можете увидеть разницу на Github:

Первый, getContent().

До
public function getContent()
{
    $output '<h2>'.$this->displayName.'</h2>';
    if (Tools::isSubmit('submitBlockCart'))
    {
        $ajax = Tools::getValue('cart_ajax');
        if ($ajax != 0 && $ajax != 1)
            $output .= '<div class="alert error">'.$this->l('Ajax : Invalid choice.').'</div>';
        else
            Configuration::updateValue('PS_BLOCK_CART_AJAX', (int)($ajax));
        $output .= '<div class="conf confirm">'.$this->l('Settings updated').'</div>';
    }
    return $output.$this->displayForm();
}
После
public function getContent()
{
    $output '';
    if (Tools::isSubmit('submitBlockCart'))
    {
        $ajax = Tools::getValue('cart_ajax');
        if ($ajax != 0 && $ajax != 1)
            $output .= $this->displayError($this->l('Ajax : Invalid choice.'));
        else
            Configuration::updateValue('PS_BLOCK_CART_AJAX', (int)($ajax));
        $output .= $this->displayConfirmation($this->l('Settings updated'));
    }
    return $output.$this->renderForm();
}

Изменения минимальны, самое главное, что мы больше не используем прямой HTML-код для вывода контента, а используем PrestaShop’s displayError() для сообщений об ошибках и displayConfirmation() сообщений об успехе. Больше нет необходимости включать displayName() на выходе, так как это учитывается методами PrestaShop.

Как вы видите, getContent() больше не требует вызова displayForm(), скорее renderForm(). Мы могли бы просто переписать код displayForm() для использования методов HelperForm, но изменение имени метода также помогает сделать шаг к новому способу создания форм с PrestaShop 1.5.

Давайте сначала напомним, что displayForm() выглядит как.

public function displayForm()
{
    return '
    <form action="'.Tools::safeOutput($_SERVER['REQUEST_URI']).'" method="post">
        <fieldset>
            <legend><img src="'.$this->_path.'logo.gif" alt="" title="" />'.$this->l('Settings').'</legend>
            <label>'.$this->l('Ajax cart').'</label>
            <div class="margin-form">
                <input type="radio" name="cart_ajax" id="ajax_on" value="1" '
                  .(Tools::getValue('cart_ajax', Configuration::get('PS_BLOCK_CART_AJAX')) ? 'checked="checked" ' '').'/>
                <label class="t" for="ajax_on"> <img src="../img/admin/enabled.gif" alt="'
                  .$this->l('Enabled').'" title="'.$this->l('Enabled').'" /></label>
                <input type="radio" name="cart_ajax" id="ajax_off" value="0" '
                  .(!Tools::getValue('cart_ajax', Configuration::get('PS_BLOCK_CART_AJAX')) ? 'checked="checked" ' '').'/>
                <label class="t" for="ajax_off"> <img src="../img/admin/disabled.gif" alt="'
                  .$this->l('Disabled').'" title="'.$this->l('Disabled').'" /></label>
                <p class="clear">'.$this->l('Activate AJAX mode for cart (compatible with the default theme)').'</p>
            </div>
            <center><input type="submit" name="submitBlockCart" value="'.$this->l('Save').'" class="button" /></center>
        </fieldset>
    </form>';
}

Теперь, вот renderForm() метод, который делает почти то же самое, что и displayFrom(), но в более чистом, портативном и отзывчивом виде. Вот как вы должны теперь делать формы.

Полную презентацию HelperForm см. На странице документации: http://doc.prestashop.com/display/PS15/HelperForm

public function renderForm()
{
    $fields_form array(
        'form' => array(
            'legend' => array(
                'title' => $this->l('Settings'),
                'icon' => 'icon-cogs'
            ),
            'input' => array(
                array(
                    'type' => 'switch',
                    'label' => $this->l('Ajax cart'),
                    'name' => 'PS_BLOCK_CART_AJAX',
                    'is_bool' => true,
                    'desc' => $this->l('Activate AJAX mode for cart (compatible with the default theme)'),
                    'values' => array(
                        array(
                            'id' => 'active_on',
                            'value' => 1,
                            'label' => $this->l('Enabled')
                        ),
                        array(
                            'id' => 'active_off',
                            'value' => 0,
                            'label' => $this->l('Disabled')
                        )
                    ),
                )
            ),
        'submit' => array(
            'title' => $this->l('Save'),
            'class' => 'btn btn-default pull-right')
        ),
    );
    
    $helper new HelperForm();
    $helper->show_toolbar = false;
    $helper->table = $this->table;
    $lang new Language((int)Configuration::get('PS_LANG_DEFAULT'));
    $helper->default_form_language = $lang->id;
    $helper->allow_employee_form_lang =
        Configuration::get('PS_BO_ALLOW_EMPLOYEE_FORM_LANG') ? Configuration::get('PS_BO_ALLOW_EMPLOYEE_FORM_LANG') : 0;
    $this->fields_form = array();
    $helper->identifier = $this->identifier;
    $helper->submit_action = 'submitBlockCart';
    $helper->currentIndex = $this->context->link->getAdminLink('AdminModules', false)
       .'&configure='.$this->name.'&tab_module='.$this->tab.'&module_name='.$this->name;
    $helper->token = Tools::getAdminTokenLite('AdminModules');
    $helper->tpl_vars = array(
        'fields_value' => $this->getConfigFieldsValues(),
        'languages' => $this->context->controller->getLanguages(),
        'id_language' => $this->context->language->id
    );
    return $helper->generateForm(array($fields_form));
}      

Важные детали

 ‘bootstrap’ переменные

Последнее, что нужно учесть: если ваш модуль использует загрузочный контроллер, вы должны добавить bootstrap переменную к методу конструктора модуля.

Действительно, помощники выполняют большую часть тяжелой работы, но пока вы не укажете, что используете Bootstrap, ваш контроллер будет окружен «классическими» классами CSS, тогда как одна строка позволяет PrestaShop использовать «загруженные» классы CSS:

public function __construct()
{
    $this->bootstrap = true;
    $this->display = 'view';
    $this->meta_title = $this->l('Your Merchant Expertise');
    parent::__construct();
}

Это ДОЛЖНО быть размещено в модуле __construct()  — если вы используете загрузочные контроллеры.

Если вы не используете загрузочный контроллер, PrestaShop обернет его определенным классом, который сделает все возможное, чтобы обработать контроллер как можно эффективнее, тем самым обеспечив определенный уровень обратной совместимости.

Ширина поля текста

Если вы хотите выбрать ширину текстовых полей, просто добавьте класс на вход, непосредственно в массив, описанный в вашем HelperForm.

Например:

array (
    'type' => 'text',
    'label' => $this->l('Field name'),
    'name' => 'field_name',
    'class' => 'fixed-width-xs',       // Add this line.
    'required' => true
),

В этом примере «xs» используется для выбора ширины поля.

Существует несколько доступных размеров:

  • xs: extra small.
  • sm: small.
  • md: medium.
  • lg: large.
  • xl: extra large.
  • xxl: extra extra large.