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.
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.
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:
You can add functions to your client object as needed. For example:
Standard methods/functions for the client object
The Infradox XS script libraries check the client object to see if certain functions exist. For example:
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).
The XS website pages include JQuery, so you can also use JQuery in your script. For example:
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
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:
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.
3 login page
4 error page
8 gallery group
9 gallery toplevel
14 invoices (overview)
15 contributors (overview)
17 mailchimp subscribe
19 lost account
20 my account
21 change password
22 reservation/restrictions (overview)
24 confirm usage (overview)
28 keyword index
31 contact us
33 reset account
34 shared lightbox
35 activate account
36 preview fullscreen
37 preview modal
51 … 60 custom1 … custom10