你也许注意到了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>(责任编辑:好模板) |


magento通用外贸商城主题模
人气:292
dedecms汽车公司黑简模板
人气:696
shopex家天下模板
人气:1661
shopex手机数码商城模板
人气:870
仿2011麦包包ecshop模板
人气:1022
Prestashop外贸数码电子商城
人气:263