0

Criei essas funções para caso a quantidade do produto seja alterada, independente de ser pelos botoes setas ou diretamente no campo, apareça o botão "Atualizar", apenas para o produto que sofreu a alteração. Porém, se altero 1 produto o botão aparece para todos os outros.E quando clico novamente no mesmo produto, o botão dele remove, porém, adiciona outro botão em outro produto.

inserir a descrição da imagem aqui

<form action="http://.../checkout/cart/updatePost/" method="post" id="form-validate" class="form form-cart">
      <input name="form_key" type="hidden" value="rW5XuwwQiEurJLOt">
      <div class="cart table-wrapper">
        <table id="shopping-cart-table" class="cart items data table">
          <caption role="heading" aria-level="2" class="table-caption">Itens do Carrinho de Compras</caption>
          <thead>
            <tr>
              <th class="col item" scope="col"><span>Item</span></th>
              <th class="col price" scope="col"><span>Preço</span></th>
              <th class="col qty" scope="col"><span>Qtd</span></th>
              <th class="col subtotal" scope="col"><span>Subtotal</span></th>
            </tr>
          </thead>
          <tbody class="cart item">
            <tr class="item-info">
              <td data-th="Item" class="col item">
                <a href="http://.../estojo-lowcost-azul-lentes-de-contato.html" title="Estojo para lentes de contato Bausch &amp; Lomb&lrm; azul" tabindex="-1" class="product-item-photo">

                  <span class="product-image-container" style="width:165px;">
            <span class="product-image-wrapper" style="padding-bottom: 100%;">
                <img class="product-image-photo" src="http://.../pub/media/catalog/product/cache/3a98496dd7cb0c8b28c4c254a98f915a/c/b/cbl.jpg" max-width="165" max-height="165" alt="Estojo para lentes de contato Bausch &amp; Lomb&lrm; azul"></span>
                  </span>
                </a>
                <div class="product-item-details">
                  <strong class="product-item-name">
                      <a href="http://.../estojo-lowcost-azul-lentes-de-contato.html">Estojo para lentes de contato Bausch &amp; Lomb&lrm; azul</a>
                  </strong>
                </div>
              </td>
              <td class="col price" data-th="Preço">

                <span class="price-excluding-tax" data-label="Excl. Impostos">
                  <span class="cart-price">
                     <span class="price">R$4,90</span> 
                  </span>
                </span>
              </td>
              <td class="col qty" data-th="Qtd">
                <div class="field qty">
                  <label class="label" for="cart-2217-qty">
                            <span>Qtd</span>
                        </label>
                  <div class="control qty">
                    <input id="cart-2217-qty" name="cart[2217][qty]" data-cart-item-id="1530" value="4" type="number" size="4" title="Qtd" class="input-text qty" maxlength="12" data-validate="{required:true,'validate-greater-than-zero':true}" data-role="cart-item-qty">
                  </div>
                  <div class="qty-changer">
                    <a href="javascript:void(0)" class="qty-inc"><i class="porto-icon-up-dir"></i></a>
                    <a href="javascript:void(0)" class="qty-dec"><i class="porto-icon-down-dir"></i></a>
                  </div>
                </div>
              </td>

              <td class="col subtotal" data-th="Subtotal">

                <span class="price-excluding-tax" data-label="Excl. Impostos">
                     <span class="cart-price">
                          <span class="price">R$19,60</span>                            </span>
                </span>
              </td>
            </tr>
            <tr class="item-actions">
              <td colspan="100">
                <div class="actions-toolbar">
                  <div id="gift-options-cart-item-2217" data-bind="scope:'giftOptionsCartItem-2217'" class="gift-options-cart-item">
                    <!-- ko template: getTemplate() -->
                    <!-- ko if: isActive() || hasActiveOptions() -->
                    <!-- /ko -->
                    <!-- /ko -->

                  </div>
                  <a class="action action-edit" href="http://.../checkout/cart/configure/id/2217/product_id/64518/" title="Editar parâmetros do item">
                    <span>
                    Editar        </span>
                  </a>
                  <a href="#" title="Remover item" class="action action-delete" data-post="{&quot;action&quot;:&quot;http:\/\/...\/checkout\/cart\/delete\/&quot;,&quot;data&quot;:{&quot;id&quot;:&quot;2217&quot;,&quot;uenc&quot;:&quot;aHR0cDovLzE4LjIyOS4xNDUuODQvY2hlY2tvdXQvY2FydC8,&quot;}}">
                    <span>
                Remover item    </span>
                  </a><button id="updateCar" type="submit" name="update_cart_action" data-cart-item-update="" value="update_qty" title="Atualizar Carrinho de Compras" class="action update" style="display: none;"><span>Atualizar</span></button><button id="updateCar"
                    type="submit" name="update_cart_action" data-cart-item-update="" value="update_qty" title="Atualizar Carrinho de Compras" class="action update" style="display: none;"><span>Atualizar</span></button><button id="updateCar" type="submit" name="update_cart_action"
                    data-cart-item-update="" value="update_qty" title="Atualizar Carrinho de Compras" class="action update" style="display: none;"><span>Atualizar</span></button><button id="updateCar" type="submit" name="update_cart_action" data-cart-item-update=""
                    value="update_qty" title="Atualizar Carrinho de Compras" class="action update" style="display: none;"><span>Atualizar</span></button>
                </div>
              </td>
            </tr>
          </tbody>
          <tbody class="cart item">
            <tr class="item-info">
              <td data-th="Item" class="col item">
                <a href="http://.../renu-fresh-120ml.html" title="Renu Fresh 120ml " tabindex="-1" class="product-item-photo">

                  <span class="product-image-container" style="width:165px;">
            <span class="product-image-wrapper" style="padding-bottom: 100%;">
                <img class="product-image-photo" src="http://.../pub/media/catalog/product/cache/3a98496dd7cb0c8b28c4c254a98f915a/l/2/l2412989.jpg" max-width="165" max-height="165" alt="Renu Fresh 120ml "></span>
                  </span>
                </a>
                <div class="product-item-details">
                  <strong class="product-item-name">
                                                    <a href="http://.../renu-fresh-120ml.html">Renu Fresh 120ml </a>
                                            </strong>
                </div>
              </td>

              <td class="col price" data-th="Preço">

                <span class="price-excluding-tax" data-label="Excl. Impostos">
                            <span class="cart-price">
                                <span class="price">R$24,90</span> </span>

                </span>
              </td>
              <td class="col qty" data-th="Qtd">
                <div class="field qty">
                  <label class="label" for="cart-2218-qty">
                            <span>Qtd</span>
                        </label>
                  <div class="control qty">
                    <input id="cart-2218-qty" name="cart[2218][qty]" data-cart-item-id="1350" value="1" type="number" size="4" title="Qtd" class="input-text qty" maxlength="12" data-validate="{required:true,'validate-greater-than-zero':true}" data-role="cart-item-qty">
                  </div>
                  <div class="qty-changer">
                    <a href="javascript:void(0)" class="qty-inc"><i class="porto-icon-up-dir"></i></a>
                    <a href="javascript:void(0)" class="qty-dec"><i class="porto-icon-down-dir"></i></a>
                  </div>
                </div>
              </td>

              <td class="col subtotal" data-th="Subtotal">

                <span class="price-excluding-tax" data-label="Excl. Impostos">
                            <span class="cart-price">
                                <span class="price">R$24,90</span> 
