How to Javascript to load a CSS file only for one specific page?

Question

I am working on a shopping cart on Netsuite coded with nested tables... I know it sucks.

Because I only have access to fields to customize the website I need a JS snippet to be able to load a specific CSS file for the shopping cart (to avoid styling the rest of the website)

I have never done that before, here is how I would start:

<script type="text/javascript">
var path = window.location.pathname;
if(path.indexOf('/Cart') !=-1 {
  // load css file
}
</script>

What code would do that for me?

Would a document.write work? document.write('<link rel="stylesheet" type="text/css" href="style.css">'); — Dave Chen
– Dave Chen, Commented Aug 21, 2015 at 23:57

Deryck · Accepted Answer · 2015-08-21 23:59:53Z

3

Aside from closing your if(... with a ), this should get you going:

var styles = document.createElement("link");
styles.rel = "stylesheet";
styles.type = "text/css";
styles.href = "file.css";  // your file's URL
document.getElementsByTagName("head")[0].appendChild(styles);

answered Aug 21, 2015 at 23:59

Deryck

7,6662 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user883356 Over a year ago

Awesome! Works perfectly! Thank you!

Deryck Over a year ago

@user883356 great glad to help :) you should hit the little checkmark to accept the answer too if you don't mind ;)

bknights · Accepted Answer · 2015-08-22 16:28:38Z

0

While testing the url does work there is a better way to add tab and category specific markup.

In your website theme in the "Additions to Head" section add a tag <TAB_ADDONS> and add that to the site builder Tags but with a blank body

Then go to your list of tabs and find the shopping cart tab. Edit it and select Tag Overrides find TAB_ADDONS and enter:

<link rel="stylesheet" type="text/css" href="file.css">

you'd use the root relative url for the href.

This keeps your theme much cleaner and allows arbitrary code inclusions.

answered Aug 22, 2015 at 16:28

bknights

15.6k2 gold badges20 silver badges35 bronze badges

1 Comment

user883356 Over a year ago

Thanks for your answer, it does sound like it is really how Netsuite work, i will try this on Monday. Also, if you have any advice, thoughts on how to style the whole shopping car/account/checkout in Site Builder (not the advanced) i will be really interested! Thanks!

Collectives™ on Stack Overflow

How to Javascript to load a CSS file only for one specific page?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related