Hi everyone,
I’ve trying for a long time to load a script in a page to change two elements content. It works good on console but I haven’t been able to make it load on the page after loading. This function was writen on vanilla JS. I have tried different solutions that I’ve seen in the community like:
-
Adding the script at the end of the body in the theme.liquid file
-
replacing {{ content_for_header }} (in the of theme.liquid) like says here https://community.shopify.com/c/shopify-design/simple-javascript-code-doesn-t-work-on-product-page/td-p/637309
-
Tried adding the code as a external file on Assets and call it from product-main.liquid defering it like this:
Here is the function that works on devtools but it doesn’t on product page:
I also tried testing with just a simple jQuery code to change the button border color but isn’t working. To make this work i tried adding this to the theme.liquid section:
like it says here: [https://community.shopify.com/c/technical-q-a/faq-script-not-loading/td-p/1614814](https://community.shopify.com/c/technical-q-a/faq-script-not-loading/td-p/1614814) and its not working either.Heres the basic jQuery function that im using to test (this also does work on devTools but not when loading the page):
window.addEventListener(‘load’, (event) => {
let box5 = $( “.rc-option__onetime” );
box5.css( “border”, “3px solid red” );
});
This is the product page: https://flomentum.com/products/3-bottles