Shopify Question posted in
The Shopify help center can be found here.

how to update total on click plus and minus button shopify cart page

i want to add button plus and minus for qty related when qty clicks then update subtotal without page load.

i am also using the debut theme and the file name is section folder cart-templated.liquid

<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" >-</button>
                    <label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
                    <input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number"
                      name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*"
                      data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop data-role="product-quantity-desktop">  
                  <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus">+</button>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thanks, but some changes to your code after work. so please check below code.

    <script>
 function changeQuantity(isIncrease, key) {
 console.log('changeQuantity called');
 const input = document.getElementById(`updates_large_${key}`);
 const currentValue = parseInt(input.value);
 const newValue = isIncrease ? currentValue + 1 : currentValue - 1;

 // Ensure the quantity is at least 0
  if (newValue >= 0) { 
    input.value = newValue; // Update the input's value
    updateCart(key, newValue); // Update the cart
   }
  }

 function updateCart(key, quantity) {
  console.log('updateCart called');
  fetch('/cart/change.js', {
   method: 'POST',
   headers: {
  'Content-Type': 'application/json',
},
body: JSON.stringify({
  id: key,
  quantity: quantity
  })
})
 .then(response => response.json())
 .then(cart => {
    console.log('Cart updated successfully', cart.items_subtotal_price);
    // Here, update the subtotal and any other elements as needed
    // For example, if you have an element for subtotal, you could do 
    document.querySelector('.cart-subtotal__price').textContent = '$' + 
cart.items_subtotal_price / 100.0;
    document.querySelector('.custom-total').textContent = '$' + 
cart.items_subtotal_price / 100.0;

 })
  .catch(error => console.error('Error updating cart:', error));
 }

</script>

    go to section folder and file cart-templated.liquid in this file find code below and change

    <span data-cart-item-regular-price>{{ item.original_line_price | money }}</span>

change

<span class="custom-total" data-cart-item-regular-price>{{ item.original_line_price | money }}</span>

  2. 0

    you’ll need to use JavaScript (or jQuery) for the client-side logic and Shopify’s AJAX API to update the cart information on the server side. Below is a step-by-step guide to implement this in your cart-template.liquid file under the sections folder.

    Step 1: Modify the HTML for Plus and Minus Buttons
    First, ensure your plus and minus buttons are properly set up. Your provided code snippet was cut off; here’s how you might complete it for both buttons:

    <button type="button" onclick="changeQuantity(false, '{{ item.key }}')">-</button>
<label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
<input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number" name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*" data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop data-role="product-quantity-desktop">
<button type="button" onclick="changeQuantity(true, '{{ item.key }}')">+</button>

    Step 2: Add JavaScript for Quantity Change Function
    Within your cart-template.liquid file or in a separate JavaScript file included in your theme, define the changeQuantity function. This function will handle the quantity change and update the cart without reloading the page. If you’re not already loading jQuery in your theme, you might need to, as Shopify themes often use it.

    function changeQuantity(isIncrease, key) {
  const input = document.querySelector(`#updates_large_${key}`);
  const currentValue = parseInt(input.value);
  const newValue = isIncrease ? currentValue + 1 : currentValue - 1;

  // Ensure the quantity is at least 0
  if (newValue >= 0) {
    input.value = newValue; // Update the input's value
    updateCart(key, newValue); // Update the cart
  }
}

function updateCart(key, quantity) {
  fetch('/cart/change.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      id: key,
      quantity: quantity
    })
  })
  .then(response => response.json())
  .then(cart => {
    console.log('Cart updated successfully', cart);
    // Here, update the subtotal and any other elements as needed
    // For example, if you have an element for subtotal, you could do something like:
    // document.querySelector('#subtotal').textContent = '$' + cart.items_subtotal_price / 100.0;
  })
  .catch(error => console.error('Error updating cart:', error));
}

    Step 3: Update the Subtotal in the DOM
    After successfully updating the cart, you might want to update the subtotal displayed on the page. You can do this in the .then(cart => {…}) portion of the updateCart function. Assuming you have an element that displays the subtotal, you would update its content with the new subtotal value that you can obtain from the cart object returned by Shopify’s AJAX API.

    hope it helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search