Cómo agregar un control deslizante jquery ui a un módulo de PrestaShop

Quiero agregar un control deslizante de rango en la página de configuración de mi módulo PrestaShop. Intenté hacer esto usando la clase HelperForm, pero simplemente no puedo hacer esto, si escribo otro tipo, por ejemplo ‘textarea’ o ‘checkbox’, funciona bien, incluso con tipos de entrada no realmente estándar como ‘color ‘, pero’ rango ‘no funciona

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

Tienes que extender la vista de la forma de ayuda. Trataré de guiarte :).

Primero, tu módulo debe estar enganchado en este enganche ‘displayBackOfficeHeader’:

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

Edite su código para agregar esta línea de código.

Segundo paso, agrega la función para el gancho y carga, consulta y jquery ui para el control deslizante

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

Tercer paso, agregue un tipo “nuevo” a su entrada en la matriz fields_form, como rangeslider , y le sugiero que use estas líneas corregidas de códigos:

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

Cuarto paso, agrega un nombre de archivo form.tpl en este directorio: icropper/views/templates/admin/_configure/helpers/form/form.tpl

con este contenido:

 {extends file="helpers/form/form.tpl"} {block name="field"} {if $input.type == 'rangeslider'} 

{else} {$smarty.block.parent} {/if} {/block}

Aquí está, esta es la forma de agregar su control deslizante de rango al formulario (u otros tipos de entrada), por cierto, en este caso he fusionado código inteligente y javascript para rapidez, pero si queremos respetar el prestashop mvc tenemos tiene que hacer un archivo js diferente con la inicialización del control deslizante, demasiado tiempo para explicar XD. Saludos;).

Dime si me he perdido algo :).

Intereting Posts