- The aim of this template is to display unit price
- Duplicate the angular directive
- Add a question mark icon and its own file
- Add some needed colors in the branding file
On some Iphones the modal wouldn't fit and there were line breaks
between the input fields. The inputs are now stacked vertically on small
screens so that there is still plenty of space for large numbers in the
quantity fields.
When the user entered a number beyond the stock level, the browser was
correcting that to the max number which is very helpful. But Angular was
setting the model to undefined which removes the item from the cart.
Deactivating Angular's max behaviour let's us set the value ourselves
which is then used in the cart.
If the user entered an invalid quantity, Angular set the model to
undefined and we removed the input field to show the add button. That
makes it impossible for a user to see what the maximum quantity to enter
would be. For example:
- The variant has a stock level of 5.
- The user enters 7.
- Angular sets it to undefined.
- The input field disappears.
- The user is startled and doesn't know how to proceed.
But now we hide the input only if it's deliberately set to zero.
Adding bigger quantities can now be done via an input field instead of
clicking a thousand times.
The add-button has been widened to match the new space requirements.
Once a price breakdown has been opened, the nub was over the bottom half
of the pie button. It made half of the pie unclickable.
And when you closed the breakdown, it became invisible but stayed
present, absorbing all clicks in that area. So other pie buttons were
unclickable as well.
The fullwidth plus and minus signs are well understood in all countries
(that participate in the development of OFN). It's more likely that a
translator enters a normal plus or minus than that they want to change
the symbol. A normal + or - sign doesn't fill a whole character space
and is therefore not well aligned in the design.
While the text "x in cart" isn't visible, the item quantity is not set.
A missing variable leads to longer text that is taken up more space. In
this case it was two lines instead of one line. The resulting extra line
of margin disappeared when adding to the cart and the rest of the page
jumped up.
The new mobile friendly design contains a nice "Add" button to add
variants to your cart. Once you have the variant in you cart, it's
replaced by plus and minus buttons to adjust the quantity.
Other languages have longer words than "Add" which need to fit on the
button. Since the add button and the +/- buttons should have the same
width, I widened them a little bit so that they fit the longest words
Aggiungi and Добавить.
