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 |