Custom Quantity Button Problem with Quickview Popup

Design help Custom code
1

I am working on an e-commerce project for a client and I have some custom code for the Plus and Minus button for quantity which is below:

<script>
const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('quantity-5653eb496f4e8e5489bceb6448510ee2');

if (minusButton !== null) {
  minusButton.addEventListener('click', event => {
    event.preventDefault();
  	const currentValue = Number(inputField.value) || 1;
  	if (currentValue > 1) {
    	inputField.value = currentValue - 1;
	  }
    });
  plusButton.addEventListener('click', event => {
  	event.preventDefault();
	const currentValue = Number(inputField.value) || 1;
	inputField.value = currentValue + 1;
  });
};
</script>

So I have also built a custom Quickview Popup on the “Our Products” page and the Plus and Minus button only work on the 1st product Quickview but not the others. I am wondering why this is? Is it because there are several Add To Cart buttons on the same page?

Here are the links:
Share-Link: https://preview.webflow.com/preview/beachfox?utm_source=beachfox&preview=2ff9fa17353a56035666cc49949e78d7&mode=preview

Page Link: Sunscreen Products by BEACHFOX | Northern Beaches, NSW

Thank you in advance!

2 Likes
2

I just tried and it seems like it’s working to me… did you resolve this problem?

1 Like
3

Yeah, someone helped me fix the jquery issue. Thanks!

4

Hi @Noah-R,

I wonder if you have a guide on how to implement this custom quantity button and quickview popup.

Cheers!

5

Noah we would all appreciate you telling us how you achieved this plus and minus button… could you possibly give us a quick rundown how you achieved it?

Looks great!

P.S. Would it be possible to insert it next to the add-to-cart button on the collection page?

6

Sadly this doesn’t work anymore. Since in the product page they removed the ID tag. I circumvented with var inputField = document.getElementsByClassName(“quantity”)[0]; It just doesn’t work, I have checked everything, also checked the example. The funny thing is, that also in the life example it doesn’t work anymore.

7

Hi @Aron_Bijl, this does work! But you need to make sure to apply all of the constants

const minusButton = document.getElementById(‘minus’);
const plusButton = document.getElementById(‘plus’);
const inputField = document.getElementById(‘quantity-5653eb496f4e8e5489bceb6448510ee2’);

This means;

the linkblock for the “plus button” needs to have (plus) set as its element I.D.

the linkblock for the “minus button” needs to have (minus) set as its element I.D.

Now the tricky part is finding the “Quantity” elements I.D to apply to the code snippet linking everything together correctly.

To find the element I.D of the “Quantity” element, we need to set the page live. By this I mean, publish the page and view it live in the browser.

Now we need to go to the web inspector / inspect element depending on the browser you are using. This is a developer tool that allows us to view the code.

Then when you have the web inspector open, select the “Quantity” element with the number figure in it (on the page). Once you have selected this, the corresponding section of HTML code will be highlighted. Within this HTML there will be an element I.D with the # symbol before it. You need to copy the I.D which should read something like this “quantity-5653eb496f4e8e5489bceb6448510ee2”.

Double click this to select it, apply to the custom code snippet and you should be good to go. Assuming you follow all of the additional class name steps that is.

Let me know if you run into any issues.

All the best,
Michael

2 Likes
8

This is exactly right! Thanks for sharing Michael! :call_me_hand:

1 Like