</span>

                </span>
              </td>
            </tr>
            <tr class="item-actions">
              <td colspan="100">
                <div class="actions-toolbar">
                  <div id="gift-options-cart-item-2218" data-bind="scope:'giftOptionsCartItem-2218'" class="gift-options-cart-item">
                    <!-- ko template: getTemplate() -->
                    <!-- ko if: isActive() || hasActiveOptions() -->
                    <!-- /ko -->
                    <!-- /ko -->

                  </div>
                  <a class="action action-edit" href="http://.../checkout/cart/configure/id/2218/product_id/64516/" title="Editar parâmetros do item">
                    <span>
                    Editar        </span>
                  </a>
                  <a href="#" title="Remover item" class="action action-delete" data-post="{&quot;action&quot;:&quot;http:\/\/...\/checkout\/cart\/delete\/&quot;,&quot;data&quot;:{&quot;id&quot;:&quot;2218&quot;,&quot;uenc&quot;:&quot;aHR0cDovLzE4LjIyOS4xNDUuODQvY2hlY2tvdXQvY2FydC8,&quot;}}">
                    <span>
                Remover item    </span>
                  </a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="cart main actions">
        <a class="action continue" href="http://.../" title="Continuar Comprando">
          <span>Continuar Comprando</span>
        </a>
        <button type="submit" name="update_cart_action" data-cart-empty="" value="empty_cart" title="Limpar Carrinho de Compras" class="action clear" id="empty_cart_button">
                    <span>Limpar Carrinho de Compras</span>
                </button>
        <input type="hidden" value="" id="update_cart_action_container" data-cart-item-update="">
      </div>
    </form>

