Apply a template set

Overview

A template set can be applied to a cart session in a number of ways - but at it's root, it's simply specified using the template_set parameter in a cart request, passing in the code of the template set you're wanting to apply. The template_set attribute is session-wide, and can be applied simply with your existing add to carts.

NOTE: If a template set is applied which changes the locale of the current cart session, any existing products will be removed. Products added within the same request will be added normally.

Add to cart link

<a href="https://YOURSTORE.foxycart.com/cart?name=My+Product&price=20&code=sku123&template_set=fr">Add To Cart</a>

Add to cart form

<form action="https://YOURSTORE.foxycart.com/cart" method="post">
    <input type="hidden" name="name" value="My Product" />
    <input type="hidden" name="price" value="20" />
    <input type="hidden" name="code" value="sku123" />
    <input type="hidden" name="template_set" value="fr" />
    <input type="submit" value="Add To cart" class="submit" />
</form>

Language & currency selector

Commonly, when working with multilingual or multi-currency stores - you'll have some form of language or currency selection for customers on your website. This could be simply add to cart requests like below:

<p class="foxy_lang">Select a language: <a href="https://YOURSTORE.foxycart.com/cart?template_set=en">English</a> | <a href="https://YOURSTORE.foxycart.com/cart?template_set=fr">French</a> | <a href="https://YOURSTORE.foxycart.com/cart?template_set=de">German</a></p>

With using straight HTML like that - the links will trigger the cart to show. If you want to perform the template set change in the background, you can perform a JSONP cart request in the background based on that selection to switch the cart's template set for the customers session. Include this code on your website with your existing javascript (for example, right before the closing </body> tag:

<script>
$(document).ready(function() {
    $(".foxy_lang").on("click", "a", function(e) {
        FC.client.request($(this).attr("href")).done(function() {
            // Show a visual response that it's updated
        });
        return false;
    });
});
</script>

On page load

If you have separate websites, where each site matches a different template set, you can also use javascript to dynamically set the respective template set on page load. This removes the need for the customer to select the language, and just automatically sets it if it's not already set. You would include this code as part of your website template with your other javascript, right before the closing </body> tag:

<script>
var FC = FC || {};
FC.onLoad = function() {
    FC.client.on("ready.done", function() {
        var template_set = "my-template-set";
 
        var existing_template_set = (FC.json.template_set == "") ? "DEFAULT" : FC.json.template_set;
        if (existing_template_set != template_set) {
            FC.client.request('https://' + FC.settings.storedomain + '/cart?template_set=' + template_set);
        }
    });
};
</script>

Within that code you will need to update the my-template-set string to match the template set code that you want that particular page to use.

Determine current template set

The cart's current template set is available within the cart JSON object, as FC.json.template_set in javascript, and {{ template_set }} in Twig.