How to automatically close the 'added to cart' popup?

Technical Q&A
, ,
1

HI there, does somebody know how I can edit the code of my theme so that the “added to cart” popup that appears after you add something to your cart closes automatically after 3 seconds?

I’m using the Empire theme

My Store URL: https://gokiwii.de

Password: 16012006

The popup in question:

Bildschirmfoto 2023-08-27 um 10.38.38.png
Bildschirmfoto 2023-08-27 um 10.38.38.png1000×1482 143 KB

Thanks in advance for any help

:handshake:

2

Hi @JonasZitzer ,

To set a timer to remove the mini cart, you could follow the steps below:

Open Your theme, select Your current theme => Edit code, and then open file theme.liquid.

Add this code at the end of this file:

<script>
const targetElement = document.querySelector('.site-header.site-header-nav--open');

const observer = new MutationObserver((mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      if (mutation.addedNodes.length) {
        let mini_cart = document.querySelector(".atc-banner--container");
        if (mini_cart) {
          setTimeout(() => {
            mini_cart.remove();
          }, 3000);
        }
      }
    }
  }
});

const config = { childList: true, subtree: true };

observer.observe(targetElement, config);
</script>

I have tested your theme, and everything works well.

I hope this comment will assist you in solving the problem. @JonasZitzer

3

Hi there, thanks for your effort, :slightly_smiling_face: I tested it but when I add another Product it does not add the Product. I don’t want to hide the element completely, but rather just close it so that when you add another product it appears again.