function habilitaButton() {

 	var divTableCart = document.getElementById('shopping-cart-table');
	var itemProduct = divTableCart.getElementsByClassName('action-delete');

for(var j =0; j < itemProduct.length; j++){	
	 itemProduct[j].insertAdjacentHTML("afterend", '<button id="updateCar" type="submit" name="update_cart_action" data-cart-item-update="" value="update_qty" title="Atualizar Carrinho de Compras" class="action update"><span>Atualizar</span></button>');
	}
}
function removeButton(){
	var divTableCart = document.getElementById('shopping-cart-table');
	var itemProduct = divTableCart.getElementsByClassName('action-delete');

	for(var l =0; l < itemProduct.length; l++){	
	 document.getElementById("updateCar").style.display="none";
	}
}


var QtdyProduct = document.getElementsByClassName("control qty");

for(var i =0; i < QtdyProduct.length; i++){	
	var qtdAlterada = QtdyProduct[i].getElementsByTagName('input')[0];
	qtdAlterada.addEventListener("blur", habilitaButton);
	
	qtdAlterada.addEventListener("focusin", removeButton);
}

2
  • 1
    Tem como postar o HTML? Aí daria pra testar o código. 31/10/2019 às 21:00
  • oi @VítorFerragini tem sim.
    – R.Park
    1/11/2019 às 0:26

2 Respostas 2

1

Isto está acontecendo porque na function habilitaButton() você está percorrendo todas as DIVs "action-delete" e inserindo nelas o Botão de Atualizar, o correto é verificar se o índice atual é igual ao que está no for.

Para simplificar todo o script eu alterei o HTML do Botão de Atualizar, trocando o id "updateCar" por classe no lugar dele para poder procurar por todos os Botões no JavaScript e adicionei ele em todos os itens do carrinho e também adicione a classe "input-qty" em todos os inputs de Quantidade.

