2017-09-04 99 views
0

我有一些按钮可以添加和删除Magento购物车中的产品,但这不是那么相关。我想要做的是改变他们在做什么的逻辑。目前,当点击购买按钮时,产品被添加到购物车中,该按钮被“改变”以将其移除并且所有其他按钮被禁用以进行点击。当点击删除按钮时,删除了添加的产品,并可以再次点击所有其他按钮。更改逻辑 - jQuery

我想改变逻辑如下:当点击购买按钮时,产品被添加到购物车,并且购买按钮被“改变”以移除(到目前为止所有东西都是一样的)。但是,所有按钮保持点击启用状态,如果点击任何其他购买按钮,则删除添加的产品并添加新产品。

我已经在很多方面进行了研究和思考,但我找不到一种方法来做到这一点。

按钮代码:

<button type="button" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>" class="button btn-cart" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button> 
<button style="display: none;" type="button" id="cartaoMensagemRemover<?php echo $_product->getId(); ?>" title="Remover" class="button btn-cart" onclick="removeCartaotoCart('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Remover</span></span></button> 

阿贾克斯征用代码:

function addCartao(product_id){ 
       $j('#cartaoMensagem'+product_id).hide(); 
       $j('#cartaoMensagemRemover'+product_id).show(); 
       $j('#cartaoMensagemRemover'+product_id).css({'background-color': '#000000'}); 
       $j.ajax({ 
        type: "POST", 
        url: "<?php echo Mage::getUrl('fol_carousel/ajax/addCartao') ?>", 
        data: { 
        product_id: product_id 
        }, 
        dataType: 'json', 
        cache : false, 
        beforeSend: function() { 

        }, 
        success: function (retorno) { 
        var button = $j('#cartaoMensagemRemover'+product_id); 

        $j('#cartao').find(':button').not(button).attr('disabled',true); 
        $j('.item-custom').append('<tr id="trAppend"><td class="a-center lc-thumbnails"><img src="' + retorno['imagem'] + '" width="50" height="50" alt="' + retorno['name'] + '"></td><td><h3 class="product-name">' + retorno['name'] + '</h3></td><td class="a-center">1</td><td class="a-right"><span class="cart-price"><span class="price"> R$ ' + retorno['price'] + '</span></span></td></tr>'); 
        getSubTotal(); 
        getGrandTotal(); 

        }, 
        complete: function() { 

        }, 
        error: function (x,y,z) { 
        alert("error"); 
        alert(x); 
        alert(y); 
        alert(z); 
        window.location.reload(); 
        history.go(0); 
        window.location.href=window.location.href; 
        } 
       }); 
      } 

      function removeCartaotoCart(itemId){ 
       $j('#cartaoMensagemRemover'+itemId).hide(); 
       $j('#cartaoMensagem'+itemId).show(); 
       $j.ajax({ 
        type:"POST", 
        url:"<?php echo Mage::getUrl('fol_carousel/ajax/removeCartao') ?>", 
        data:{ 
         itemId: itemId 
        }, 
        cache: false, 
        beforeSend: function(){ 

        }, 
        success: function(retorno){ 
         var button = $j('#cartaoMensagemRemover'+itemId); 
         $j('#cartao').find(':button').attr('disabled',false); 
         $j('.item-custom #trAppend').remove(); 
         getSubTotal(); 
         getGrandTotal();    
        }, 
        complete: function() { 

        }, 
        error: function (x,y,z) { 
        alert("error"); 
        alert(x); 
        alert(y); 
        alert(z); 
        window.location.reload(); 
        history.go(0); 
        window.location.href=window.location.href; 
        } 
       }); 
      } 

回答

0

我 “简化” 你的代码了很多......因为我不能让用一个例子你PHP。
所以“复制”行为在this CodePen

现在您需要做的是将添加的产品ID保存在“内存”中的变量中。

On add ...如果已经有产品ID,请调用remove函数,然后添加其他产品。

它应该是这样简单。
所以这里是another CodePen th修改。

var productSelected = ""; // The variable used as a "memory". 

function addCartao(product_id){ 

    if(productSelected != ""){ 
    removeCartaotoCart(productSelected); // Remove the item in cart, if there is one. 
    } 

    console.log("Add "+product_id); 
    productSelected = product_id;    // Keep the product id in "memory". 

    $('#cartaoMensagem'+product_id).hide(); 
    $('#cartaoMensagemRemover'+product_id).show(); 
    $('#cartaoMensagemRemover'+product_id).css({'background-color': '#000000','color':'white'}); 
    //Ajax... 

    // In the success callback: 
    var button = $('#cartaoMensagemRemover'+product_id); 
    //$('#cartao').find(':button').not(button).attr('disabled',true); // Do not disable the other buttons. 
} 

function removeCartaotoCart(itemId){ 
    console.log("Remove "+itemId); 
    productSelected = "";    // Remove the product id from "memory" 

    $('#cartaoMensagemRemover'+itemId).hide(); 
    $('#cartaoMensagem'+itemId).show(); 
    //Ajax... 

    // In the success callback: 
    var button = $('#cartaoMensagemRemover'+itemId); 
    //$('#cartao').find(':button').attr('disabled',false); // The other buttons aren't disabled... This line is useless. 
}