About using loading js on collection page after using filter

Solved

About using loading js on collection page after using filter

teddybear_d9
Shopify Partner
11 1 2

Hello!

I'm using the Prestige theme and added some buttons and JS on the collection page when someone clicks on the button the changing image of the product is present, but when I'm using some filters on this page like show me some category, etc. the JS on not work, I think it's because is loading the products in ajax every filter, and the script doesn't know about new elements loading, I also trying putting the JS on collection page and collection-main div and not in the header only but it's still not working, of course, I'm using "DOMContentLoaded".

Thank you!

Accepted Solution (1)
teddybear_d9
Shopify Partner
11 1 2

This is an accepted solution.

Nevermind I fix this issue with event.target.matches

<script>
document.addEventListener('DOMContentLoaded', function() {
   document.addEventListener('click', function(event) {
     if (event.target.matches('.click')) {
        console.log("click me!");
     }
    });
});

</script>

View solution in original post

Replies 3 (3)

PaulNewton
Shopify Partner
6380 583 1358

@teddybear_d9 Other people do not have the same setup as you nor have they made the same code changes.

They cannot see what you see or know what you know unless you communicate concretely always keep that in mind.

ALWAYS Provide Store url, theme name, example urls, and storefront-pass if applicable.
ALWAYS provide publicly accessible inspectable examples.
READ: https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/2254458 

 

Make the effort to make sure someone else can understand the steps and replicate what you are trying to describe with as little effort as possible on the contributors part.

 

Good Luck.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


teddybear_d9
Shopify Partner
11 1 2

the JS script on theme.liquid 

teddybear_d9_0-1704373967301.png

 

html on prodcut-card

teddybear_d9_0-1704373202906.png

screen video 

 

teddybear_d9
Shopify Partner
11 1 2

This is an accepted solution.

Nevermind I fix this issue with event.target.matches

<script>
document.addEventListener('DOMContentLoaded', function() {
   document.addEventListener('click', function(event) {
     if (event.target.matches('.click')) {
        console.log("click me!");
     }
    });
});

</script>