Wacky Cursor UI open/close Side Snipcart Nav

Support
#1

Does anyone have ideas as to why my ‘Snipcart Test Environment’ is acting wacky on mouse movements …? See example here: YouTube: https://www.youtube.com/watch?v=c16uDCOfz5o

See my testing here: Snipcart Test Environment : https://deluxeyum.com/
Version 3.x Setup Installation: https://docs.snipcart.com/v3/setup/install…

Please advise. And thank you! :grinning:

Here is my code so far:

Snipcart Test Environment body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #131315; } .container { max-width: 800px; margin: 50px auto; padding: 20px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .product { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #ccc; } .product img { max-width: 100px; margin-right: 20px; } .product-info { flex: 1; } .product button { background-color: #007BFF; color: #fff; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; } .product button:hover { background-color: #0056b3; } 
	<header>
		<button class="snipcart-customer-signin">My account</button>
			<br>
			<br>
				<button class="snipcart-checkout">Click here to checkout</button>
					<span class="snipcart-items-count"></span>
						<span class="snipcart-total-price"></span>
	</header>
			<br>
			<br>
	
    <h1>Snipcart Test Environment</h1>
    <div class="product">
        <img src="https://deluxeyum.com/products/glass/img/0690/sm/01.jpg" alt="Sample Product">
        <div class="product-info">
            <h2>Glass Vessel</h2>
            <p>$800.00</p>
        </div>
        <button 
            class="snipcart-add-item"
            data-item-id="0690"
            data-item-name="Glass Vessel"
            data-item-price="800.00"
            data-item-url="https://deluxeyum.com/products/glass/0690/"
            data-item-description="Approximately 8 x 15 in – Transparent blue with white, red, orange, and pink accents, featuring a blue lip wrap."
            data-item-image="https://deluxeyum.com/products/glass/img/0690/sm/01.jpg">
            Add to Cart
        </button>
    </div>
</div>

<div id="snipcart" hidden></div>

<script>
    window.SnipcartSettings = {
        publicApiKey: 'ZWFjOTc4NzktMWIyYi00ZTU4LWFlOGQtMmE0NGFhNGY5Yjgw',
        loadStrategy: 'on-user-interaction',
        modalStyle: 'side',
        currency: 'USD',
        version: '3.7.1',
    };

    (function() {
        var c, d;
        (d = (c = window.SnipcartSettings).version) != null || (c.version = "3.0");
        var s, S;
        (S = (s = window.SnipcartSettings).timeoutDuration) != null || (s.timeoutDuration = 2750);
        var l, p;
        (p = (l = window.SnipcartSettings).domain) != null || (l.domain = "cdn.snipcart.com");
        var w, u;
        (u = (w = window.SnipcartSettings).protocol) != null || (w.protocol = "https");
        var m = ["focus", "mouseover", "touchmove", "scroll", "keydown"];
        window.LoadSnipcart = function() {
            if (document.querySelector('#snipcart script')) return;
            let t = document.getElementsByTagName("head")[0];
            let script = document.createElement("script");
            script.src = `${window.SnipcartSettings.protocol}://${window.SnipcartSettings.domain}/themes/v${window.SnipcartSettings.version}/default/snipcart.js`;
            script.async = true;
            t.appendChild(script);
        };
        document.addEventListener("DOMContentLoaded", () => {
            m.forEach(event => document.addEventListener(event, window.LoadSnipcart));
            setTimeout(window.LoadSnipcart, window.SnipcartSettings.timeoutDuration);
        });
    })();
</script>
#2

Hello, everyone out in the Snipcart UI Universe!
Sebastien from Snipcart Support kindly pointed out that I had too many cursor UI interactions in my script. I’ve simplified it to this, and now it works perfectly!

Now I am using only “focus” and everything seems to work.
(u = (w = window.SnipcartSettings).protocol) != null || (w.protocol = “https”);
var m = [“focus”];

Good Day! Tim

1 Like