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

Question

我想在我的PrestaShop模块的配置页面上添加范围滑块。我试图用HelperForm类来做到这一点，但我不能做到这一点，如果我写了其他类型，例如'textarea'或'checkbox'，它可以正常工作，即使没有真正的标准输入类型，如'颜色'，但'范围'不起作用

<?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])); 
    } 
} 
?> 

Answer 1

您必须扩展辅助窗体的视图。我会尽力引导你:)。

首先，你的模块对这个钩子“displayBackOfficeHeader”而钩：

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

所以编辑您的代码中加入这行代码。

第二步骤中，添加函数的钩，和负载，查询和jQuery的用户界面用于滑块

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'); 
    } 
} 

第三步骤中，fields_form阵列中的“新”类型添加到你的输入，像rangeslider ，我会建议你使用这段代码更正行：

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)); 
} 

第四步，在这个目录中添加一个文件名form.tpl： icropper/views/templates/admin/_configure/helpers/form/form.tpl

与此内容：

{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} 

给你，这是你的范围滑块添加到窗体（或其他输入类型），顺便顺便说一下，在这种情况下，我已经合并智者和javascript代码快速，但如果我们想尊重prestashop mvc，我们必须使用滑块初始化制作一个不同的js文件，但解释XD的时间太长。 干杯;）。

告诉我，如果我错过了什么:)。