isolate the action of Javascript and CSS in the template.

New Member
2 0 0

I created a new template there in the code session.
I need to isolate the action of Javascript and CSS to work only in the template, and do not leak to the header and footer.
It's possible ? I was using a feature called Shadow DOM from Javascript, but I'm having a lot of work ...
Is there an easier way to do this ?

 

Example:


When in CSS I program for all <p> tags to be orange:

P {
color: orange;
}

==============
and

in Javascript for all <p> tags have black background color:

var x, i;
  x = document.querySelectorAll ("p");
  for (i = 0; i <x.length; i ++) {
    x [i] .style.backgroundColor = "black";
  }

 

It works, but the problem is that it also works in the header and footer <p> tags, I need it to work only in the template session.

0 Likes
Excursionist
61 10 13

Hi Sepulnation,

 

Have you tried adding a custom id or class to you template wrapper? This way you can make sure your custom code will only be executed within your template's boundaries.

 

Example: 

 

template:

<div id="my-custom-template">
....
</div>

css:

#my-custom-template p {
color: orange;
}

js:

var x, i;
  x = document.querySelectorAll ("#my-custom-template p");
  for (i = 0; i <x.length; i ++) {
    x [i] .style.backgroundColor = "black";
  }

 

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
1 Like
New Member
2 0 0

Hello Vellir, thanks for your attention.

In my case, that would not be enough, because my CSS and Javascript documents are too long.

If I do this manually, it will take days and there is still a risk of conflict with Shopify's standard CSS and Javascript files.
I need to isolate the model file in a practical way without conflicts,

I now find that Shadom DOM does not isolate Javascript, only CSS 🤦 :(

 

 

0 Likes