Streaming live at 10am (PST)

Custom Quantity Button Problem with Quickview Popup

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: https://beachfox.webflow.io/products

Thank you in advance!

2 Likes

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

1 Like

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

Hi @Noah-R,

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

Cheers!

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?