Exit Intent Pop Up - Show only when products are present in the cart

[user14944]

As the title explains, is there any way how to make the exit intent pop up show only to users who have already added products to their cart/basket.

This would help us specifically target people who have shown interest in making the purchase.

Thanks

[Max]

Hey there and welcome to the Community, @user14944

Not sure if it’s possible, but I’ll be happy to discuss it with the devs. I’ll update you tomorrow

[user14944]

Brilliant, thank you so much!

[Max]

Hi @user14944

Devs confirmed that it’s possible to implement this customization. They’ll try to come up with a custom code for you, and I’ll update you once it’s ready

[user14944]

That’s great!

Please make sure it works on both desktop and mobile.

It will be a fantastic feature to have, so as not to bother users who haven’t shown intent of purchasing yet.

Looking forward to it, Thanks

[Max]

Thank you for waiting, @user14944!

Here is the solution from our devs:

(() => {
  const HAS_ITEMS_IN_CART_COOKIE_NAME = 'woocommerce_items_in_cart';

  let popupWasAlreadyOpen = false;

  document.addEventListener('mouseleave', () => {
    const hasItemsInCart = document.cookie.includes(HAS_ITEMS_IN_CART_COOKIE_NAME);

    if (!popupWasAlreadyOpen && hasItemsInCart) {
      popupWasAlreadyOpen = true;
      widget.show();
    }
  });
})();

Just disable the Exit Intent trigger and this code to the Custom JS field on the Settings tab of your widget’s settings.

GIve it a try and let me know if it worked

[user14944]

Hi Max, thank you for getting back to me.

2 things;

1. By disabling exit intent trigger, will it effect how the pop up perceives an exit intent?

2. Currently I use the below custom JS so that the exit intent pop up so that it works better on mobile. Can I just add your code to this code below?

// Function to show the Elfsight widget using the provided API method
function showElfsightPopup() {
if (typeof widget !== ‘undefined’ && widget.show) {
widget.show();
}
}

// Variables to track scroll position
let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
let scrollThreshold = window.innerHeight * 0.35; // 35% of the viewport height

// Detect upward scrolling
window.addEventListener(“scroll”, function() {
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (lastScrollTop - currentScroll > scrollThreshold) {
showElfsightPopup();
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
}, false);

// Detect back button press on mobile
window.addEventListener(“popstate”, function() {
showElfsightPopup();
});

// Push a new state into the history to enable back button detection
history.pushState(null, null, window.location.href);

// Detect visibility change event
document.addEventListener(‘visibilitychange’, function() {
if (document.visibilityState === ‘hidden’) {
showElfsightPopup();
}
});

[Max]

Hi there @user14944

Apologies for the delayed response!

The script will trigger the Exit Intent feature, so you don’t need to have it enabled in the settings,

Our devs have also taken into account your first code and the new code won’t conflict with it. Check it out and let me know how it worked

[user14944]

Hi Max, thank you so much for the prompt support, will be testing it and get back to you with feedback

[user14944]

Hi Max, Hope you are well!

We have noticed that this pop up keeps popping up both after closing and also after applying the coupon, even when we set ‘Frequency - Show once’. Is there something we can do for this please? as it gets quite annoying closing it and reappearing.

Thanks

[Max]

Hi there, @user14944

I’ve checked your website and couldn’t replicate the issue. Could you please send me a vide screencast of what you see?

I’ll be happy to look into this for you