Mini Cart behaviour "open when adding item" not working on single product page

[vivialice]

Describe the bug

I have the setting to: "open drawer" when item is added. This works fine on the product grid but when I test it on the single product page, the drawer doesnt open. I've recorded a quick video.

To reproduce

Steps to reproduce the behavior:

1. Set cart to "open drawer"
2. Go to shop page and add item to cart
3. Go to a product page and add item to the cart

Expected behavior

Drawer should open any time add to cart button is pressed when this setting is selected.

Screenshots

Screen.Recording.2022-03-29.at.19.45.10.mov

Environment

WordPress (please complete the following information):

• Core version: 5.9.2
• WooCommerce version: 6.3.1
• WooCommerce Blocks version: 7.3.0
• Site language: ENG

Desktop (please complete the following information):

• OS: MacOS 12.0.1
• Browser: Firefox
• Version 98.0.2

[gigitux]

For now, we will not work on this issue. Our goal is to have the blockified Single Page template. In this way, we will be able to provide consistent behavior for the Mini Cart block.

I will not close this issue. Consider it as a reminder.

[onetrev]

I like the ultimate goal of the blockified Single Page template! In the interim though it feels like the notification "XYZ item has been added to your cart." should still appear if you have the mini-cart added to your navigation. Right now it feels broken and the user has very little way to know what happened (other than of course the change to the mini-cart values in the nav).

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[gigitux]

I like the ultimate goal of the blockified Single Page template! In the interim though it feels like the notification "XYZ item has been added to your cart." should still appear if you have the mini-cart added to your navigation. Right now it feels broken and the user has very little way to know what happened (other than of course the change to the mini-cart values in the nav).

Thanks for sharing your feedback. There is a dedicated issue for this (#6621).

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[katiebethbrown]

Adding a +1 to note that we ran into this issue using the Mini Cart block on a Team51 site as well, and it wasn't clear that the mini cart not expanding on single product pages when items are added was the expected behavior.

A small note in the block or documentation explaining where this does/doesn't work may be helpful while we wait for the blockified templates.

[pmcpinto]

@Aljullu does the estimate (8) refer to opening the drawer on the product page or another solution?

[Aljullu]

Yes, this was a tricky one. Currently the Add to Cart button on the Single Product page causes a page refresh, that's why we can't open the Mini Cart drawer on addition. To solve this, we should refactor the logic in WC core so adding to cart from the Single Product page doesn't require a page refresh. After that, making the Mini Cart block open automatically should be fairly easy.

The 8 story points of the estimate should include everything. But I didn't do an in-depth investigation before estimating and considering this needs to be fixed in WC core instead of WC Blocks, I would label this as COU 5, so the estimate is likely not to be very accurate.

[pmcpinto]

Thanks for the clarification.
It would be good to do an investigation to reduce the COU and then evaluate if it makes sense to move forward with this.

[Aljullu]

Sorry for the delay answering. I just found out that WC core already has an issue for this: #36006. IMO, it makes more sense to work on this in the context of WC core instead of WC Blocks because:

1. The changes need to be done in the WC core codebase and, in the end, have nothing to do with the Mini Cart.
2. There are big extensibility concerns that need to be taken into account. While for simple products it might be easy, for other types of products it will probably be a larger effort.

So as the way forward:

1. I'm going to reduce the story points of this issue from 8 → 1, considering it doesn't include the WC core changes.
2. I will mark this issue as blocked by [Enhancement]: Single Product Page - Add To Cart Ajax #36006.

Please let me know if that doesn't look good! 🙂

[pmcpinto]

Yes, thanks!

Who will solve the Core issue? Origami/Kirigami or the Platform team?

[Aljullu]

Who will solve the Core issue? Origami/Kirigami or the Platform team?

I don't know! 🙂 I think both teams would be good candidates to work on this, so it just depends on prioritization.

[tomxygen]

I see this issue and I think the problem is that currently, the Add to cart form block doesn't support Ajax.
That's why, when clicking on add to cart, the page is refreshed.
If you install a plugin like Ajax add to cart for WooCommerce, when clicking on Add to cart, the page won't reload, the product will be added to the cart and the mini cart will slide in from the left just fine.

[nerrad]

@pmcpinto, I think this should be tackled by core product teams (not platform) and assessed for priority. IMO it's important to bring consistent behaviour across all instances of the Add to Cart button (especially in a block environment).

[pmcpinto]

Good point. Which Core team is the best suited to handle this implementation? cc @chrisdesrochers

[nerrad]

Either of Rubik, Kirigami, or Origami. There's overlap for all the teams. It'd probably be good for Origami or Kirigami given their ownership over the Mini Cart block and the connection with that behaviour.