You are here: Designer > Features > Scripting > Loading a Snippet
 

Loading a snippet via a script

Instead of dragging it into the content directly, it is possible, and often very useful, to load a snippet dynamically. Create a script (see Write your own scripts) and in the code, use the following function:

results.loadhtml(‘snippets/nameofthesnippet.html’)

This function will insert the snippet in the content at any position where the script's selector is encountered.

For more examples, see loadhtml().

Make sure that the file name is exactly the same as the file in the Snippets folder. If the file name isn’t correct, the snippet will not appear in the template.

Loading part of a snippet

When a snippet contains a part that can be identified by a selector, that selector can be used to load that part of the snippet into a template.

In script, use the following code:

results.loadhtml(‘snippets/nameofthesnippet.html’, ‘selector’)

See the Designer API for more information about this function.

Loading a snippet, depending on the value of a data field

To load a snippet depending on the value of a data field, you have to add a condition to the script.

Example

The following script evaluates if the value of the LANGUAGE field in the record is ‘En’. If so, the snippet is added to the content.

if (record.fields.LANGUAGE == ‘En’) {
results.loadhtml(‘snippets/nameofthesnippet.html’);
}

Another example is given in a how-to; see Load a snippet based on a data field value.

Loading part of a snippet, based on the value of a data field

When a snippet contains a part that can be identified by a selector, that selector can be used to load that part of the snippet into a template. It is possible to do this, based on the value of the data field. This is easiest when the selector matches the value of a data field.

Example

The following script reads the value of the LANGUAGE field in the record and uses that value as the selector in the function loadhtml(). If the snippet contains an HTML element with this ID (for example, <p ID=”En”>), that HTML element will be added to the content:

var language = record.fields.LANGUAGE;
results.loadhtml(‘snippets/nameofthesnippet.html’, ‘#’+ language)

Another example is given in the following how-to: Using a selector to load part of a snippet.

See also: Designer Scripts API.

An easy way to group content in a snippet is putting each part in a container and giving that container an ID, for example:
<div ID=”EN”><p>This is text for English customers.</p></div>
Use the function .children() to load the contents of the container, and not the container itself. For example:

results.loadhtml(‘Snippets/myfooter.html’, ‘#EN’).children()

This script loads the paragraph of the example (<p>), but not the container itself (<div>).

Load a snippet and insert variable data into it

The following script loads part of a snippet based on the value of a field, and then finds/replaces text by the value of a field before inserting the content into the document.

var promoTxt = loadhtml('snippets/promo-en.html', '#' + record.fields['YOGA']); 
promoTxt.find('@first@').text(record.fields['FIRSTNAME']);
results.html(promoTxt);