O HTML ficou da seguinte forma:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testes</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<form action="http://.../checkout/cart/updatePost/" method="post" id="form-validate" class="form form-cart">
      <input name="form_key" type="hidden" value="rW5XuwwQiEurJLOt">
      <div class="cart table-wrapper">
        <table id="shopping-cart-table" class="cart items data table">
          <caption role="heading" aria-level="2" class="table-caption">Itens do Carrinho de Compras</caption>
          <thead>
            <tr>
              <th class="col item" scope="col"><span>Item</span></th>
              <th class="col price" scope="col"><span>Preço</span></th>
              <th class="col qty" scope="col"><span>Qtd</span></th>
              <th class="col subtotal" scope="col"><span>Subtotal</span></th>
            </tr>
          </thead>
          <tbody class="cart item">
            <tr class="item-info">
              <td data-th="Item" class="col item">
                <a href="http://.../estojo-lowcost-azul-lentes-de-contato.html" title="Estojo para lentes de contato Bausch &amp; Lomb&lrm; azul" tabindex="-1" class="product-item-photo">

                  <span class="product-image-container" style="width:165px;">
            <span class="product-image-wrapper" style="padding-bottom: 100%;">
                <img class="product-image-photo" src="http://.../pub/media/catalog/product/cache/3a98496dd7cb0c8b28c4c254a98f915a/c/b/cbl.jpg" max-width="165" max-height="165" alt="Estojo para lentes de contato Bausch &amp; Lomb&lrm; azul"></span>
                  </span>
                </a>
                <div class="product-item-details">
                  <strong class="product-item-name">
                      <a href="http://.../estojo-lowcost-azul-lentes-de-contato.html">Estojo para lentes de contato Bausch &amp; Lomb&lrm; azul</a>
                  </strong>
                </div>
              </td>
              <td class="col price" data-th="Preço">

                <span class="price-excluding-tax" data-label="Excl. Impostos">
                  <span class="cart-price">
                     <span class="price">R$4,90</span> 
                  </span>
                </span>
              </td>
              <td class="col qty" data-th="Qtd">
                <div class="field qty">
                  <label class="label" for="cart-2217-qty">
                            <span>Qtd</span>
                        </label>
                  <div class="control qty">
                    <input id="cart-2217-qty" class="input-qty" name="cart[2217][qty]" data-cart-item-id="1530" value="4" type="number" size="4" title="Qtd" class="input-text qty" maxlength="12" data-validate="{required:true,'validate-greater-than-zero':true}" data-role="cart-item-qty"><!--Alterei aqui-->
                  </div>
                  <div class="qty-changer">
                    <a href="javascript:void(0)" class="qty-inc"><i class="porto-icon-up-dir"></i></a>
                    <a href="javascript:void(0)" class="qty-dec"><i class="porto-icon-down-dir"></i></a>
                  </div>
                </div>
              </td>

              <td class="col subtotal" data-th="Subtotal">

                <span class="price-excluding-tax" data-label="Excl. Impostos">
                     <span class="cart-price">
                          <span class="price">R$19,60</span>                            </span>
                </span>
              </td>
            </tr>
            <tr class="item-actions">
              <td colspan="100">
                <div class="actions-toolbar">
                  <div id="gift-options-cart-item-2217" data-bind="scope:'giftOptionsCartItem-2217'" class="gift-options-cart-item">
                    <!-- ko template: getTemplate() -->
                    <!-- ko if: isActive() || hasActiveOptions() -->
                    <!-- /ko -->
                    <!-- /ko -->

                  </div>
                  <a class="action action-edit" href="http://.../checkout/cart/configure/id/2217/product_id/64518/" title="Editar parâmetros do item">
                    <span>
                    Editar        </span>
                  </a>
                  <a href="#" title="Remover item" class="action action-delete" data-post="{&quot;action&quot;:&quot;http:\/\/...\/checkout\/cart\/delete\/&quot;,&quot;data&quot;:{&quot;id&quot;:&quot;2217&quot;,&quot;uenc&quot;:&quot;aHR0cDovLzE4LjIyOS4xNDUuODQvY2hlY2tvdXQvY2FydC8,&quot;}}">
                    <span>
                Remover item    </span>
                  </a>
				  <button class="updateCar" type="submit" name="update_cart_action" data-cart-item-update="" value="update_qty" title="Atualizar Carrinho de Compras" class="action update" style="display: none;"><span>Atualizar</span></button><!--Fiz a alteração aqui-->
                </div>
              </td>
            </tr>
          </tbody>
          <tbody class="cart item">
            <tr class="item-info">
              <td data-th="Item" class="col item">
                <a href="http://.../renu-fresh-120ml.html" title="Renu Fresh 120ml " tabindex="-1" class="product-item-photo">

                  <span class="product-image-container" style="width:165px;">
            <span class="product-image-wrapper" style="padding-bottom: 100%;">
                <img class="product-image-photo" src="http://.../pub/media/catalog/product/cache/3a98496dd7cb0c8b28c4c254a98f915a/l/2/l2412989.jpg" max-width="165" max-height="165" alt="Renu Fresh 120ml "></span>
                  </span>
                </a>
                <div class="product-item-details">
                  <strong class="product-item-name">
                                                    <a href="http://.../renu-fresh-120ml.html">Renu Fresh 120ml </a>
                                            </strong>
                </div>
              </td>

              <td class="col price" data-th="Preço">

                <span class="price-excluding-tax" data-label="Excl. Impostos">
                            <span class="cart-price">
                                <span class="price">R$24,90</span> </span>

                </span>
              </td>
              <td class="col qty" data-th="Qtd">
                <div class="field qty">
                  <label class="label" for="cart-2218-qty">
                            <span>Qtd</span>
                        </label>
                  <div class="control qty">
                    <input id="cart-2218-qty" class="input-qty" name="cart[2218][qty]" data-cart-item-id="1350" value="1" type="number" size="4" title="Qtd" class="input-text qty" maxlength="12" data-validate="{required:true,'validate-greater-than-zero':true}" data-role="cart-item-qty"><!--Alterei aqui-->
                  </div>
                  <div class="qty-changer">
                    <a href="javascript:void(0)" class="qty-inc"><i class="porto-icon-up-dir"></i></a>
                    <a href="javascript:void(0)" class="qty-dec"><i class="porto-icon-down-dir"></i></a>
                  </div>
                </div>
              </td>

				<td class="col subtotal" data-th="Subtotal">
					<span class="price-excluding-tax" data-label="Excl. Impostos">
						<span class="cart-price">
							<span class="price">R$24,90</span>
						</span>

					</span>
				</td>
            </tr>
            <tr class="item-actions">
              <td colspan="100">
                <div class="actions-toolbar">
                  <div id="gift-options-cart-item-2218" data-bind="scope:'giftOptionsCartItem-2218'" class="gift-options-cart-item">
                    <!-- ko template: getTemplate() -->
                    <!-- ko if: isActive() || hasActiveOptions() -->
                    <!-- /ko -->
                    <!-- /ko -->

                  </div>
                  <a class="action action-edit" href="http://.../checkout/cart/configure/id/2218/product_id/64516/" title="Editar parâmetros do item">
                    <span>
                    Editar        </span>
                  </a>
                  <a href="#" title="Remover item" class="action action-delete" data-post="{&quot;action&quot;:&quot;http:\/\/...\/checkout\/cart\/delete\/&quot;,&quot;data&quot;:{&quot;id&quot;:&quot;2218&quot;,&quot;uenc&quot;:&quot;aHR0cDovLzE4LjIyOS4xNDUuODQvY2hlY2tvdXQvY2FydC8,&quot;}}">
                    <span>
                Remover item    </span>
				<button class="updateCar" type="submit" name="update_cart_action" data-cart-item-update="" value="update_qty" title="Atualizar Carrinho de Compras" class="action update" style="display: none;"><span>Atualizar</span></button><!--Fiz a alteração aqui-->
                  </a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="cart main actions">
        <a class="action continue" href="http://.../" title="Continuar Comprando">
          <span>Continuar Comprando</span>
        </a>
        <button type="submit" name="update_cart_action" data-cart-empty="" value="empty_cart" title="Limpar Carrinho de Compras" class="action clear" id="empty_cart_button">
                    <span>Limpar Carrinho de Compras</span>
                </button>
        <input type="hidden" value="" id="update_cart_action_container" data-cart-item-update="">
      </div>
    </form>
	
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script src="main.js"></script>    
</body>
</html>

