iFixit / react-commerce

A work in progress prototype for iFixit e-commerce functionalities.
https://react-commerce.vercel.app
2 stars 0 forks source link

Add to cart bar: Add item to cart on click #1484

Closed erinemay closed 1 year ago

erinemay commented 1 year ago

Currently, clicking on Add to Cart from the bar scrolls back up to the Add to Cart button on the page. Single variant page: https://www.ifixit.com/products/magnetic-project-mat Multi variant page: https://www.ifixit.com/products/google-pixel-7-screen-genuine

I agree it should just add if there's only a single variant. Even with multiple, since they already have one selected, I think it could be fine to just add that, as long as we indicate what the selection is like "iPhone 7 Battery / Fix Kit" or something. I think we have some canonical formatting of the variant name in a metafield or something, but even if we don't, it should be doable.

https://ifixit.slack.com/archives/C01K32B4FPX/p1679076491807469?thread_ts=1679074834.298269&cid=C01K32B4FPX

cc: @sterlinghirsh @dhmacs @mmarcon91

mmarcon91 commented 1 year ago

If we want to add the product directly with the fixed bar, we need to find a way to make it clear what product is being added. I wouldn't go and make two different behaviors based on whether there is a single variant or not, because if a user has already used that button they will always be expected to do the same action.

I will work on the mockup to figure out how to make the selected variant clear

mmarcon91 commented 1 year ago

I tried to find a solution to make the variant understood, another main information was missing, the price. I added it in the add to cart button.

We could put the review detail only when there is a single variant.

Updated mockup: https://www.figma.com/file/BolmFORO6ZfHXePOSyEGSS/iFixit---Page-sections?node-id=91-9490&t=QeFBn0AKp66lIkQ1-4

sterlinghirsh commented 1 year ago

That looks good for the most part. image This one is kind of weird since it says Manta Driver Kit twice. I'm guessing we'll want to say some other thing like "Fix Kit / New" on the second line, but otherwise I think it works. We might even be able to get away with having the reviews there was well, especially on desktop where it's wider.

mmarcon91 commented 1 year ago

Updated, it was a typo. https://www.figma.com/file/BolmFORO6ZfHXePOSyEGSS/iFixit---Page-sections?node-id=91-9490&t=x4lnhL8FxRRghpZC-4

sterlinghirsh commented 1 year ago

Makes more sense. I'm curious about putting the price in the second line rather than the add to cart button. I imagine we'll want to still have some indicator for discounted / pro pricing, but it might be a little too tight to do a crossed-out number. I like the way it looks with reviews + number of reviews, but we might not have enough room for more info on mobile. We might want to try a few different options over time anyway, so I'm flexible on whichever one we do first.

mmarcon91 commented 1 year ago

I created another version with the price instead of the variant name.

sterlinghirsh commented 1 year ago

Looks good

erinemay commented 1 year ago

I'm seeing quite a few iPhone models where the viewport is too short that clicking on the Add to cart bar's button doesn't take the user to the actual button.

This is the iPhone 13, but I confirmed it's happening on the 14 Pro, 13 Pro.

Pixels and a some iPhone models, like the 14 Plus, appear to be long enough (compared to their width) that clicking on the Add to cart bar's button will show the actual Add to cart button.

Some UX recordings:

Fix the world T-shirt https://www.ifixit.com/products/fix-the-world-t-shirt

https://user-images.githubusercontent.com/72166715/231890558-82599572-0269-499d-a686-e33554f40681.mp4

RBT https://www.ifixit.com/products/repair-business-toolkit

https://user-images.githubusercontent.com/72166715/231890794-15969e31-6bf9-4385-aa42-64232dbdc3d7.mp4

Slightly different experience on my Pixel where clicking on the button shows just enough of the real Add to cart button that the bar isn't shown, but it's still a little odd. This is the Fix the World shirt with two dropdown options.

https://user-images.githubusercontent.com/72166715/231893935-16419545-6ad4-4290-9ad5-ad8cad127e8c.mp4

erinemay commented 1 year ago

It seems like all this trouble is coming when the add to cart bar is shown above the real add to cart button. Do we need to show it until the user scrolls past the real button?

erinemay commented 1 year ago

Made a new issue for this. https://github.com/iFixit/react-commerce/issues/1583

This issue can stay focused on adding the item on click.