duan1396
2016-08-21 16:03
浏览 57
已采纳

如何将jquery ui滑块添加到PrestaShop模块表单

I want to add a range slider on configuration page of my PrestaShop module. I've tried to do this using HelperForm class, but I just can't do this, if I write other type, for example 'textarea' or 'checkbox', it works fine, even with not really standard input types like 'color', but 'range' doesn't work

<?php
if (!defined('_PS_VERSION_'))
    exit;

class icropper extends Module
{
    public function __construct()
    {
        $this->name = 'icropper';
        $this->tab = 'front_office_features';
        $this->version = '1.0';
        $this->author = 'AppDev';
        $this->need_instance = 1;
        $this->ps_versions_compliancy = array('min' => '1.5', 'max' => _PS_VERSION_);

        parent::__construct();

        $this->displayName = $this->l('icropper');
        $this->description = $this->l('Module for Cropping Images');

        $this->confirmUninstall = $this->l('Are you sure you want to uninstall?');

        if (!Configuration::get('MYMODULE_NAME'))
            $this->warning = $this->l('No name provided');
    }

    public function install()
    {
        $filename = _PS_ROOT_DIR_.'/override/cropp.php';
        $ext = get_loaded_extensions();
        foreach($ext as $i)
        {
            if($i == "imagick") {
                $imgck = $i;
                break;
            }
        }
        if (!parent::install()) {
            return false;
        } elseif (!$imgck) {
            $this->context->controller->errors[] = $this->l('In your server does not installed Imagick library');
            return false;
        } elseif(file_exists($filename)) {
            $this->context->controller->errors[] = $this->l('File that override cropping 
            already exist, please delete it and replace file by yourself');
            return false;
        }else {
            //copy(__DIR__ . '/override/list_footer.tpl', _PS_ROOT_DIR_ . '/override/helpers/admin/templates/list');
        return true;
        }

    }

    public function uninstall()
    {
        if (!parent::uninstall())
            return false;
        return true;
    }

    public function getContent()
    {
        return $this->DisplayForm();
    }

    public function displayForm(){
        $fields_formm[0] = array(
            'form' => array(
                'legend' => array(
                    'title' => $this->l('Header'),
                    'icon' => 'icon-file-text'
                ),
                'input' => array(
                    array(
                        'type' => '',
                        'name'=> 'vania',
                        'min'=>0,
                        'max'=>100,
                        'step'=>1
                    ),
                    'submit' => array(
                        'title' => $this->l('Generate')
                    )

                )
            )
        );

        $helper = new HelperForm();
        $helper->show_toolbar = false;
        $helper->table = $this->table;
        $lang = new Language((int)Configuration::get('PS_LANG_DEFAULT'));
        $helper->default_form_language = 1;


        $this->fields_formm = array();
        $helper->submit_action = 'submitform';
        return $helper->generateForm(array($fields_formm[0]));
    }
}
?>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doume1301 2016-08-23 11:12
    已采纳

    You have to extends the view of the helper form. I will try to guide you :).

    First, your module had to be hooked on this hook 'displayBackOfficeHeader':

    public function install(){
        [...]
        $this->registerHook('backOfficeHeader');
        [...]
    }
    

    So edit your code to add this line of code.

    Second step, add the function for the hook, and load, query and jquery ui for the slider

    public function hookBackOfficeHeader($params){
        if ( Tools::getValue('module_name') == $this->name OR Tools::getValue('configure') == $this->name ) {
            $this->context->controller->addJquery();
            $this->context->controller->addJqueryUI('ui.slider');
        }
    }
    

    Third step, add a 'new' type to your input in the fields_form array, like rangeslider, and I'll suggest you to use this corrected lines of codes:

    public function displayForm(){
        $fields_form = array(
            'form' => array(
                'legend' => array(
                    'title' => $this->l('Header'),
                    'icon' => 'icon-file-text'
                ),
                'input' => array(
                    array(
                        'type' => 'rangeslider',
                        'name'=> 'vania',
                        'label' => $this->l('Select range'),
                        'min'=>0,
                        'max'=>100,
                        'step'=>1
                    ),
                ),
                'submit' => array(
                    'title' => $this->l('Generate')
                )
            )
        );
    
        $helper = new HelperForm();
        $helper->show_toolbar = false;
        $lang = new Language((int)Configuration::get('PS_LANG_DEFAULT'));
        $helper->module                   = $this;
        $helper->default_form_language    = $this->context->language->id;
    
        $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->submit_action = 'submitform';
        return $helper->generateForm(array($fields_form));
    }
    

    Fourth step, add a file name form.tpl in this directory: icropper/views/templates/admin/_configure/helpers/form/form.tpl

    with this content:

    {extends file="helpers/form/form.tpl"}
    {block name="field"}
        {if $input.type == 'rangeslider'}
            <div class="col-lg-9">
                <div id="slider-range"></div>
                <p>
                    <label for="amount">Price range:</label>
                    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
                </p>
            </div>
            <script type="text/javascript">
            {literal}
                $( function() {
                    $( "#slider-range" ).slider({
                         range: true,
                         min: {/literal}{$input.min|intval}{literal},
                         max: {/literal}{$input.max|intval}{literal},
                         step: {/literal}{$input.step|intval}{literal},
                         slide: function( event, ui ) {
                             $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                         }
                    });
                    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
                        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
                });
            {/literal}
            </script>
        {else}
            {$smarty.block.parent}
        {/if}
    {/block}
    

    Here you are, this is the way to add your range slider to the form (or other input types ), by the way, in this case I have merged smarty and javascript code for quickness, but if we want to respect the prestashop mvc we have to made a different js files with slider initialization, too long to explain XD. Cheers ;).

    Tell me if I've missed something :).

    打赏 评论

相关推荐 更多相似问题