Depois fiz o script da seguinte forma:

function togleButton(event, qtdPadrao){
	let qtdAlterada = event.target.value;
	let index = Array.from(QtdyProducts).indexOf(event.target);
	let buttonUp = document.querySelectorAll('.updateCar');
	if (qtdPadrao == qtdAlterada)
		buttonUp[index].style.display="none"
	else
		buttonUp[index].style.display="";
}

let QtdyProducts = document.querySelectorAll('.input-qty');

QtdyProducts.forEach(function(product){
	let qtdPadrao = product.value;
	product.addEventListener('blur', function(){
		togleButton(event, qtdPadrao);
	}, false);
})

Agora algumas explicações.

A primeira coisa que eu fiz foi armazenar em uma variável todos os inputs de quantidade:

let QtdyProducts = document.querySelectorAll('.input-qty');

Depois usando o forEach() eu percorro essa variável e para cada item eu salvo o valor padrão do input de quantidade em uma variável, para poder passar para a função togleButton() além do evento em si.

É importante ressaltar que se eu não tivesse colocado o

function(){
   togleButton(event, qtdPadrao);
}, false

no addEventListener() ele iria chamar a função togleButton() assim que a página carregasse e iria dar erro.

Já na função togleButton() eu armazeno a quantidade alterada pelo usuário em uma variável:

