How can I allow the user to select an amount of product by either volume or quantity?

Question

I am working on a mobile application. It is like ordering app for grocery but in wholesale and not in retailer. So the order is not in 1 quantity, It is in 10000 kgs.

Scenario - I am logged in as a user then I will see all listing of all products. I click on add products then I will see pop up for adding the quantity of the product. Now, this is the challenging part, As for wholesale we are setting the minimum quantity for each product (Like 30 kg) but when the user might be wanted to add in the unit(Like 120kg) and not in the form of packs(4 Packs).

1. Quantity as Text box - User can enter any number and which will not fit in the range(Like minimum quantity is 30 kg then if user enter 100kg but we can not accept 100 kg . User have to enter90kg or 120kg

2. Quantity as the drop down - The range of drop down will be huge like it could have 1 pack or 30kg to 1000pack or 30000kg.

3. If we are keeping textbox for a number of packs then the user has to calculate that ok user has 1000 kg then he should order 34 packs.

4. Both but as I enter one value second value will be calculated and shown to the user. Two text boxes for one field is also a bit confusing.

Need suggestion for it.

Answer 1

I would imagine most bulk purchasers would care primarily about the total amount of product they are purchasing, rather than the number of packages (though, perhaps I am wrong on this and actual number of packages does indeed matter).

Considering this, you could allow them to select their volume, and suggest a convenient "fix" for any invalid selections.

---

---

Answer 2

Given it is a mobile application, this could be a possible layout.

A few things to keep in mind -

1. A lot of countries use the dollar sign, it is preferable to use the three letter ISO currency code.
2. If it is US we are talking about, then it will be not be metric units but USC. We will need to keep the culture in mind.
3. Appropriate labels should be used.
4. Field labels should preferably be at the top, besides improving form scan it is the appropriate layout given the mobile real estate.
5. Overlay modals are generally discouraged for mobile forms. Please look at some other alternatives for this. (Source)

Answer 3

I don't know if this is the best answer for you but I'm using something similar for Roof Length (See the image). I keep the input width text="number" (will show numbers keyboard on mobile) and insert measurement unit as a dropdown on the side but looks like the same field.

P.S. 1: If it looks clear and you give a few options, you have more chance to interact with the user.

P.S. 2: When a user has more decisions to take, easy to take no action or the wrong action.