Add quantity input on product page in demo store #1753
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Hydrogen does not currently have product quantity input on product page that is available in the native Shopify
WHAT is this pull request doing?
This implements QuantityInput to change product quantity to be added to the cart
The AddToCart button displays the total including quantity
When user clicks the button, the specified quantity of the product is added to the cart (and also changed in productAnalytics)
There are limits set on the minimum and maximum quantity. The minimum is set to 1, the maximum is equal to the available quantity of the product.
The
+
and-
buttons become inactive when mimits are reachedIt is also not possible to enter values outside the limits in the input field
Note. There's an additional permission:
unauthenticated_read_product_inventory
access inventory. It is not enabled by default,so
quantityAvailable
not included in PRODUCT_QUERY by dafault and the maximum limit does not apply.It possible to configure this from Storefront settings in Hydrogen application and include
quantityAvailable
field in PRODUCT_VARIANT_FRAGMENT of PRODUCT_QUERY.HOW to test your changes?
+
-
or in the input field.Checklist