Referencing my external js within cart customization

This is a bit wordy but… on my site I have custom js that toggles the class name .link-shrink to the dom element <div class="cursor"></div> whenever I mouseover/mouseleave any element with the class name .cursor-shrink.

Using snipcart customization templates I added the class name .cursor-shrink to the button-primary element. This should in theory add the class .link-shrink to my <div class="cursor"></div> element, but it doesn’t work.

So my question is, should my javascript be working within the cart? or do I need to do something to reference the js?

Hi @fred

What could be the issue is that the cart does not exist on page load, it is created only when it appears, and destroyed if closed, so you would need to run your code every time the cart is opened.

Can you give us more details of what you want to achieve? Maybe we have an alternative solution.


ok so this stuff isn’t specific to snipcart but hopefully you have an idea.

The element <div class="cursor"></div> is a custom cursor styled in css, it follows the mouse movements with js.

.link-shrink is a css class with a scale transform 0.5. When adding this class to my cursor div it applies the transform and creates a transition style animation which shrinks the cursor.

The way this happens is any element with the class .cursor-shrink triggers the adding and removing of link-shrink on my cursor div.

So here is the js:

//my cursor
let mouseCursor = document.querySelector(".cursor");

//elements with class cursor-shrink trigger adding the class link-shrink
let navLinks = document.querySelectorAll(".cursor-shrink");

//tracking the mouse movements
function cursor(e) { = e.pageY + 'px'; = e.pageX + 'px';	

//toggling link-shrink class on elements with .cursor-shrink
navLinks.forEach(link => {
	link.addEventListener("mouseleave", () => {
	link.addEventListener("mouseover", () => {

So this works perfectly well anywhere else on my site where I have elements like <div class="cursor-shrink"> if I mouse over link-shrink is added. I tried simply copying this bit of js inside the snipcart-templates.html but that didn’t work. Not sure exactly what to do.

I feel like all of the above is maybe extraneous information.

I guess the core of the question is how can I write js that snipcart will pick up? I saw the Javascript SDK seems to allow for that sort of thing, but I’m a bit confused about the implementation, and not sure if it applies to my case. The other thing is my javascript is compiled with npm is it possible that it is part of the problem?