如何在PrestaShop模块后台让两个文本字段同行显示？

问题描述 #

需要在PrestaShop模块后台配置表单中，让comisionFija和comisionVariable两个文本字段并排显示（当前为上下排列），尝试给字段添加'class' => 'col-lg-6'但未生效，相关getConfigForm()函数代码如下：

protected function getConfigForm() {

    $campos = array(
        'form' => array(
            'legend' => array(
                'title' => $this->l('Settings'),
                'icon' => 'icon-cogs'
            ),
           
            'input' => array(
                array(
                    'type' => 'date',
                    'label' => $this->l('Desde'),
                    'name' => 'my_date_desde',
                    'required' => true,
                ),
                array(
                    'type' => 'date',
                    'label' => $this->l('Hasta'),
                    'name' => 'my_date_hasta',
                    'required' => true,
                ),
                array(
                    'type' => 'text',
                    'label' => $this->l('Comision fija'),
                    'name' => 'comisionFija',
                    'required' => true,
                    'class' => 'col-lg-6',
                ),
                array(
                    'type' => 'text',
                    'label' => $this->l('Comision variable'),
                    'name' => 'comisionVariable',
                    'required' => true,
                    'class' => 'col-lg-6',
                ),
            ),
            'buttons' => [
                [
                    'title' => $this->l('Calcular Iva'),
                    'name' => 'calcularIva',
                    'type' => 'submit',
                    'class' => 'btn btn-default pull-right',
                ],
                [
                    'title' => $this->l('Exportar a Excel'),
                    'name' => 'exportarExcel',
                    'type' => 'submit',
                    'class' => 'btn btn-default pull-right',
                ],
            ],
            
        ),
    );

    $db = \Db::getInstance();
    $sqlTipos = "select tax_name,tax_rate from order_detail group by tax_rate";
    $tipos = $db->executeS($sqlTipos);
    foreach ($tipos as $t) {
        $miCampo = array(
            'type' => 'text',
            'label' => $this->l($t['tax_name']),
            'name' => str_replace(" ", "", str_replace("%", '', $t['tax_name'])),
        );
        array_push($campos['form']['input'], $miCampo);
    }

    return $campos;
}

解决方案 #

方法1：使用PrestaShop内置分组输入（推荐） #

PrestaShop的HelperForm支持将多个字段放入group类型输入中，通过设置容器类实现并排：

修改input数组中两个佣金字段的配置：

array(
    'type' => 'group',
    'label' => $this->l('Comisiones'),
    'name' => 'comisiones_group',
    'form_group_class' => 'row',
    'fields' => array(
        'comisionFija' => array(
            'type' => 'text',
            'label' => $this->l('Comision fija'),
            'name' => 'comisionFija',
            'required' => true,
            'class' => 'col-lg-6',
        ),
        'comisionVariable' => array(
            'type' => 'text',
            'label' => $this->l('Comision variable'),
            'name' => 'comisionVariable',
            'required' => true,
            'class' => 'col-lg-6',
        ),
    ),
),

方法2：自定义CSS样式 #

通过后台钩子注入CSS，强制字段容器并排：

在模块中添加以下钩子方法：

public function hookDisplayBackOfficeHeader()
{
    if (Tools::getValue('controller') === 'AdminModules' && Tools::getValue('configure') === 'your_module_name') {
        $css = '
        .form-group:nth-of-type(3), .form-group:nth-of-type(4) {
            display: inline-block;
            width: 48%;
            margin-right: 2%;
            vertical-align: top;
        }
        ';
        $this->context->controller->addCSS($css, 'inline');
    }
}

注意替换your_module_name为你的模块实际名称。

方法3：修正字段容器类 #

直接给字段的容器添加类，而非输入框本身：

array(
    'type' => 'text',
    'label' => $this->l('Comision fija'),
    'name' => 'comisionFija',
    'required' => true,
    'wrapper_class' => 'col-lg-6',
),
array(
    'type' => 'text',
    'label' => $this->l('Comision variable'),
    'name' => 'comisionVariable',
    'required' => true,
    'wrapper_class' => 'col-lg-6',
),

同时需要在这两个字段的父容器添加row类，可通过将它们放入group实现（同方法1）。

内容的提问来源于stack exchange，提问作者raposo