我想在PrestaShop模块的配置页面上添加一个范围滑块。我试过用HelperForm类这样做，但我只是不能这样做，如果我写其他类型，例如'textarea'或'checkbox'，它工作得很好，即使不是真正的标准输入类型，如'color'，但'range'不起作用
<?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]));
}
}
?>
您必须扩展helper表单的视图。我会试着引导你:).
首先，你的模块必须被挂钩到这个钩子'displayBackOfficeHeader':
public function install(){
[...]
$this->registerHook('backOfficeHeader');
[...]
}
编辑你的代码，添加这行代码。
第二步，为钩子添加函数，并为滑块加载、查询和jquery ui
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数组的输入中添加一个'new'类型，比如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代码的速度，但如果我们想要尊重prestashhop mvc，我们必须用滑块初始化制作不同的js文件，太长时间无法解释XD。欢呼;)。
告诉我，如果我错过了什么:)。