Eu tenho alguns botões do qual no onclick
dos mesmos trabalham com duas requisições Ajax para um arquivo externo que adicionam produtos, mas isso não é de extrema importância nessa questão. O meu problema é o seguinte: se o botão comprar for clicado, o produto é adicionado, porém se a página for atualizada o mesmo estará lá, mas eu só posso ter um produto do mesmo de cada vez e se depois da página atualizada o botão comprar for clicado novamente, outro produto é adicionado e isso não pode acontecer, pois o que já estiver adicionado deve ser retirado a partir da função removeCartaotoCart
para que o novo seja adicionado, para que eu tenha somente um produto por vez.
Código dos botões:
<button type="button" class="button btn-cart" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Comprar</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>
Código das requisições Ajax:
var productSelected = "";
function addCartao(product_id){
if( productSelected != "" ){
removeCartaotoCart(productSelected); // Remove the item in cart, if there is one.
}
$j('#cartaoMensagem'+product_id).hide();
$j('#cartaoMensagemRemover'+product_id).show();
$j('#cartaoMensagemRemover'+product_id).css({'background-color': '#000000'});
$j.ajax({
type: "POST",
url: "adiciona.php",
data: {
product_id: product_id
},
dataType: 'json',
cache : false,
beforeSend: function () {
},
success: function (retorno) {
var button = $j('#cartaoMensagemRemover'+product_id);
productSelected = product_id;
$j('.item-custom').append('<tr id="trAppend'+product_id+'"><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){
productSelected = "";
$j('#cartaoMensagemRemover'+itemId).hide();
$j('#cartaoMensagem'+itemId).show();
$j.ajax({
type:"POST",
url:"remove.php",
data:{
itemId: itemId
},
cache: false,
beforeSend: function(){
},
success: function(retorno){
var button = $j('#cartaoMensagemRemover'+itemId);
$j('.item-custom #trAppend'+itemId+'').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;
}
});
}
Observação: A partir da variável productSelected
, eu consigo tratar uma exceção: se o botão comprar for clicado e já houver um produto adicionado, o mesmo é removido para o novo ser adicionado, porém essa outra exceção com relação a atualizar a página não sei como devo prosseguir para soluciona-lá. Acho que o correto a se fazer é na atualização da página ele remover o produto que foi adicionado segundo o botão comprar, a partir do seu id.
.remove()
?