Mini-cart closing on clicking the "remove" link

Question

Hey,I am battling with one last thing with my cart implementation.Right now, when I click the "remove" button on any item in the mini-cart, the cart closes after a delay (likely when the new cart content is done fetching), even if there were more items in the cart. The cart closes even if there are other, completely different products in there.I am not sure where this is coming from - can't see anything that might be causing that in the code.The cart code has been modified a bit as @jonas.halbstark knows, but there shouldn't be anything in this modification to cause the issue.The store address is https://magnurs.myshopify.com/, password is magnurs. Video reference attached.

jonas.halbstark · Answer

Hi @Georgy Rakita, thats a strange behavior. Can you try using just a div instead of a button element? In the past we run into similiar issue.

Georgy Rakita · Answer

@jonas.halbstark , thanks for your super quick reply!You are right, this helps! Do you have an idea what it could be? Semantically & for accessibility this should be a button...

Georgy Rakita · Answer

Something with it being a button interfering with native Webflow's code for the dropdown?

jonas.halbstark · Answer

something like this could be

jonas.halbstark · Answer

you can build your own dropdown element.. as a quick solution

Georgy Rakita · Answer

The odd thing is that the cart doesn't close straight away - instead, it seems to be waiting for the items to load, and then closes.

jonas.halbstark · Answer

but we will take it on our list

Georgy Rakita · Answer

Which kinda makes it look like it's something to do with the mini-cart logic rather than webflow's code.

Georgy Rakita · Answer

Haha, at this stage it will probably take way to long, but definately and option for the future build!

jonas.halbstark · Answer

i wouldnt say that.. creating a popup with alpine for example can be achieved very fast

Georgy Rakita · Answer

I already have some CSS animation logic applied to this dropdown & search & one custom dropdown, all set up in the same way 🙂

Georgy Rakita · Answer

Claude says this:Will try to investigate in this direction and if not, will leave it as a div for now

Georgy Rakita · Answer

@jonas.halbstark found a solution!Just had to add data-wf-ignore="true" to the button and it works!

Georgy Rakita · Answer

Looks like it was indeed to do with the way Webflow works with the dropdown.

jonas.halbstark · Answer

ah very nice! 🙂

Georgy Rakita · Answer

Now it's a fully working mini-cart, with properties & nice animations!Btw guys, do you plan to have any Showcase for liquify? Would be glad to share a project there, I think it turned out very nice.

Georgy Rakita · Answer

Thank you very much @jonas.halbstark for your help and quick response!

jonas.halbstark · Answer

yes we are working on this 🙂 you can publish it here in discord and if you want it would be nice to add it on our website 🙂

jonas.halbstark · Answer

store looks very nice! 🙂

Georgy Rakita · Answer

UPD: no, the data-wf attribute didn't actually work, it just didn't update from my previous attempt to change it to a link.

Will stick with the div solution with proper aria-attributes, instead. Thanks!

jonas.halbstark · Answer

Ah sad. We will try to get around the webflow closing script.

Georgy Rakita · Answer

Hey @jonas.halbstark ! Strange, but I am getting this issue again, this time with a div for the "Remove" link. Do you know what it might be?

Georgy Rakita · Answer

UPD: With many hours of different tests, turns out that adding [tabindex="0"] is what causes it... Go figure...

jonas.halbstark · Answer

@InsaneKarma webflow has some closing scripts on theire site. In the past it helped to convert the element to a div/text. @Georgy Rakita what was you final solution?

Welcome to the Liquify Community

Mini-cart closing on clicking the "remove" link