-
Hi,
This might be somewhat hard to understand, but I will try my best to explain.
I am noticing strange behaviour when adding the core WooCommerce Mini Cart block to the navigation using a Block Element and the hook “menu_bar_items”. The WC Mini Cart drawer can be called to slideout (block settings) when clicking “add to cart” button on the shop / archive page, however when the hook “menu_bar_items” is used clicking “add to cart” button will open the slideout drawer twice.
This is all core WooCommerce features, meaning that when you have a “add to cart” button present on the products on the shop / archive page with the “Enable AJAX add to cart buttons on archives” enabled, the WC Mini Cart block drawer will slideout if you activate this function in the block settings. See images for reference:
https://prnt.sc/k3U6-zGKnFWU
https://prnt.sc/0pxgO3ekVh_AI have done some testing and determined this only happens when you either use the hook “menu_bar_items” (might be others as well) or if you try separating the WC Mini Cart block into two Block Elements, one for desktop, one for mobile.
If you use only one Block Element for this and do not use “menu_bar_items”, e.g. instead use “inside_navigation”, the WC Mini Cart block drawer will only slideout 1 time. Working as expected.
Only problem you have now is that the WC Mini Cart drawer block is not displayed on mobile.
One would think this could easily be fixed by adding another Block Element only for mobile. However, when adding another Block Element in a hook for mobile e.g. “inside_mobile_header” to display the WC Mini Cart block on mobile devices, the same problem occurs as when using only 1 Block Element and “menu_bar_items”, meaning the drawer slideout twice.
This would mean that the hook “menu_bar_items” somehow repeats itself and when manually simulating it using two hooks it creates the same problem, this is logically since you are adding the same Block Element twice, although with different hooks. You can easily solve this by using any other hook e.g “after_navigation” and only 1 Block Element, this will display the drawer on both desktop and mobile, however this will not look that great on mobile, but it will work as expected.
So the question is why does only “menu_bar_items” hook create this issue? Same as when duplicating the Block Element for mobile and desktop.
To demonstrate this I setup a staging site with only WooCommerce and GP Premium plugin and 1 Block Element adding the WC Mini Cart block in “menu_bar_items”:
https://arrestact.s3-tastewp.comWen you click “add to cart” button on the shop page it will open the WC Mini Cart drawer slideout 2 times, meaning you have to close it twice.
-
Hi there,
Does changing the hook to
after_header_contentwork? -
Hi Ying,
I changed the hook to “after_header_content”, and yes it “works” but it looks a bit strange on mobile: https://prnt.sc/l8tAxDM2ThmQ
-
Try adding this CSS:
@media(max-width: 768px) { nav#site-navigation:not(.toggled) { flex-basis: 0; display: none; } nav#site-navigation { order: 4; } } -
Yes, that works on the staging site 🙂 nice work.
Now things get a little more complex, because I am implementing this on a client site.
The client site has different GP settings and mobile header “on”, so the solution for the staging site does not work in this scenario.
We have to come up with some solution that make it work on the client site as well..
I guess using mobile header “on” is something we should switch off since this will cause issues, because when using mobile header “on” we need to add the hook either in “menu_bar_items” or “inside_mobile_header” to get it to display on mobile, but this will cause the slideout to show twice because the first hook does this and the second will force us to use duplicate Block Elements to make it show on both desktop and mobile.
I also tried using “after_primary_menu” on the client site, but it seems this will also cause the WC Mini Cart to slideout twice.
Strange that some hooks causes this.
-
Yes, the mobile header needs to be turned off.
I assume the issue is related to the JS of the cart block, it seems to be sensitive to the location of the block. I don’t think there’s much we can do.
-
Yes, seem to be a bug in the GP hooks causing issues with the WC Mini Cart block JS as WC block use preloading.
But I understand that fixing any potential issues with the core WC blocks is of course limited.
*Edit* Turning off mobile header fixes this issue completely and all hooks in the Block Element is working as expected when using the WC Mini Cart block.
-
*Edit* Turning off mobile header fixes this issue completely and all hooks in the Block Element is working as expected when using the WC Mini Cart block.
Glad to hear that 🙂
- You must be logged in to reply to this topic.