Как добавить слайдер jquery ui в форму модуля PrestaShop

Question

Как добавить слайдер jquery ui в форму модуля PrestaShop

Я хочу добавить ползунок диапазона на странице конфигурации моего модуля PrestaShop. Я пытался сделать это с помощью класса HelperForm, но я просто не могу этого сделать, если я напишу другой тип, например, ‘textarea’ или ‘checkbox’, он отлично работает, даже с не совсем стандартными типами ввода, такими как ‘color ‘, но «диапазон» не работает

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

0

jquery-ui-slider module php prestashop smarty

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы должны расширить вид вспомогательной формы. Я постараюсь наставить вас :).

Во-первых, ваш модуль должен быть подключен к этому обработчику 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}

Вот, пожалуйста, это способ добавить ползунок диапазона к форме (или другим типам ввода), кстати, в этом случае я объединил код smarty и javascript для быстроты, но если мы хотим уважать prestashop mvc, мы пришлось сделать разные js-файлы с инициализацией слайдера, слишком долго, чтобы объяснить XD.
Ура;).

Скажи мне, если я что-то пропустил :).

3