Hello @freshtape
To resolve this issue, you can use custom JavaScript to detect when the cart slider is open and then hide the Klaviyo popup. Here’s a solution:
1. Identify the Cart Slider Element: Check the HTML structure of your website to find a unique class or ID for the cart slider (e.g., .cart-slider).
2. Modify the Popup Display: Use JavaScript to monitor the visibility of the cart slider. If it becomes visible, hide the Klaviyo popup.
Here’s an example code snippet:
document.addEventListener('DOMContentLoaded', function () {
const cartSlider = document.querySelector('.cart-slider'); // Replace with your cart slider class
const klaviyoPopup = document.querySelector('.klaviyo-form'); // Replace with your Klaviyo popup class
const observer = new MutationObserver(() => {
if (cartSlider && getComputedStyle(cartSlider).display !== 'none') {
if (klaviyoPopup) klaviyoPopup.style.display = 'none';
} else {
if (klaviyoPopup) klaviyoPopup.style.display = '';
}
});
observer.observe(cartSlider, { attributes: true, attributeFilter: e'style'] });
});
3. Test the Functionality: Add this script to your theme (e.g., in the theme’s JavaScript file) and verify the behavior.
This approach ensures the signup form doesn’t block the cart slider with
out needing to exclude a URL.
If you need help with implementing this, kindly give me a PM for more guidance.
You can avoid showing the form on cart page
Hi @freshtape
Thank you for posting in the Community!
As @MANSIR2094 and @ali786 mentioned. There is a way to go about this.
I have tried the following on one of our clients, which worked. I hope it works for you - It’s individual from client to client.
-
Identify the cart element Class or button ID:
- Inspect the cart slide-in element on your website using your browser's developer tools (right-click the cart > Inspect).
- Note down the unique class or ID of the cart element.
-
Modify Klaviyo signup form behavior:
- Klaviyo allows you to use custom JavaScript to control when a form appears. You'll need to check for the visibility of the cart element and disable the form if it's open.
-
Add custom JavaScript to your Sites
- Insert the following script into your site's custom JavaScript file or theme file where you manage your site-wide scripts:
document.addEventListener('DOMContentLoaded', function () { // Select the cart element var cartElement = document.querySelector('.cart-slide-in'); // Replace with your cart's class or ID // Function to check if the cart is visible function isCartVisible() { return cartElement && cartElement.offsetWidth > 0 && cartElement.offsetHeight > 0; } // Listen for the Klaviyo form display event document.addEventListener('klaviyoFormRender', function (event) { if (isCartVisible()) { // Prevent the form from displaying event.preventDefault(); } }); // Monitor cart visibility dynamically (if needed) var observer = new MutationObserver(function () { if (isCartVisible()) { Klaviyo.hideForms(); // Hide any currently visible Klaviyo forms } }); if (cartElement) { observer.observe(cartElement, { attributes: true, childList: true, subtree: true }); } });
Hope that helps! :-)
Christian Nørbjerg Enger
Partner & CPO
Web: Segmento.dk
LinkedIn: @christianfromsegmento
Voldbjergvej 22b, 8240 Risskov
To prevent a Klaviyo signup form from displaying when your cart slides in, implement custom JavaScript that detects the cart's visibility and hides the form accordingly. Here's how:
-
Identify the Cart Slider Element: Inspect your website's HTML to find the unique class or ID of the cart slider (e.g., .cart-slider).
-
Modify the Popup Display: Use JavaScript to monitor the cart slider's visibility and hide the Klaviyo popup when the cart is open.
Example code snippet:
-
Copy code
document.addEventListener('DOMContentLoaded', function () { const cartSlider = document.querySelector('.cart-slider'); // Replace with your cart slider class const klaviyoPopup = document.querySelector('.klaviyo-form'); // Replace with your Klaviyo popup class const observer = new MutationObserver(() => { if (cartSlider && getComputedStyle(cartSlider).display !== 'none') { if (klaviyoPopup) klaviyoPopup.style.display = 'none'; } else { if (klaviyoPopup) klaviyoPopup.style.display = ''; } }); observer.observe(cartSlider, { attributes: true, attributeFilter: ['style'] }); });
-
Test the Functionality: Add this script to your theme's JavaScript file and verify that the signup form hides when the cart is open.
This approach ensures the signup form doesn't obstruct the cart slider without relying on URL exclusions.
Hi @freshtape
Did you get this solved? :-)
Christian Nørbjerg Enger
Partner & CPO
Web: Segmento.dk
LinkedIn: @christianfromsegmento
Voldbjergvej 22b, 8240 Risskov