let qtdAlterada = event.target.value;

Para poder comparar com a quantidade padrão que estava setada para o input de quantidade.

Depois armazeno em uma variável o índice do input atual que usuário está alterando o valor:

Array.from(QtdyProducts).indexOf(event.target);

E armazeno também todos os botões existentes em uma variável novamente:

let buttonUp = document.querySelectorAll('.updateCar');

Por último comparo se a quantidade alterada é igual a quantidade padrão:

if (qtdPadrao == qtdAlterada)
    buttonUp[index].style.display="none"
else
    buttonUp[index].style.display="";

Se for igual eu altero o display para "none", se for diferente eu removo o display "none".

1
  • 1
    oi @RenatoGonçales , primeiramente agradeço pela sua dedicação na resposta. Gostaria de compartilhar também como foi solucionado este problema, com a ajuda de um colega de trabalho. Veja a solução tomada.
    – R.Park
    4/11/2019 às 12:33
0

function habilitaButton(numero) {
		var qtd = document.getElementsByClassName("input-text qty");
		var btn = document.getElementsByClassName("qty-changer");
		var num = 0;
		for(var x = 0; x < qtd.length; x++){
			if(qtd[x] == numero){
				num = x;
			}
		}
		for(var y = 0; y < btn.length; y++){
			if(btn[y] == numero){
				num = y;
			}
		}

		document.getElementsByClassName("action update")[num].style.display = "block";
	  }
	var QtdyProduct = document.getElementsByClassName("control qty");
	var divTableCart = document.getElementById('shopping-cart-table');
	var itemProduct = divTableCart.getElementsByClassName('action-delete');
	document.getElementsByName("update_cart_action")[1].style.display = "none";
	for(var j =0; j < itemProduct.length; j++){	
		itemProduct[j].insertAdjacentHTML("afterend", '<button type="submit" name="update_cart_action" style="display:none;" data-cart-item-update="" value="update_qty" title="Atualizar" class="action update"><span>Atualizar</span></button>');
	}  
	for(var i =0; i < QtdyProduct.length; i++){	
		var qtdAlterada = QtdyProduct[i].getElementsByTagName('input')[0];
		document.getElementsByClassName("qty-changer")[i].onclick = function(){
			habilitaButton(this);
		}
		qtdAlterada.onchange = function(){
			habilitaButton(this);
		}
	}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .