Magento | 使用數量增量並將ajax添加到類別頁面和產品視圖上的購物車

Question

這是場景：

我正在使用ajax添加到購物車擴展來將產品添加到購物車而無需刷新頁面。

而且我已經修改了list.phtml文件，使其具有一些數量增加功能，該功能增加了“ +”和“-”加號和減號按鈕輸入。 （來源： http ： //jigowatt.co.uk/blog/magento-quantity-increments-jquery-edition/ ）。

通過兩個不同的觀察結果解釋了該問題：

1st /如果我通過單擊+按鈕輸入來增加數量，則數量正確更改，因為我在輸入框中看到值更改，但是隨后我單擊了添加到購物車按鈕，並且僅添加了1種產品。 無論我單擊+按鈕獲取所需數量的次數，添加到購物車的數量始終為1。

2nd /如果我在數量框中手動輸入所需的數量編號，例如5，沒問題：購物車會刷新5件商品。

因此，基本上，僅當單擊增量按鈕+時，才添加項目數，而僅添加一項。

這是添加增量功能並添加+和-按鈕的代碼：

jQuery("div.quantity").append('<input type="button" value="+" id="add1"    class="plus" />').prepend('<input type="button" value="-" id="minus1" class="minus" />');
jQuery(".plus").click(function()
{
var currentVal = parseInt(jQuery(this).prev(".qty").val());

if (!currentVal || currentVal=="" || currentVal == "NaN") currentVal = 0;

jQuery(this).prev(".qty").val(currentVal + 1);
});

jQuery(".minus").click(function()
{
var currentVal = parseInt(jQuery(this).next(".qty").val());
if (currentVal == "NaN") currentVal = 0;
if (currentVal > 0)
{
jQuery(this).next(".qty").val(currentVal - 1);
}
});

現在，要使ajax添加到購物車按鈕與list.phtml上的數量輸入框一起使用，必須進行一些修改（來源： http : //forum.aheadworks.com/viewtopic.php? f=33&t=601）

必須替換的原始代碼是：

<!-- Find this block of code: -->
<?php if($_product->isSaleable()): ?>
<button type="button" class="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<?php else: ?>

如上面發布的論壇鏈接所述，必須用下面的代碼替換它：

<!-- And replace it with this block of code: -->
<?php if($_product->isSaleable()): ?>
<script type="text/javascript">
function setQty(id, url) {
var qty = document.getElementById('qty_' + id).value;
document.getElementById('cart_button_' + id).innerHTML = '<button type="button" class="button" onclick="setLocation(\'' + url + 'qty/' + qty + '/\')"><span><span>Add to Cart</span></span></button>';   
}
</script>
<label for="qty"><?php echo $this->__('Qty:') ?></label>
<input type="text" name="qty_<?php echo $_product->getId(); ?>" id="qty_<?php echo $_product->getId(); ?>" maxlength="12" value="1" onkeyup="setQty(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
<span id="cart_button_<?php echo $_product->getId(); ?>"><button type="button" class="button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></span> 
<?php else: ?>

我不知道為什么添加到購物車的數量只有在手動輸入值時才正確。 使用+（加號）或-（減號）按鈕時，我還需要將正確的數量添加到購物車。 出於某種原因，數量在輸入框中發生變化，但是此值不是單擊添加到購物車后的購物車中的值（總是將1個產品添加到購物車）。

是什么引起此問題？ 解決該問題的解決方案是什么？ 我整個下午都在努力嘗試，希望能了解並解決此問題。 非常感謝。

Answer 1

打算將其作為注釋，但需要對其進行格式化以方便查看

我建議您在Google Chrome瀏覽器中打開頁面，然后使用開發人員工具執行以下操作：

1. 使用“ 腳本”面板單步執行jQuery代碼-然后可以確保該代碼正確設置了數量。

2. 檢查通過Ajax發出的請求是否正確。 您可以通過查看“ 網絡”面板 ，識別Ajax調用並檢查輸入到控制器的qty值是否正確來完成此操作。

就我個人而言，我將檢查+（加號）和-（減號）按鈕是否觸發了setQty函數，或者至少要檢查setQty函數與加號和減號按鈕的功能相同。

從您發布的代碼來看，似乎在setQty函數中的此行需要加號和減號代碼

document.getElementById('cart_button_' + id).innerHTML = '<button type="button" class="button" onclick="setLocation(\'' + url + 'qty/' + qty + '/\')"><span><span>Add to Cart</span></span></button>'; 

Answer 2

1. 從輸入標簽剪切setQty函數。
2. 將其粘貼到“ 添加到購物車按鈕”標簽中，而不是setLocation函數
3. 使用onmousedown事件“ 添加到購物車按鈕”標簽。

4. 在腳本中使用onmouseup事件完全，代碼看起來像

     <?php if($_product->isSaleable()): ?> <script type="text/javascript"> function setQty(id, url) { var qty = document.getElementById('qty_' + id).value; document.getElementById('cart_button_' + id).innerHTML = '<button type="button" class="button" onmouseup="setLocation(\\'' + url + 'qty/' + qty + '/\\')"><span><span>Add to Cart</span></span></button>'; } </script> <label for="qty"><?php echo $this->__('Qty:') ?></label> <a class="decrement_qty" href="javascript:void(0)"> &nbsp - &nbsp</a> <input type="text" name="qty_<?php echo $_product->getId(); ?>" id="qty_<?php echo $_product->getId(); ?>" maxlength="12" value="1" title="<?php echo $this->__('Qty') ?>" class="input-text qty" /> <a class="increment_qty" href="javascript:void(0)"> &nbsp + &nbsp</a> <span id="cart_button_<?php echo $_product->getId(); ?>"> <button type="button" class="button" onmousedown="setQty(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product) ?>');"> <span><span><?php echo $this->__('Add to Cart') ?></span></span> </button> </span> <?php else: ?> <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p> <?php endif; ?> 

5. 單擊錨標記時，使用以下腳本來遞增和遞減值

    <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.increment_qty').click(function() { var oldVal = jQuery(this).parent().find("input").val(); if ( parseFloat(oldVal) >= 1 ) { var newVal = parseFloat(oldVal) + 1; jQuery(this).parent().find("input").val(newVal); } }); jQuery('.decrement_qty').click(function() { var oldVal = jQuery(this).parent().find("input").val(); if ( parseFloat(oldVal) >= 2 ) { var newVal = parseFloat(oldVal) - 1; jQuery(this).parent().find("input").val(newVal); } }); }); </script>