为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>

电商网站开发服务。