西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > magento教程 >

为Magento数量框添加“+”,“-”功能

时间:2017-01-05 01:26来源:未知 作者:好模板 点击:
你也许注意到了Magento的数量输入只是普通的输入框,当你想要修改它的值时必须先手动删除现有值,然后输入新的值。今天我将展示添加加号和减号来修改数量。感兴趣的话就继续往下

你也许注意到了Magento的数量输入只是普通的输入框,当你想要修改它的值时必须先手动删除现有值,然后输入新的值。今天我将展示添加加号和减号来修改数量。感兴趣的话就继续往下阅读吧。

这是一项非常简单的工作,但又与Magento中的其它东西不一样,它需要些时间(我花了2小时测试)。我所做的就是创建一个连接JavaScript的插件。我动态地创建了div元素并用包含“+”和“-”号的段落标签来填充。

负责执行的代码是这样的:

var parentTD;
	var newDiv;
	var navigationDiv;
	var i = 1;
	var currentElement = null;
 
	$$('input.qty').each(function(el){
		parentTD = el.parentNode;
 
		newDiv = document.createElement('div');
		Element.extend(newDiv);
		newDiv.id = i++;
		newDiv.update(parentTD.innerHTML).innerHTML; //set new input inside new div
		parentTD.update().innerHTML; //erase old input
		parentTD.appendChild(newDiv); //show new div
 
		navigationDiv = document.createElement('div');
		Element.extend(navigationDiv);
		navigationDiv.update('<p class="up">+</p><p class="dn">-</p>').innerHTML;
		newDiv.appendChild(navigationDiv);
	});
 
	$$('p.up').each(function(el){
		el.observe('click',function(event){
			currentElement = el.parentNode.previous();
			i = 0; //In case we get in to infinite loop
			while(currentElement.type != 'text' && i < 5){
				currentElement = currentElement.previous();
				i++;
			}
			currentElement.value = parseInt(currentElement.value) + 1;
		});
	});
 
	$$('p.dn').each(function(el){
		el.observe('click',function(event){
			currentElement = el.parentNode.previous();
			i = 0; //In case we get in to infinite loop
			while(currentElement.type != 'text' && i < 5){
				currentElement = currentElement.previous();
				i++;
			}
			if(parseInt(currentElement.value) > 0){
				currentElement.value = parseInt(currentElement.value) - 1;
			}
		});
	});

为安全起见,请先做好备份。执行之后是没有样式的,但是你可以随时添加一些CSS样式。生成的HTML结构大概是这样的:

<div id="1">
	<label for="qty">
		Qty:
	</label>
	<input name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" type="text">
	<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)">
		<span>
			<span>
				Add to Cart
			</span>
		</span>
	</button>
	<div>
		<p class="up">
			+
		</p>
		<p class="dn">
			-
		</p>
	</div>
</div>
(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容