load_ajax_template

Loads a webstore template within an another webstore template, using AJAX to either defer loading or refresh page content without the need to refresh the entire page. Note, AJAX loaded templates are not cached the same as other content and should only contain the dynamic content you wish to update. Do not include large blocks of static content in an AJAX template as this would benefit more from caching.

Example

[%load_ajax_template id:'_header' type:'item' template:'header' preload:'1' tmpl_sku:'[@current_sku@]' tmpl_preview:'y'/%]

Usage

The load_ajax_template function comes in two parts, a B@SE function tag to determine what content should be AJAX loaded and where it should be placed, and a JS function to trigger the AJAX refresh and reload the template with the latest data.

Add loader for the AJAX template

Add the [%load_ajax_template%] function to an existing template, where you would like the AJAX loaded content to display. General convention for the id is to use the name of the AJAX template with an underscore at the front. For example to load in product header details on the main product template you could use:

[%load_ajax_template id:'_header' type:'item' template:'header' preload:'1' tmpl_sku:'[@current_sku@]' tmpl_preview:'y'/%]

Reload the AJAX template

Generally you would want your AJAX content to refresh after a customer has performed a certain action. This can be done by triggering the $.load_ajax_template() function in a JS script or event handler. For example, to load in more brands, you might trigger a refresh on a button press:

[%load_ajax_template id:'_ajax_brands' type:'content' template:'ajax_brands' preload:'1' tmpl_preview:'y'/%]
<button class="btn btn-outline-secondary" onclick="$.load_ajax_template('_ajax_brands')">Load More Brands</button>

Need to do additional script evaluations or pass additional params/data tags through with the AJAX request? Place the $.load_ajax_template() function in a script tag to run more advanced code. The below code grabs the current pagination value, increments it, then AJAX loads the new page contents, passing on the page Content ID and Total Pages as additional variables.

<!-- /httpdocs/assets/themes/[THEME-NAME]/templates/cms/brands.template.html -->
[%load_ajax_template id:'_ajax_brands' type:'content' template:'ajax_brands' preload:'1' tmpl_page:'1' tmpl_preview:'y'/%]

<!-- /httpdocs/assets/themes/[THEME-NAME]/templates/cms/includes/ajax_brands.template.html -->
[%set [@current_page@] %][%if [@ajax_pgnum@]%][@ajax_pgnum@][%else%][@page@][%/if%][%/set%]
[%thumb_list type:'content' content_type:'brand' limit:'[@config:THUMB_LIMIT@]' filter_category:'' sortby:'content_name' pgnum:'[@current_page@]'%]
    [%param *header%]
        <div class="row align-items-center">
    [%/param%]
    [%param *body%]
            <div class="brand-item mb-3 text-center col-6 col-md-4 col-lg-3">
                <a href="[@URL@]">
                    <img class="img-fluid" src="[%ASSET_URL type:'content' id:'[@content_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/param%][%/ASSET_URL%]" alt="[@name@]"/>
                    [@name@]
                </a>
            </div>
    [%/param%]
    [%param *footer%]
        </div>
        <p>Page [@current_page@] of [@total_pages@]</p>
        [%if [@current_page@] < [@total_pages@] %]
            <button class="btn btn-outline-secondary" onclick="updateBrands([@current_page@])">Load More Brands</button>
            [%site_value id:'footer_javascript'%]
                <script>
                    function updateBrands(currentPage){
                        currentPage++;
                        let nextPage = currentPage;
                        $.load_ajax_template('_ajax_brands',{showloading: '1', ajax_pgnum: nextPage, content_id: '[@content_id@]', total_pages: '[@total_pages@]'});
                    }
                </script>
            [%/site_value%]
        [%/if%]
    [%/param%]
    [%param *ifempty%]
        <div class="row align-items-center">
            <p>Sorry, we don't have any brands that match your search. <a href="[%url type:'page' id:'[@content_id@]'%][%/url%]">View All Brands</a></p>
        </div>
    [%/param%]    
[%/thumb_list%]

JavaScript Function Parameters

The $.load_ajax_template() function has three parameters which can be configured to build out more complicated and custom webstore functionality.

Callback Function Example

$.load_ajax_template("_ajax_products", {}, {
    onLoad: function(templateContent){
        // This function will be executed once the AJAX template has fully loaded
        // The contents of the loaded template can be accessed via templateContent, as a string
        // For example, to return the number of thumbnails generated by the AJAX template
        console.log("AJAX template loaded: " + templateContent);
        const parser = new DOMParser();
        const ajaxDoc = parser.parseFromString(templateContent, 'text/html');
        const newProducts = ajaxDoc.querySelectorAll(".thumbnail");
        console.log(`Number of thumbnails loaded: ${newProducts.length}`);
    }
});

B@SE Function Parameters