Feature/2733

[Michal-Dziedzinski]

Related issues

closes #2733

Short description and why it's useful

I added a label to the input that tells the user how many products of a given color and size are available. You can not enter a number greater than the quantity of products . When quantity is equal to 0, the input and the button are disabled.

Screenshots of visual changes before/after (if there are any)

Before:

After:

Which environment this relates to

Check your case. In case of any doubts please read about Release Cycle

• Test version (https://test.storefrontcloud.io) - this is a new feature or improvement for Vue Storefront. I've created branch from develop branch and want to merge it back to develop
• RC version (https://next.storefrontcloud.io) - this is a stabilisation fix for Release Candidate of Vue Storefront. I've created branch from release branch and want to merge it back to release
• Stable version (https://demo.storefrontcloud.io) - this is an important fix for current stable version. I've created branch from hotfix or master branch and want to merge it back to hotfix

Upgrade Notes and Changelog

• No upgrade steps required (100% backward compatibility and no breaking changes)
• I've updated the Upgrade notes and Changelog on how to port existing VS sites with this new feature

IMPORTANT NOTICE - Remember to update CHANGELOG.md with description of your change

Contribution and currently important rules acceptance

• I read and followed contribution rules
• I read the TypeScript Action Plan and adjusted my PR according to it
• I read about Vue Storefront Modules and I am aware that every new feature should be a module

[patzick]

This branch is created from #3157, i've also changed base to develop.
Please always create branch from newest develop if you're adding features. (or newest release with stabilisation branches) read more about this here https://docs.vuestorefront.io/guide/basics/release-cycle.html

I'll hold review till #3157 is not merged.

[lukeromanowicz]

It's based on another task so it's hard to tell which files belong to this one and which of them don't. I migth have missed something. The code looks pretty good but again, it needs some refinements here and there

[lukeromanowicz]

could we use consts defined at the top of the file for these statuses?

[Michal-Dziedzinski]

It seems to me that this will not improve readability in this case. Unless I do not see something;)

[pkarw]

@Michal-Dziedzinski can you please apply the suggested changes and resolve conflicts in order of merging this in?

[Michal-Dziedzinski]

It seems to me that we should in some way give the user to know that data on the quantity of products are fetched. It might be worth keeping products of all colors and sizes in memory and update them when switching product parameters/ @filrak @patzick

[pkarw]

I like this change; it's using the stock cache (by using stock/list) so it's cool. As another PR you can optimize it by:

• adding loader right to the stock quantity fields while the data is loading,
• use the volatile data from the product.stock (which is cached in elastic) do display the pre-cached info while loading the dynamic stock quantity

[filrak]

@pkarw I think the loader should be a part of this PR. It's misleading yet simple to add ;)

[pkarw]

Ok! Michał can you add It Please?

[patzick]

Blocked by #3157

[alinadivante]

@Michal-Dziedzinski @pkarw I think we should also inform users about the availability of items in group/bundle products. Now the only thing I see is inactive Add to cart button and there is no information why (e.g. For Sprite Yoga Companion Kit blundle product "Sprite Yoga Strap 8 foot" is not available and therefore the customer can not add this product to the cart)

[patzick]

Just please change state modification from actions to mutations :)

[pkarw]

The strings needs to be passed thru i18n

[patzick]

Just one thing and we're good to go:) nice job!

[pkarw]

The loader should be animated gif/svg - placed on the right side of the input box; no input box name to be changed please :-)

[ArturDivante]

Looks ok on branch :)