如何將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的時間太長。 乾杯;）。

告訴我，如果我錯過了什麼:)。