Adding a JScript file to a child theme

Jan 29, 2011 at 4:19 AM

When one creates a child theme as described in "Customizing the Default Theme" (http://www.orchardproject.net/docs/Customizing-the-default-theme.ashx) what is the proper way to add additional JavaScript?

I assume one would add a JScript file to the new theme's Scripts folder, but that does not seem to be enough to cause it to be sent to the browser. What else must be done?

Coordinator
Jan 29, 2011 at 4:56 AM

You also need a web.config in the folder that allows the files to be served. You can copy one over from another module's scripts folder (or content, or style, doesn't matter).

Jan 29, 2011 at 4:59 AM
Edited Jan 29, 2011 at 5:00 AM
bertrandleroy wrote:

You also need a web.config in the folder that allows the files to be served. You can copy one over from another module's scripts folder (or content, or style, doesn't matter).

The web.config file is automatically placed in the folder when one uses the Code Generation feature of the Orchard command-line utility.

Is that all it should take to cause the script to be included in the rendered HTML?

 

Coordinator
Jan 29, 2011 at 5:22 AM

Well, you need a script tag to get into the page, of course. You get that to happen by calling Script.Include. Look for examples for that throughout the source code.

Jan 29, 2011 at 10:51 AM
bertrandleroy wrote:

Well, you need a script tag to get into the page, of course. You get that to happen by calling Script.Include. Look for examples for that throughout the source code.

That worked, thank you.

What I did was copy Layout.cshtml from TheThemeMachine's View folder and paste it into my Theme's View folder (since my theme is a Child Theme of The Theme Machine). Then I edited my copy of Layout.cshtml to add the Script.Include in the "/* Global includes for the theme" section. As an aside, Layout.cshtml in the theme TheAdmin is an example of how to include scripts.

I am left with another question however:

What is the difference between Script.Include and Script.Require?

Coordinator
Jan 31, 2011 at 6:44 PM

Script.Include will include the script directly from its URL whereas Require will include by name (such as "jquery"). Require is more appropriate for scripts that are likely to be shared by more than one module. jQuery is clearly in that category, but a custom script that you include with a widget would not. Does this help?

Jul 25, 2011 at 10:36 AM

Hi all!

            i am also facing a problem with scripts. I created a scripts.js file in the scripts folder of my theme. and in the Layout.cshtml file, i used Scripts.Require to include JQuery and Scripts.Include to include the Scripts.js file. BUT NO USE! the script is not working!  pls tell me what am i doing wrong here.

Coordinator
Jul 25, 2011 at 8:28 PM

What exactly do you mean by "the script is not working"? Are you seeing an error message? What do you see in Firebug (or the equivalent on your browser) in the network tab?