Skip to content
Search Articles/

less than a minute read • Updated 9 minutes ago

Set up AutoMagiCache for a custom template

How to host your own cart, checkout, and receipt template design and have Foxy automatically cache and merge it with the required functionality.

Host your own cart, checkout, and receipt template design, and have Foxy automatically cache and merge it with the required functionality.

Steps

1. Prepare your templates

You’ll need three separate template files — cart, checkout, and receipt — each based on your own site’s design. Within each one:

  • Remove anything not needed on the Foxy pages, like javascript libraries and stylesheets specific to other parts of your site. This reduces page size and load time.

  • Remove distractions that could cause a customer to abandon checkout, like banners, signup forms, and ads.

  • Leave the main section where the Foxy template will be inserted empty and ready for the next step.

2. Add the Foxy code

In the <head> of each template, add the default stylesheet include:

{% for css_file_href in config.css_files %}
    <link href="{{ css_file_href }}" rel="stylesheet" media="all">
{% endfor %}

Add an id="fc" to the parent element that will contain the Foxy template code — typically a div wrapping the template code below, though it can also go on the body or html tag:

<div id="fc">
<!-- Insert Foxy template logic here -->
</div>

Then, within the main section of each template, paste the relevant code:

Cart

{% set cart_is_fullpage = true %}
<div class="fc-context--cart-fullpage" data-fc-container="cart">
    {% embed 'cart.inc.twig' %}
    {% endembed %}
</div>

Also add this attribute to the body tag for the full-page cart:

data-fc-context='{"cart_is_fullpage":true}'

Checkout

{% include 'svg.inc.twig' %}
{% import "utils.inc.twig" as utils %}
{% embed 'checkout.inc.twig' %}
{% endembed %}

Receipt

{% include 'svg.inc.twig' %}
{% import "utils.inc.twig" as utils %}
{% embed 'receipt.inc.twig' %}
{% endembed %}

Emails

To customize emails, go to the emails template page in your store’s admin, select custom for the relevant template, and copy out the default code to edit directly.

Custom code placeholders (optional)

If you also want to support adding custom code from the admin’s custom header/footer fields on top of your own template, include these two lines. In the <head>:

<!-- FC script insertion -->{{ fc_header_content|raw }}<!-- /FC script insertion -->

Right above the closing </body> tag:

<!-- FC footer script insertion -->{% include template_from_string(fc_footer_content) %}<!-- /FC footer scripts -->

Internet Explorer 8 & 9 support (optional)

If you need to support IE 8 & 9, add this before any stylesheets:

<!--[if lt IE 9 ]>
    <script type="text/javascript">
        var IEElms = ['article', 'aside', 'header', 'main', 'nav', 'section'];
        for (var i = 0; i < IEElms.length; i++) {
            document.createElement(IEElms[i]);
        };
    </script>
    <script src="//{{ config.store_domain }}/static/scripts/respond/respond.1.4.2.js" charset="utf-8"></script>
<![endif]-->

3. Upload your templates

Your template files need to be publicly accessible online — usually wherever you host your website — without a password, and at a stable URL that doesn’t redirect.

4. Cache your templates

  1. 1

    Go to the Foxy admin.

  2. 2

    Go to Templates > Configuration.

  3. 3

    Find the template you’re caching, and enter its URL in the Remote template URL field.

  4. 4

    Click Cache. Foxy will scrape your template and securely cache it, along with its assets (images, CSS, JS), on Foxy’s servers.

  5. 5

    Once caching completes, review the cached template in the text area, then click Save to apply it.

Your original template files (and their images and CSS) need to stay live at their URLs even after caching — Foxy’s CDN servers need them there to pull from when caching again.

5. Apply additional styling

Once your design is in place, you may still need some custom CSS to bring the Foxy templates fully in line with your site. Classes use the BEM naming method, so most elements can be targeted with just one or two classes. Use your browser’s inspection tool to find the classes you need, then add your styles through the custom header field in Templates > Configuration.

Notes

  • Manual asset caching. If you don’t want to use AutoMagiCache, you can securely cache individual HTTP images yourself by calling them through https://YOURDOMAIN.foxycart.com/cache.php?url=http://example.com/path/to/image.gif. This only works on the cart, checkout, and receipt pages, and isn’t necessary if you’re already caching your template with AutoMagiCache.

  • “Error: Unclosed Comment Tag.” This is usually caused by including modernizr.js, which contains a {# sequence that gets interpreted as an unclosed Twig comment tag. Wrap the script in raw tags to fix it:

    {% raw %}
<script src="../path/to/modernizr.js">
{% endraw %}

  • What AutoMagiCache does. It pulls in your template from the URL provided, strips <base> tags, converts some known links (like Google Analytics) from http to https, imports external CSS and JS inline (rewriting image paths to use Foxy’s image caching), rewrites <img>, <a>, and <form> paths to point to the correct locations.

  • IE conditional stylesheets. The Foxy JavaScript insertion happens automatically after your last detected stylesheet. If that stylesheet is inside an IE conditional comment, the script may get inserted into the comment instead. Add {{ fc_header_content|raw }} manually where you want the script inserted to avoid this.

  • Linked stylesheets. If a <link> element isn’t being cached properly, check that rel="stylesheet" comes before the href attribute.

  • Hotlinking protection. If you run anti-hotlinking scripts, temporarily disable them while caching your template, or images may not show up correctly.

  • Attributes must use single or double quotes (src="foo/bar" or src='foo/bar') for AutoMagiCache to parse them correctly.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.