Using JSON-T (JSON Templates) with AJAX on Squarespace

Often developers  need to make custom widgets for Squarespace using AJAX. But what if you want to use comfort templating (with all Squarespace predicates and formatters) which you already have built-in - JSON-T? Squarespace use it on backend and on front too. Earlier it was in sqs-commerce.js module and also you may try to  use their  custom Y.Handlebars for templating. But personally I found previous module more comfort to use so I just borrowed it into one file we need. You may download this file:

So I'll show how to create custom query module with templating. I used similiar technique to create Recent Comments Plugin. This is useful for custom collections or when you need to show something out of scope - for example I use <squarespace:navigation/>  to access  collections  out of url scope, but in this case items of collections are not available.

Well, first of all we just need include grabbed module:

<squarespace:script src="json-template.js" combo="true"/>

Let's keep all things simple and use next markup for our query:

<div class="custom-query" data-url="{fullUrl}?format=json" data-template="#case-block-template"></div>

Then we need to use template for our query. But need to change curly braces, because server will try to render this. I just changed the first one.

<script id="case-block-template" type="text/x-json-template">
    %.section items}
        %.section 0}
            %.if customContent.Poster}
            <div class="image-content content-fill">
                <img %customContent.Poster|image-meta} data-load="false"/>
            </div>
            %.end}
            <div class="section-right">
                <div class="case-content">
                    %.if mainImage}
                    <div class="case-logo content-fit">
                        <img %@|image-meta} data-load="false"/>
                    </div>
                    %.end}
                    %.section title}
                    <h2 class="case-title">
                        %title}
                    </h2>
                    %.end}
                    %.if tags}
                    <ul class="case-tags">
                        %.repeated section tags}
                        <li><a href="?tag=%@|url-encode}">#%@}</a></li>
                        %.end}
                    </ul>
                    %.end}
                    %.if excerpt}
                    <div class="case-excerpt">
                        %excerpt}
                    </div>
                    %.end}
                    <a class="circle-read-more activate-case border-bottom-anim" data-name="%title}" href="/cases/%title|slugify}/" data-id="#cases%title|slugify}">
                        <span class="read-more-text">See more</span>
                    </a>
                </div>
                <a class="activate-case mobile-visible" data-name="%title}" href="/cases/%title|slugify}/" data-id="#cases%title|slugify}"></a>
            </div>
        %.end}
    %.end}
</script>

Now we need script for get collection data by url, render it and insert result to page.

Y.use(['node', 'squarespace-json-template', 'squarespace-data'], function (Y) { //include modules we need: node, squarespace-json-template, squarespace-data for comfort AJAX (you may use Y.io offcourse)
    Y.all('.custom-query').each(function (query) { //looping through all queries on page
        if (Y.one(query.getData('template')) && query.getData('url')) { //check template exists on page and query have url
            var template = Y.one(query.getData('template')).getHTML().replace(/%/g, '{'); //replace our custom character to open curly brace
            Y.Data.get({//sending get request
                url: query.getData('url'),
                success: function (data) {
                    var compiled = Y.JSONTemplate.evaluateJsonTemplate(template, data); //compile template with received data
                    query.insert(compiled, 'before').remove(); //insert compiled template and remove our empty query div from  document
                },
                error: function (err) {
                    console.log(err); //log error
                }
            })
        }
    })
});

That's all folks, please share and subscribe for new posts!