Add to cart bar: Add item to cart on click

[erinemay]

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]

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]

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]

That looks good for the most part. 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]

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

[sterlinghirsh]

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]

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

[sterlinghirsh]

Looks good

[erinemay]

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:

• It appears to happen on products where there is at least one dropdown option.
• When the browser's url bar is hidden, it's not a problem. The user has to do some interacting to get it to disappear.

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]

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]

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.