Hi everyone, I would need to set a minimum order quantity (6 products) on my Webflow commerce and then make it possible to proceede to the checkout only with multiple of three. (i.e. 6 products, then 9, 12, 15…)
How would it be possible?
Thank you!
Did you solve your problem? Facing the same situation…
Hi all.
Josh with Foxy here. If you don’t get what you need with Webflow Ecommerce, per product or entire order minimum quantities is possible with our seamless Webflow integration: https://foxy.io/webflow
Please don’t hesitate to reach out if you have any questions or need help getting started: hello@foxy.io
Thanks,
Josh
Hi @fantinnodar and @Kotama,
@foxy’s reply bumped it up my feed, sorry @fantinnodar that I didn’t see this at time of OP. This is incredibly simple and native to HTML input elements. With a couple of simple attributes it will handle that automatically.
Add those with the necessary values to your quantity input element.
Hope this helps!
Side note: This will apply these values across all products in this collection, if you need to assign this with different values to different elements in a collection list a little bit of custom code will be needed.
1 Like
Wow thank you, @Andrew_Coderre ! Your response was super helpful. I do need to assign different values to different elements though in my case. Would you be able to elaborate on the little bit of custom code that would help achieve this?
I had a helpful response from Nicklas.S at Webflow
He included a video: Screen Recording 2022-10-16...
Follow these steps:
Create two ‘Number’ custom collection fields in the ‘Products’ collection.
Add the custom code in Ecommerce Pages → Products Template → Before closing body tag
Assign the dynamic data fields in the custom code: Webflow - Ecommerce Dynamic...
Javascript snippet:
<script>
// Dynamic min & max input
//Target the quantity input selector
var quantityInput = document.querySelectorAll('[name="commerce-add-to-cart-quantity-input"]')
// Set the min value
quantityInput[0].min = "REPLACE WITH CUSTOM COLLECTION FIELD FOR MINIMUM";
// Set the max value
quantityInput[0].max = "REPLACE WITH CUSTOM COLLECTION FIELD FOR MAXIMUM";
</script>
When you have this setup you can assign unique min and max values to each of the products.
This did what I originally asked for, but I ideally wanted to restrict ordering to MOQ multiples.
Here I added an extra line, just changing .min to .step and reusing the minimum quantity field:
// Set the multiple value
quantityInput[0].step = "REPLACE WITH CUSTOM COLLECTION FIELD FOR MINIMUM";
The code works great on Desktop but when I try from the phone is not running the scrip.
Do you know maybe why?
Thanks
Hello Andrew (and everyone), I think I have an improvement to your answer (which wasn’t yet possible when you posted)…
(By the way, seems like some of the more recent commenters didn’t notice your simple solution. @MarceloBG and @jonathan_global, did you guys find that Andrews solution had a problem?)
I’m not quite ready to attempt to implement this yet, but I might be needing it, and I really appreciate it!
I think there may now be a solution to your “Side note” limitation (without custom code) now that Webflow supports dynamic CMS data in the Attributes field. We should be able to specify unique “min” and “step” values per product by adding each value in its own field in the CMS and referencing them in the attribute values. Use CMS data in custom attributes | Webflow Features
Hope this helps others. Cheers!
PS: Just want to make sure @mel_bloomcreative saw this, too. No more customer code needed, if I am correct!
@MarceloBG sorry, I am new to Javascript. Maybe it is something in the phone’s OS/browser that is blocking it.
@tyeNewton thanks, I was aware of the global option, but I needed to set different amounts depending upon the product.
Thanks for the CMS data link, I will see if it works for me.
Hi, The script works - thanks. But it still doesn’t solve the problem.
With one “Add to basket” I can add a maximum of 10 items of one product [quantityInput[0].max=“10”]. Then I can go to the product page again and add, for example, 10 items.
In Cart, the value will add up and there will be 20 items. Adding custom attributes max=“10” will help, but only if someone edits the quantity value. If not, after clicking the “Continue to checkout:” button, we will go to the “Checkout” subpage. There, the quantity next to the product will be 20.
So unfortunately I still have a problem in 2024.