Retrieve entered quantity in custom liquid block

Store Design
1

Hi,

I’d like to dynamically retrieve the current value of the quantity selector in a custom liquid code block.

That way, I can display a message stating the delivery time will be increased in case the entered quantity exceeds the current inventory.

My products are configure to allow the customer to exceed the avaialble inventory, and I’d like to keep it that way.

If not possible, any other way to achieve this?

Thanks!

2

Hi @rvdp88 ,

This is possible. Can you provide link to the store? I will provide the solution accordingly.

3

Thanks, but please provide the solution in here, so that everyone can see it.

We’d like to implement it ourselves.

4

Hi @rvdp88 ,

The code will defer from theme to theme. I have created code to work on DAWN theme. The following code will detect the quantity change. Dpo modify the code as per your requirement.

document.querySelector('[name="quantity"]').addEventListener('change', function(t){
    document.querySelector('#message').innerHTML = `Your Quantity is ${t.target.value}`
})

Custom Liquid:

You can verify its working here https://mangit.myshopify.com/products/copy-of-adidas-mens-postmove-mid-basketball-shoes

5

Thanks a lot!

Where do I need to place the first code block exactly?

And second question:

In case I just wanted to have a variable {{ selectedQuantity }} available in the custom liquid code block, so that I can generate the message from there based on some checks, would that also be possible?

6

Hi @rvdp88 ,

That would be possible. We will have to add if condition as per our need to achieve this.

And the code needs to be added to the theme.liquid of the custom liquid section. The code should be wrapped inside