Using Javascript in your pages

You can add your own Javascript code, which will be executed after the default XS script has executed upon page load.

Adding Javascript to your pages is not hard, but it does require certain skills. You need to know Javascript, JQuery, HTML and CSS. Please read the following articles first.

Using the code editor
Using custom CSS

Also read Working with the Infradox script library to learn how you can use script on specific pages and/or for specific functions – such as subscriptions, the price calculator, thumbnail pages, the cart and order pages and so on.

If you want to be eligible for support (in case there are problems with your script), then you must use proper syntax, variable names and indentation.

Adding your Javascript

You can add script to any HTML page, but the system has a standard object called client.js that will be included on all client facing pages if you enable it. And it is executed after the default XS script which is important for proper functioning of your website. The client.js object is described in this article.

Go to Site configuration and click on Code editor. Next choose Client javascript in the dropdown box at the top of the page. If no script has been added before there will be no code in the editor. Otherwise your code will show and on the top right you’ll find information about who made the most recent changes and when. Click on revision to display a list of revisions. This list will allow you to restore previous versions e.g. in case you’ve made a mistake.

Your pages will look for an object with the name client, and if the object exists, its init() function will be called when the page is completely loaded and after the Infradox XS script has finished executing. Therefore, your script must look like this:

var client = {
    init: function() { 
          // enter your script here
     }
};

You can add functions to your client object as needed. For example:

var client = {
    init: function() {
         var obj=this;
         obj.sayhello();
         obj.saygoodbye();
     },

     sayhello: function() {
          alert('hello');
     },

     saygoodbye: function() {
          alert('goodbye');
     }
};

Standard methods/functions for the client object

The Infradox XS script libraries check the client object to see if certain functions exist. For example:

beforepreview: function(modal) {
   alert('called just before opening/loading a preview, modal is either 1 or 0')
}

afterpreview: function(modal) {
   alert('called after opening/loading a preview, modal is either 1 or 0')
}

onlayoutdialog: function() {
   alert('called before displaying the page layout dialog')
}

You can use the onlayoutdialog function to e.g. hide certain options when in mobile mode. E.g. to check if the mobile menu button is showing, and if it is to then hide all view styles from the dialog except styles 0 and 2 (the code example below uses JQuery).

var client = {
   init: function() {
      ...
   },

   onlayoutdialog: function() {
       var tr=$("#pagelayoutmenu tr.tsize").filter(".inuse1").not(".vstyle0,.vstyle2");
       if($("#mobilemenubutton").is(":visible")) {
          tr.hide(); // hide viewstyles except 0 and 2
       } else {
          tr.show();
       }
    }
};

Using JQuery

The XS website pages include JQuery, so you can also use JQuery in your script. For example:

$("#quicksearchtext").css({"border":"1px solid green"}).val("Enter keywords here...");

If you want to learn JQuery, then please visit learn.jquery.com.

Common uses and pitfalls

Besides using script to add or improve functions, it can also be used to hide or position elements that you can’t change with the backoffice settings. It is recommended that you check if there are settings for something you want to achieve, before adding script for it. For instance, to hide certain fields on the preview pages, to change the color of certain field labels and so on – you should use the metadata repository, not script.

The client object script that you add to the code editor is included and executed on every client facing page. Especially if you use a lot of script to manipulate your pages, you should include code so that certain script is only executed on pages where it is relevant.

There are many ways to find the page that is displaying. You can use the settings object to read the page property, you can use JQuery to get the body id, and every page has a unique xst id for use in custom templates.

Using the settings object

if(settings.page==="site\\home.html") {
     alert("You are on the home page");
}

Using the body id

Most pages have a unique body id which you can alternatively use to determine the page and to execute relevant script only. Use a code inspector (i.e. Developer tools in Chrome) to find out which elements and id’s are used.
For instance, the preview page has a body id “preview”. To execute certain script only on the preview page you can use:

if($("#preview").length) {
     // execute this when on the preview page
}

Using the xst id in your custom templates

Below is an overview of the page/template id’s that you can use in your custom templates. E.g.

<?xs if server('xst==10') { ... } ?>

and

<?xs var('xst') ?>

1 home
2 searching
3 login page
4 error page
5 searchrequest
6 quoterequest
7 gallery
8 gallery group
9 gallery toplevel
10 cart
11 order/download
12 orders
14 invoices (overview)
15 contributors (overview)
16 explore
17 mailchimp subscribe
18 register
19 lost account
20 my account
21 change password
22 reservation/restrictions (overview)
23 following
24 confirm usage (overview)
25 tearsheets
26 prints
27 about
28 keyword index
29 terms
30 privacy
31 contact us
32 help
33 reset account
34 shared lightbox
35 activate account
36 preview fullscreen
37 preview modal
50 custom
51 … 60 custom1 … custom10