inventory management

Store Design
, , , ,
1

photo_5931626681234211928_y.jpg
photo_5931626681234211928_y.jpg1080×257 4.66 KB

I’ve set “Product1” to have inventory of 5 (and and I’m not allowing it be still sold when out of stock). However, the user can keep clicking the + on the product amount (whereas I want it to stop being able to be increased once the user has selected 5). It doesn’t allow you to add more than 5 to the cart (an error message pops up), but I don’t want this to happen - I only want the max number of inventory to be able to be selected in the first place. Also if a product only has an inventory of 1, it should just advise “add to cart” rather than give an option of being able to increase the number that you want to try add to cart. So I’d like it to stop increasing when it hits my max inventory, for example this item only has 5 so I shouldn’t be able to click + anymore after 5

I’ve seen Shopify stores do this correctly - does it depend on the theme? As it seems like a basic online store thing to have. I’m using Sense theme. Thanks in advance!

2

Hello,

  1. Go to Online Store
  2. Edit Code

3)Find en.default.json file

  1. Add the following code in the bottom
document.addEventListener('DOMContentLoaded', () => {
    const quantityWrappers = document.querySelectorAll('.quantity-wrapper'); 
    quantityWrappers.forEach(wrapper => {
        const minusButton = wrapper.querySelector('button[aria-label="Decrease quantity"]');
        const plusButton = wrapper.querySelector('button[aria-label="Increase quantity"]');
        const inputField = wrapper.querySelector('input[type="number"]');
        const maxInventory = parseInt(inputField.getAttribute('data-max-inventory'));
        plusButton.addEventListener('click', () => {
            if (parseInt(inputField.value) >= maxInventory) {
                plusButton.disabled = true;
            }
        });
        minusButton.addEventListener('click', () => {
            if (parseInt(inputField.value) < maxInventory) {
                plusButton.disabled = false;
            }
        });
    });
});

Thanks!

3

I will scroll down to the last figure right?

4

Theme code error.PNG
Theme code error.PNG1366×646 68.2 KB

5

How can you help me?

6

Hi @Timadewale ,

You can try adding it at the bottom of main-product.liquid file, refer code:

I inherited the code from @topnewyork

I hope it helps!

7

Thanks it help

8

But it only works for the cart not product page