hydrogen icon indicating copy to clipboard operation
hydrogen copied to clipboard

Add quantity input on product page in demo store

Open sergejasadchij opened this issue 1 year ago • 3 comments

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 reached It 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?

  • Go to a product page
  • Change the product quantity using the buttons + - or in the input field.
  • Check limits
  • Check the total change on button AddToCart
  • Add the product to the cart and check the quantity
  • Check with browser dark theme

Checklist

  • [x] I've read the Contributing Guidelines
  • [ ] I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • [ ] I've added a changeset if this PR contains user-facing or noteworthy changes
  • [ ] I've added tests to cover my changes
  • [ ] I've added or updated the documentation

sergejasadchij avatar Feb 13 '24 18:02 sergejasadchij

cc @mynameisadamf for ux review

michenly avatar Feb 15 '24 19:02 michenly

This is fine, thoughts here @juanpprieto? I believe the original demo store had a quantity selector then removed.

mynameisadamf avatar Feb 16 '24 23:02 mynameisadamf

@blittle reminder to move this PR when we move demo-store

michenly avatar Feb 20 '24 20:02 michenly

@sergejasadchij since we move demo store to a different repo. I am going to close this. Feel free to open again on https://github.com/Shopify/hydrogen-demo-store (I truly wish github have a feature where I can move it over 🙏 )

michenly avatar May 29 '24 18:05 michenly