Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add quantity input on product page in demo store #1753

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

sergejasadchij
Copy link

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

  • 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

@michenly
Copy link
Contributor

cc @mynameisadamf for ux review

@mynameisadamf
Copy link

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

@michenly
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants