load_ajax_template

Loads a separate template file with ajax properties

Example

Load the template

[%load_ajax_template id:'_uniqueid' type:'item' template:'templatename' preload:'1' tmpl_sku:'ProductSku' tmpl_preview:'y'/%]

Load/Reload the template

[%site_value id:'footer_javascript'%]
    <script type="text/javascript" language="javascript">
        $.load_ajax_template('_uniqueid');
    </script>
[%/site_value%]

We can also pass through limited data with javascript, enabling designers to build much more complicated and custom functionality on the front-end independently.

$.load_ajax_template(template,{new_tag: value});

First parameter - template

required

Type: String

The unique ID of the tag, e.g _sidebar

Second parameter - unique object

Optional

Type: Object, the property values can be a String, Integer or Float.

  • String - $.load_ajax_template('_sidebar',{new_tag: '3'});

[@new_tag@] would output '3'.

You can add multiple properties to the unique object, e.g:

$.load_ajax_template('_sidebar',{new_tag: '3', newer_tag:3});

Which will output:

  • [@new_tag@] = '3',
  • [@newer_tag@] = 3.

Giving the unique object an array or object will output the following:

  • Object - [@tag@](HASH),
  • Array - [@tag@](ARRAY).

These can not be used to output a value.

Third Parameter - function callback

Optional

Using the same example as above, if you would like to load some additional functionality after the template is loaded, you can pass in an additional parameter with the onLoad function that will be called immediately after the template is finished loading.

$.load_ajax_template("_sidebar", {}, {
    onLoad: function(templateContent){
        // This function will be executed once the AJAX template has fully loaded
        // The contents of the loaded template will be available within the templateContent param as a string
        console.log("_sidebar loaded: " + templateContent);
    }
});

Usage

The load_ajax_template function will load a HTML template using Maropost Commerce Cloud tags and properties.

This lets you call data from different parts of Maropost Commerce Cloud without having to reload the entire page.

Parameters

Name Options Description
`id:''` String The unique ID of the tag, used to correspond with the JS loading function
`type:''` `cart`, `item`, `customer`, `content` The type of content you want to call will effect what other parameters works. All templates will be loaded from the corresponding `/includes` folder for that content type.
Example file destinations: cart/includes/, products/includes/, cms/includes/
`template:''` Template HTML file name, excluding the .template.html extension Determines what HTML file to load
`preload:''` `1`/`0` Render the contents of the template into the HTML response for the page - AJAX won't be used for the initial load but can be used after to reload the template
`tmpl_sku:''` SKU Works with type `item`, defines what SKU to call for the template load
`tmpl_preview:''` `y`/`n` When set to 'y', calls the template file with the equivalent of "?preview=y" in the URL. This allows content to be returned on the page when the product is unapproved and you are using preview=y in the URL for testing

Was this article useful?

Be notified when this page is updated. Optional.