Templates, Caching, and Template Customization with HTML + CSS

Quick and Easy Customizations

Get Your Logo In There!

You can set your store logo in the Settings tab of your FoxyCart Store's Admin. There, you can add the url for your store's logo to the “logo url” field. We'll cache your logo to ensure it's served securely, so don't worry about your own SSL.

If you don't already have a copy of your logo someplace online, an alternate option is to add the logo to a Dropbox folder and use the share link to paste into the FoxyCart admin. That's an easy and free way to get your logo hosted someplace that we can pull from.

Other Common Customizations

FoxyCart supports many common template customizations from the Template Configuration page in the admin. You can configure:

Guest checkout settings (forcing guest, forcing account, allowing both but defaulting to one or the other).
Terms of Service (TOS) checkbox and link.
Newsletter opt-in checkbox.
Some color settings to control the visual on the cart, checkout and receipt.
Product option hiding. (Hide weight, code, category, or all options.)
Credit card logos. (If you don't accept AmEx, uncheck that box. Note that this only changes the display, not what your payment gateway actually accepts.)
Credit card security code requirements. (Required, optional, etc.)
Checkout fields required and displayed. (Don't collect the address info if you aren't shipping. Require a phone field. Etc.)
Custom content (HTML, JS) injection, for custom styles or tracking code.
Debugging messaging.
Receipt over SSL or not.
Shipping and billing country/region whitelisting/blacklisting. If you only want to accept customers or to ship to certain countries, you can do that here.

Minor Styling Customizations

Using the custom code template setting, it's now possible to add CSS and javascript to your templates without needing to modify the templates themselves. If you just want to change the background, some colors or styling, or anything else you accomplish with CSS only, we strongly recommend taking this approach. If you want to really customize, read on!

Advanced and Thorough Customizations

What Are Templates and Why Do You Care?

Nearly every piece of HTML that FoxyCart presents to your customers is configurable in a template for your store. There are individual templates for:

The Cart
The Checkout
The Receipt
Email Receipts in plain text and HTML, for the store-wide as well as category-specific varieties.

While you can certainly use the default templates, we will see just how easy it is to use your own site's design for your FoxyCart templates.

We recommend sticking with the default templates unless you really want to make significant changes. In the future, we plan on rolling out improvements to increase the conversion rate automatically to users on the default templates (which we'll notify about in advance, in case you're worried). Also, unlike in v1.1 and prior, you can now make many common changes to the templates without any customization.

An Overview of FoxyCart's Template Customization & Caching

This section is for people with intermediate to advanced CSS, HTML, and JS abilities. We're happy to help you if you get stuck, but if it's your first rodeo, this stuff might be a bit head-spinning :)

We'll go into detail below, but it's useful to understand the high-level approach we've taken to templating.

We use Twig as a template language, and we use Twig.js as well. Doing this allows us (and you) to use the same templates for clientside and serverside rendering.
We use the BEM methodology for CSS naming.
All template variables used exist in the FC.json object. You'll see references to variables in the template files. That's where they live, but there are helper methods to work with that data.
We have a system we call AutoMagiCache, which scrapes a template file on your site and will cache it (and all assets) securely on our systems, so you don't need SSL on your own server to reference assets (images, css, js).
We're currently using Twitter Bootstrap 3 as a base for our default theme, but we're using SASS @extend functionality so you won't see any Bootstrap classnames.
Doing advanced customizations can get involved, but there are “easier” and “more difficult” ways to accomplish things within our templating approach. When in doubt, please please just reach out. We're happy to help.

Additionally, in previous versions of FoxyCart there was no clear separations of concerns between content (HTML), presentation (CSS), and dynamic behavior (Javascript). With v2.0 we're doing our best to help each aspect be a separate concern, so that you can override or customize the specific aspects your customers need without worrying about breaking things.

Below, you'll find our best attempt at explaining each aspect of our templates and how you can override, hook into, or remove the aspects that you're interested in. If you have questions, post on our forum and let us know what is confusing, or email support if you have a suggestion on how this documentation can be more helpful.

Introduction to Templating

If you've used a template language before, you can probably skip this section. If you haven't, it's probably useful to go through this section to understand how and why templating works the way it does.

FoxyCart 2.0 takes advantage of Twig javascript templates to allow you the freedom to customize all aspects of the eCommerce experience. Templates allow you to quickly and fairly easily add dynamic aspects to your HTML pages. Here's a quick example of how templates will make your life easier. With a simple HTML page, you'd have this:

<h1 class="product-title">Product 1</h1>
<p class="description">Description about Product 1</p>
<p class="cost">Cost: $25</p>
<a href="#" class="add-link">Add to Cart</a>

The classes make it really easy to style the presentation of the different elements with CSS, but CSS and HTML alone do not allow you to change dynamically update the contents of the HTML. That's why web developers use Javascript, to add interactivity to the sites they design. Commonly this is done with jQuery, so let's examine how that might work. Perhaps you want a product that has two options, and the second option adds 10% to the cost. First, you'd start with your HTML:

<h1 class="product-title">Product 1</h1>
<p class="description">Description about Product 1</p>
<ul class="options">
  <li class="option1"><input type="radio" value="default">Default</input></li>
  <li class="option2"><input type="radio" value="premium">Premium</input></li>
</ul>
<p class="cost">Cost: $<span class="number">25</span></p>
<a href="#" class="add-link">Add to Cart</a>

Then you'd add the javascript to watch the radio buttons:

$( document ).ready( function () {
  $('.options').click( function () {
    var option2 = $('.option2:checked').length;
    if (option2 > 0) {
      $('.number').text('35');
     } else {
      $('.number').text('25');
  });
});

That's potentially ok for one or two products, but it doesn't scale well. That's why smarter engineers than us have created worked on building Javascript templates that help abstract some of this work. The basic concept is you take some JSON data, insert it into a Javascript template, and then insert the combined output into the client document. It works like this. First, you create a template. In this example we're using Twig syntax:

<h1 class="product-title">{{ title }}</h1>
<p class="description">{{ description }}</p>
<ul class="options">
  {% for option in options %}
  <li><input type="radio" value="{{ name }}">{{ name }}</input></li>
  {% endfor %}
</ul>
<p class="cost">Cost: ${{ cost }}</p>
<a href="#" class="add-link">Add to Cart</a>

Now, we can just render the template by providing some JSON data that matches the variables:

var templateData = {
  title: "A product",
  description: "This is a product description",
  options: {[
    option1: {
      cost: 25,
      name: "Default"
    },
    option2: {    
      cost: 35,
      name: "Premium
    }
  ]}
}

No longer do we need to write custom Javascript for each product option. Now we can just let the template rendering engine handle it. The default HTML output of this code looks like this:

<h1 class="product-title">A product</h1>
<p class="description">This is a product description</p>
<ul class="options">
  <li><input type="radio" value="default">default</input></li>
  <li><input type="radio" value="premium">premium</input></li>
</ul>
<p class="cost">Cost: $25</p>
<a href="#" class="add-link">Add to Cart</a>

Now all we have to do is listen for a click, and then rerender the template with the current context. This makes it much easier to scale our code - now we can have as many options as we need. We could also pass in products as data and add new products easily, which it turns out is exactly what happens in FoxyCart templates.

Class, ID, and Data Conventions

.fc-* classes are for styling purposes only. They aren't required for functionality. (See more in the BEM section immediately below.)
#fc-* IDs are for styling purposes. #fc- IDs are used sparingly, and mostly for namespacing CSS. (See more in the BEM section immediately below.) Our recommendation is to not use these IDs for javascript selectors. Use the data-fc-* attribute(s) instead and stick with our conventions.
data-fc-* attributes are for functional purposes and template rendering.
input elements (and select and other form elements) have some caveats:
- Their name attributes have underscores. These can't be changed without breaking serverside functionality, so don't change them in template customizations.
- Per HTML requirements, label elements operate based on the id attribute of the related input. For ease of implementation and because name and id values almost always match in most HTML, the id values for form inputs also have underscores, and are not prefixed with fc-.
- Inputs should be selected (in javascript) using the name and value (if necessary) selectors, not the id attribute. Yes, theoretically IDs would be faster, but selector speed isn't really a concern at this point with modern browsers.

CSS Class and ID Naming Principles with BEM

To help make the base FoxyCart theme easily modifiable, we've adopted the BEM methodology for element naming. BEM stands for Block, Element, Modifier and it introduces a funky identifier scheme that we've tried to apply consistently in our templates.

This article will give you an extensive background on the BEM philosophy we used. Basically, Blocks are defined as distinct elements of a template, Elements are the individual HTML elements that make up the Block, and modifiers are variations of the Elements. They are represented like so:

block--element__modifier

And they can be strung together:

block--block--element__modifier

FoxyCart templates now have as much separation of concerns as possible, which means all classes are only used for presentation styling and have no impact on actual functionality. The goal with BEM styling is that all elements can be custom styled with a the #fc namespace selector plus at most two class names. Custom CSS can be added to the Admin, or you can hook into the BEM naming to easily apply your own styles.

TODO: Create class name skeleton lists for reference.

Specific IDs and Data Attributes

#fc: This is used to namespace CSS for default themes. For the main default theme to function properly but not to interact with a user's own CSS, this keeps the default FoxyCart CSS separate. It may be on the html element (for the fullpage cart, checkout, and receipt templates) or on a div container when rendered on client sites.
data-fc-container=“cart”: The cart will be rendered (via Twig.js) inside of this element.
data-fc-container-for=“…”:
data-fc-messaging-for=“…”:
data-fc-error-for=“…”:
data-fc-id=“…”: For tagging specific DOM elements you want to access via code.
data-fc-container-id=“…”: When a data-fc-id element takes an action on the DOM (for example, when a coupon code is removed, quantity is changed, or an item is removed from the cart), the corresponding element will be acted upon.

Frameworks & Extending

FoxyCart 2.0 has an underlying foundation of Bootstrap - but you can't tell by looking at the HTML. Our Bootstrap CSS is custom compiled with an #fc namespace and then applied to the DOM via Sass's @extend functionality. CSS Tricks covers the basics of Extending in this article. In the FoxyCart Sass, we provide a partial called _fc-to-bootstrap.scss that maps Bootstrap classes on to the correlating FoxyCart classes. If you are building off of the default responsive theme for your customization, it would behoove you to look in that file to see grid classes applied to elements for responsiveness.

This dependency should not be considered permanent. Future updates to FoxyCart may remove Bootstrap for lighter CSS, thus the reason it is not exposed in templates.

Errors

A big part of an online checkout is error handling. We have some conventions and helper functions if you'd like to customize error handling.

Required Fields & Inline Errors

Required fields will generate an error if a user tabs off of them. Our goal in FoxyCart 2.0 has been to create a default client-side validation system that unobtrusively alerts users to problems with the form, while also giving you as much room to customize as possible. With that in mind inline errors now have three parts:

Field highlighting
Error bar updating
Error event firing

Each of these parts are designed to be independent so you can utilize just one or both in whichever way works best for you. Below you'll find in depth explorations of each step.

1. Field Highlighting

The specific field will be highlighted by adding a class to the element, which allows CSS styling to highlight the field. FoxyCart gives you flexibility in customizing both the error class applied, and which element it is applied to through the use of data attributes. The error class is defined with the data-fc-error-class attribute.

If you are adding the error class to an element other than the input (such as a parent element), then you need to include a data-fc-error-for attribute on that element, with the value being the name of the input. So for the shipping first name field, the parent

has both attributes, looking like this:: data-fc-error-class=“invalid” data-fc-error-for=“shipping-last-name”. In case of an error on the field, the class invalid will be added to the

, and once the error is resolved, the class will be removed.

data-fc-error-class is required if you wish to utilize the FoxyCart inline-error functionality. If no class is found, a fallback method of rerendering the block will be triggered. For the default templates, the fallback method will evaluate the twig context, find the error, and apply the styling to the field. This rerendering is expensive from a browser perspective, so we attempt to avoid it whenever possible.

The data-fc-error-for is not required on the input itself - you can just add the data-fc-error-class attribute alone and FoxyCart will apply it to the input when an error occurs.

Error classes are cleared in the same way they are added: FoxyCart checks the input to see if it has a data-fc-error-class attribute and removes the defined class from the input, if present, and then checks for a data-fc-error-for=“FIELD_NAME” and if one is found, removes the data-fc-error-class defined on the element, if present.

The data-fc-error-class typically just takes a single class name as a string, but an additional “success” class can be added after a comma, like this:

<div class="alert alert-danger"
    data-fc-error-for="cc_cvv2"
    data-fc-error-class="show,hidden"></div>

This will not only add the show class on error, but it will also remove the hidden class as well. When the error is cleared, it will toggle show off and toggle hidden on.

2. Error bar updating

Once the field markup has been updated, FoxyCart updates the notifier bar at the top of the page to alert the user that a field has an error on it. This only occurs if the notifier bar is present. The markup for the bar is very simple, here's what it looks like in the default checkout template:

<section data-fc-error-notifier>
  <h3 data-fc-notifier-text></h3>
</section>

The data-fc-error-notifier attribute needs no value. Adding it to an element tells FoxyCart that all error messages should be added to this element. The data-fc-notifier-text attribute is optional, by default the message will be appended as a <p> element, if you wish to use a different text element, use the data-fc-notifier-text attribute.

When a message is sent to the notifier bar, it checks the length of FC.JSON.messages.errors, and if there are errors present, the bar updates the count and adds the classes “alert alert-danger.” All appearance and animations are handled with CSS and can be defined/overridden in your custom style sheets.

Class that is appended to be active user-definable.

3. Error Event Firing

The last step in error handling is firing a jQuery event that you can listen for to add your own customizations. notificationUpdate is fired on the <body> tag every time a message is sent or removed from FC.JSON.messages.errors. Listening for this event allows you to design custom ways of alerting the user that there are errors on the form, such as jGrowl or something custom.

Hard errors more info coming soon

Twig Templates & Conventions

All our templates are available (and automatically kept up-to-date) at GitHub: https://github.com/FoxyCart/2.0-templates You'll notice some conventions in those templates, and you'll need to be aware of those as you do your own customization.

The Twig block names from the default templates must remain in place even with if you rewrite the template entirely.
The checkout template must include a block named checkout, and the endblock tag must also include the name. So
```
{% block checkout %}
{# stuff goes here #}
{% endblock checkout %}
```
If you haven't done any customizations inside the checkout block (like if you're using {{ block("checkout") }}), this is already present. Unless you're doing major customizations, you won't have to worry about this.
Twig filenames are partial.context.inc.twig, like address.checkout.inc.twig. The context piece is optional.

Making It Easy: AutoMagiCache

TODO: add detailed walkthrough for 2.0 customization path.

Caching Assets Manually

If for some reason you don't want to use AutoMagiCache to do things automatically, you can securely cache your http images on our server (https) by calling them like this:

https://YOURDOMAIN.foxycart.com/cache.php?url=http://example.com/path/to/image.gif

Please note that this will only work on your cart, checkout, and receipt pages. Again, this is done automatically if you cache your template using AutoMagiCache, so you only need to do this if you're not caching your template.

Getting Even More Advanced with Twig

If you'd like to customize your templates beyond what you can do with HTML, CSS, and JavaScript, FoxyCart allows you to use the Twig template language as well. Twig is flexible template language that's either near identical or relatively similar to a variety of other template languages. This functionality is very advanced, and most users should be able to achieve very very seamless visual integrations without this. If you have super specific needs, however, you can dig into Twig.

Where Twig Is Used in FoxyCart

Twig is used in all FoxyCart templates:

The cart in all forms (HTML cart on the cart page, on the checkout and receipt, and on both HTML and plain text emails)
The checkout
The receipt
The email receipts (both HTML and plain text)

Using Twig with FoxyCart

Understanding Twig

The first step is to review the Twig for Template Designers at the official Twig site.

Twig + FoxyCart

By default, you won't see any Twig syntax if you select the normal templates to start from. If you'd like to see the details of what's going on you can select the “Twig” templates (with the radio buttons) for the template you're modifying. That will show you a bit more of Twig, like this (for the checkout):

    {% include 'svg.inc.twig' %}
 
    {% import "utils.inc.twig" as utils %}
    {% use 'checkout.inc.twig' %}
    {{ block('checkout') }}
{# etc... #}

That might look complicated, but the basic idea is that each of the {{ block('foo') }} tags loads a block from the checkout.inc.twig template, which is loaded via the use command. This view gives you the ability to move elements around pretty easily without needing to get super involved with giant chunks of HTML. It also allows you to override just specific portions of the HTML without needing to edit the entire massive template. (It's also really helpful for understanding the different elements and logic, even if you do end up using one of the full templates below.)

If, however, you do want more control, you don't have to use the block and use method, and you can instead just start with the underlying default template and customize from there. You can fork the Github repo here: https://github.com/FoxyCart/2.0-templates and include them directly in your website application. This will allow you to easily merge in any changes we make into your customizations, especially as you upgrade from one version to another.

If you use any of the above linked files as a starting point, you can insert that raw Twig+HTML directly into your FoxyCart template (either directly in the admin or in your own templates for use with AutoMagiCache).

Customizing the Cart

It's important to understand that there are two “cart” templates. There's the “full” cart template, which is what displays if you pull up your_store.foxycart.com/cart, used for full-page cart displays as well as the iframe in the default Colorbox cart. But there's also the cart that's displayed on the checkout, the receipt, and the email receipts. The “full” cart uses the “cart include” cart, just as the other templates do. So if you want to make a change to the cart system-wide (across the full cart, checkout, receipt, and email templates), you can edit the “cart include.”

Allowed Twig Tags and Functionality

At present, the only allowed functionality for Twig is as follows:

Tags: if, for, include, macro, block, set, import
Filters: abs, number_format, escape, raw, length, date_modify, replace, upper, lower, title, trim, date, url_encode, keys
Functions: block, date, template_from_string

Default Template Styles

As of v2.0, We've included a full responsive default theme which works on desktops, mobile devices and tables. We recommend using this team for the best customer checkout experience possible.

AutoMagiCache Technical Details

What It Does

Pulls in target URL.
Strips any <base> tags.
“Convenience replacements”, currently converting “http” to “https” links for:
- Google Analytics
Imports non-secure external CSS
- Rewrites all image paths (*.jpg, *.jpeg, *.png, *.gif) to use FoxyCart image caching.
- Sticks it inline, inside CDATA comments.
Imports non-secure external JS
- Replaces / / with \/\/ when not preceded by a space or line break.
- Replaces all </ with <\/.
- Sticks it inline, inside CDATA comments.
Rewrites all <img> paths to use FoxyCart image caching.
Rewrites all <a> paths to point to the correct locations.
Rewrites all <form> actions to point to correct locations.

What Is Supported?

Most everything not listed below.

Important Notes

Linked Stylesheets if the rel attribute is after the href attribute. This one is weird, and shouldn't be a problem (the regex is perfect), but if you have <link> elements that aren't being cached, switch the order of the attributes and put the rel=“stylesheet” before the href attribute.
Preventing Hotlinking? If you're running scripts to prevent hotlinking, that may interfere with the template caching. If images aren't showing up properly, turn off your hotlinking protection while you cache your templates.
Attributes must be enclosed in single or double quotes like src=“foo/bar” or src='foo/bar'.
Your page must have a UTF-8 content type so you may need to add this inside your document's head tag: <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>.
Flash will not be cached. Because it's near-impossible to “see inside” of a swf file, there's no good way to ensure that additional necessary files (like xml, flv, etc.) are cached along with the swf file itself.
“Upward relative paths” (stuff like ../foo/bar.ext) more than one level deep are not supported. ../foo/bar.ext will work, but ../../foo/bar.ext will not. If you have a legitimate need for more than one level deep, let us know.
@IMPORT rules more than one level deep are not supported. An import will work just fine, but an import inside an import won't be cached. If you have a legitimate need for more than one level deep, let us know.
jQuery should not be included. The checkout will import its own jQuery. * HTC files**. These may work if you're using a custom subdomain, but likely will not work if you're using a default *.foxycart.com subdomain.

Notes on Fonts

Google fonts work great because they can be referenced via https. The cacher doesn't download font files, though, so if you really need a custom font, it will have to be embedded manually in the page. FontSquirrel can help with this. (ref)

Notes on JS Files

Twig has a hard time with some Javascript files (Modernizr in particular) because of some characters inside the parsed JS file that Twig reads as actual twig comments. To fix this, you can either put

{% raw %}

and

{% endraw %}

around your javascript includes or you can simply edit the file in particular to change

{#

to

{ #

and

{{

to

{ {

Comments, Conditional Comments, and the Ampersand ("&")

For some reason, Firefox and Internet Explorer may have problems when you have the ampersand (“&”) character inside of code comments:

<!--
Some text & more
-->

This issue may be related to your doctype, so if you encounter this please let us know.

If you utilise conditional style blocks to target just a particular browser (like Internet Explorer), AutoMagiCache will currently trip over if that is the last style tag included in your <head> section. Simply including a style tag after it will correct this issue:

<!--[if IE 6]>
<style type="text/css>
/* IE specific css */
</style>
<![endif]-->
<style type="text/css>
/* Blank style */
</style>

View Data

FoxyCart uses twig and twig.js as a template language so you can completely customize everything about your checkout experience. Listed below is all the data which is exposed to the templates and also available in JavaScript in the FC.json variable.

When outputting in the template, you would utilise Twig, like {{ variablename }}. Note that if you're looking to access data that is within arrays (such as items, or item options), then you need to access those within a for loop in the Twig, like:

{% for item in items %}
  {{ item.name }}
{% endfor %}

Note that the data is broken into different sections by the page scope it's available on. The cart is available on all pages (as it is present on all pages), but there are some strings that are specific to just other pages like the checkout and receipt.

Cart

cart_cancel_and_continue_link

Description: URL for continuing back to the store from the cart.

cart_config_hash

Description: Used to validate the locale storage version of FC.json.config is up to date.

cart_is_fullpage

Description: true or false depending if the cart is the full page cart or not

context

Description: Either cart, checkout or receipt. Used for configuring various display and functionality concerns. cart represents both Sidecart and full page cart versions.

coupons coupons.{coupon_code} coupons.{coupon_code}.amount coupons.{coupon_code}.id coupons.{coupon_code}.is_applied coupons.{coupon_code}.is_taxable coupons.{coupon_code}.name

Description: Coupons associated with this cart. The {coupon_code} is the code value used by the customer to add the coupon.

Note: If the cart features codes that are shared between multiple coupons (for coupons that have the “Shared Codes Allowed?” checkbox checked), these coupons will become a nested array of coupons, with the {coupon_code} still as the key. The attributes within each array item will still be the same amount, id, is_applied, is_taxable and name.

"coupons": {
    "code1a": {
        "amount": -1,
        "id": "4704984",
        "is_applied": true,
        "is_taxable": false,
        "name": "Coupon 2"
    },
    "code2a": [
        {
            "amount": -1,
            "id": "4704985",
            "is_applied": true,
            "is_taxable": false,
            "name": "Coupon 1"
        },
        {
            "amount": -1,
            "id": "4704988",
            "is_applied": true,
            "is_taxable": false,
            "name": "Coupon 2"
        }
    ]
}

custom_fields custom_fields.{name} custom_fields.{name}.is_hidden custom_fields.{name}.value

Description: The custom fields associated with this transaction. The is_hidden bit will be true if the custom fields were passed in via the h: prefix. The {name} is the value of the name assigned to this custom field.

expires_in

Description: The time in seconds until the first product in the cart expires

future_coupons future_coupons.{coupon_code} future_coupons.{coupon_code}.amount future_coupons.{coupon_code}.id future_coupons.{coupon_code}.is_applied future_coupons.{coupon_code}.name

Description: Same as coupons above, but for products with a start date or next transaction date in the future.

future_subscription_totals_by_date future_subscription_totals_by_date.total future_subscription_totals_by_date.total_item_price future_subscription_totals_by_date.total_shipping future_subscription_totals_by_date.total_tax future_subscription_totals_by_date.total_weight

Description: The totals for subscription products with a start date or next transaction date in the are grouped together here for the cart display.

gift_cards gift_cards.{gift_card_code} gift_cards.{gift_card_code}.amount gift_cards.{gift_card_code}.id gift_cards.{gift_card_code}.code_id gift_cards.{gift_card_code}.is_applied gift_cards.{gift_card_code}.name gift_cards.{gift_card_code}.current_balance

Description: Gift cards associated with this cart. The {gift_card_code} is the code value used by the customer to add the gift card.

Note: The current_balance attribute will not factor in the discount that could apply from the cart or checkout. On the web receipt, current_balance will take into account the discount from that transaction, and any other uses of the gift card since then (if the receipt is being revisited). The email receipt will be the current balance of the gift card at the time the transaction was completed.

has_eligible_coupons

Description: If the cart contains products which can have a coupon applied to them.

has_future_products

Description: If the cart contains products with a start date or a next transaction in the future (a “future product”).

has_future_shipping

Description: If the cart contains future products from categories which support shipping.

has_live_rate_shippable_products

Description: If the cart contains products from categories which support live shipping rates.

has_location_dependant_taxes

Description: If the cart contains products from categories which have taxes based on the customer's location. This is used for handling third party payment options such as PayPal Express and Amazon FPS.

has_multiship

Description: If the store has multiship turned on.

has_product_images

Description: If any of the products in the cart took advantage of the image option.

has_shippable_products

Description: If the cart contains products from categories which support shipping.

has_subscriptions

Description: If the cart contains subscription products.

has_taxes

Description: If the cart contains products from categories which have taxes applied to them.

is_future_shipping_only

Description: If all of the products in the cart are future products, this tells the system the shipping calculations will only be for future products.

is_new_subscription

Description: If the cart contains a new subscription

is_subscription_cancel

Description: If this transaction is for canceling an existing active subscription.

is_subscription_modification

Description: If this transaction is currently modifying an existing active subscription. This will usually mean there are products in the cart which will charge in the future.

is_updateinfo

Description: If cart=updateinfo.

item_count

Description: The sum total of all the product quantities in the cart.

items[]

Description: An array of all the products in the cart.

items[].alt_name

Used in the alt attribute of the product link.

items[].base_price

Product price before product option modifiers.

items[].category

Product category code.

items[].code

Product code or sku.

items[].parent_code

Parent product code or sku.

items[].delivery_type

The delivery type of this product.

items[].downloadable_id

If this product is a downloadable, this is the downloadable id for it.

items[].expires

The timestamp for when this product expires.

items[].height

Reserved for future use.

items[].id

Unique internal id for this product.

items[].image

The image url for this product.

items[].is_parent

If this product is a parent product or not

items[].item_number

Used for organizing item display and managing the product update process.

items[].length

Reserved for future use.

items[].multiship

The multiship group number used for organizing products into shipments.

items[].name

The product name.

items[].options[]

Description: Array or product options for this product.

items[].options[].class

The option name stripped of anything but letters, numbers, dashes and underscores so it can be used as a html class attribute.

items[].options[].name

The product option name.

items[].options[].value

The product option value.

items[].price

The price extension of these products (price_each * quantity)

items[].price_each

The actual price of an individual product after product option modifiers.

items[].quantity

The quantity of this product in the cart.

items[].quantity_max

The maximum quantity allowed in the cart for this product.

items[].quantity_min

The minimum quantity allowed in the cart for this product.

items[].shipto

The shipto name of this product used for multiship.

items[].sub_enddate

The end date of this subscription product.

items[].sub_frequency

The frequency of this subscription product.

items[].sub_nextdate

The next date this subscription product will process.

items[].sub_startdate

The start date of this subscription product.

items[].url

The url of this product.

items[].weight

The weight extension of the this product (weight_each * quantity)

items[].weight_each

The weight of an individual product.

items[].width

Reserved for future use.

language

Description: The English name for the language of the cart as set by the template set (like english, french, german etc). Can be blank if using the default template set.

language_iso_code

Description: The 2 character ISO code for the language of the cart as set by the template set (like en, fr, de etc). Can be blank if using the default template set.

loading_coupons loading_quantity loading_shipping_results loading_taxes

Description: Used for determining if a loading animation should currently be displayed.

locale_code

Description: The locale code for this cart such as en_US

locale_info

Description: This includes all of the data output by PHP's localeconv() including currency symbols, decimal point character, and thousands separator.

messages

Description: Used for displaying error, warning, and information messages in the cart.

messages.errors[]

Description: An array of error messages.

messages.errors[].context

The context of this error message which often relates to a form input.

messages.errors[].message

The content of the error message. Often times this will be blank as the error message is directly part of the template as a language string.

messages.info[]

Description: An array of informational messages.

messages.info[].context

The context of this informational message.

messages.info[].message

The content of the informational message.

messages.warnings[]

Description: An array of warning messages.

messages.warnings[].context

The context of this warning message.

messages.warnings[].message

The content of this warning message.

multiship_data

Description: (Currently empty for the cart, may be added in the future)

payment_info_required

Description: True if payment information is required for this transaction (order total > 0 for an order and not doing a subscription cancel).

session_id

Description: The session id of this cart.

session_name

Description: The name of the FoxyCart session.

shipping_address

Description: Container for the shipping address information.

shipping_address.address1

Address 1

shipping_address.address2

Address 2

shipping_address.address_name

The address name of this address (used mainly for multiship)

shipping_address.city

City

shipping_address.city_option_selected

The city, region put togther as a string used in the select option.

shipping_address.city_options

Description: Array of options returned from the postal code lookup.

shipping_address.city_options.city

City

shipping_address.city_options.region

Region (such as state or province)

shipping_address.company

Company

shipping_address.country

Two character country code

shipping_address.country_name

Country name

shipping_address.first_name

First Name

shipping_address.last_name

Last Name

shipping_address.phone

Phone

shipping_address.postal_code

Postal code

shipping_address.prefix

Prefix (used for multiship)

shipping_address.region

State or Province code

shipping_address.region_label

Label for this region (such as state or province)

shipping_address.region_name

State or province name.

shipping_address.shipping_results[]

Description: A result of calculating live shipping rates.

shipping_address.shipping_results[].method

This shipping method (USPS, UPS, FedEx, etc).

shipping_address.shipping_results[].price

The quoted price for this shipping service.

shipping_address.shipping_results[].service_id

The service id used by this shipping method for this service.

shipping_address.shipping_results[].service_name

The name of this shipping service.

shipping_address.shipping_service_description

The description of this shipping service.

shipping_address.shipping_service_id

The shipping service id the service the customer selected.

shipping_address.taxes[]

Description: An array of taxes associated with this shipping address.

shipping_address.taxes[].amount

Amount of this tax.

shipping_address.taxes[].applies_to_handling

Whether or not this tax applies to handling fees.

shipping_address.taxes[].applies_to_shipping

Whether or not this tax applies to shipping costs.

shipping_address.taxes[].default_amount

The default amount before being applied to a specific location.

shipping_address.taxes[].is_error

If this tax has an error.

shipping_address.taxes[].is_live

If this tax is live.

shipping_address.taxes[].name

The name of this tax.

shipping_address.taxes[].rate

The tax rate.

shipping_address.taxes[].tax_id

The internal id of this tax.

shipping_address.total_future_shipping

The total amount of future shipping costs for the products being sent to this address.

shipping_address.total_shipping

The total shipping costs for the products being sent to this address.

shipping_address.total_tax

The total tax for the products being sent to this address.

shipping_address.type

The type for this address (either billing or shipping)

shipping_and_handling_label

Description: The label describing the shipping applied to this order.

show_address_entry

Description: Used to determine if the cart address entry form should be displayed.

show_amazon_fps_payment_option

Description: Used for determining if the amazon payment button should be shown. It will not be shown if there are subscriptions in the cart.

show_coupon_input_button

Description: Used for determining if the coupon input button should be shown.

show_multiship_details

Description: Used to toggle the multiship details.

show_paypal_express_payment_option

Description: Used for determining if the Paypal payment button should be shown.

show_shipping_tbd

Description: Used for determining if live shipping rates haven't yet been calculated so a “TBD” indicator is displayed instead.

store_id

Description: The FoxyCart store id for this store.

template_set

Description: The code for the cart's current template set

total_discount

Description: The total coupon discount applied to this transaction.

total_future_item_price

Description: The total price of the future items in the cart.

total_future_shipping

Description: The total amount of the shipping costs assigned to future products in the cart.

total_future_weight_shippable

Description: The total weight of the future shipable products in the cart.

total_item_price

Description: The total price of the items in the cart.

total_order

Description: The order total

total_shipping

Description: The shipping total

total_tax

Description: The tax total

total_weight

Description: The total product weight.

total_weight_shippable

Description: The total weight of the shippable products in the cart.

transaction_id

Description: The FoxyCart transaction id for the contents of the cart.

Cart Config (FC.json.config)

cache_path: Description: Path used for caching images in the FoxyCart system.
cart_config_hash: Description: Used to validate the locale storage version of FC.json.config is up to date.
cdn_base_path: Description: The base path of your store's files served via the CDN.
cdn_static_path: Description: The base path of static files served via the CDN.
css_file: Description: The full path to the versioned store-specific stylesheet served by the CDN.
currency_format: Description: The currency format configured for your store and use for twig money formatting.
lang: Description: All language strings in FoxyCart are completely customizable. We start with a base language configuration and then you can customize them individually from there.
lang.{code} lang.{code}…: Description: You can view all language strings used on the cart by viewing FC.json.config.lang in your browser's web console.
locations: Description: A complete listing of all valid country codes and state/provinces within those countries used by our find-as-you type auto complete (FoxyComplete) country and region lookup system.
locations.{country_code} locations.{country_code}…: Description: Locations are grouped by their 2 character ISO country code.
locations.{country_code}.active: If this country is actively being used by the FoxyComplete system.
locations.{country_code}.alt: Alternative spellings or local spellings of this location name.
locations.{country_code}.boost: Used to give certain spellings a boost over others.
locations.{country_code}.cc2: ISO 3166-1 alpha-2 code for this country.
locations.{country_code}.cc3: ISO 3166-1 alpha-3 code for this country.
locations.{country_code}.ccnum: ISO 3166-1 numeric code for this country.
locations.{country_code}.cn: Country name (currently in english).
locations.{country_code}.pc: Description: Postal Code format details.
locations.{country_code}.pc.int: If the postal code is numeric only.
locations.{country_code}.pc.lang: The language key string for the description of this postal code.
locations.{country_code}.pc.regex: The regex pattern this postal code fits in for validation purposes.
locations.{country_code}.pc.req: Whether or not the postal code is required.
locations.{country_code}.pc.search: Whether or not this country supports a postal-code based search.
locations.{country_code}.r: Description: Region details for this country.
locations.{country_code}.r.lang: The language key string for name of this country's regions such as “state.”
locations.{country_code}.r.options.{region code}: Description: Region information organized by two character ISO code.
locations.{country_code}.r.options.{region code}.active: If this region is actively being used by the FoxyComplete system.
locations.{country_code}.r.options.{region code}.alt: Alternative spellings or local spellings of this region name.
locations.{country_code}.r.options.{region code}.boost: Used to give certain spellings a boost over others.
locations.{country_code}.r.options.{region code}.c: ISO 3166-1 alpha-2 code for this country.
locations.{country_code}.r.options.{region code}.n: Region name (currently in english).
locations.{country_code}.r.options.{region code}.req: If regions are required for this country.
locations_billing: Description: Locations used for billing address information only (see locations)
locations_shipping: Description: Locations used for shipping address information only (see locations)
paypal_checkout_button_url: Description: Locale specific PayPal payment button URL.
post_url: Description: URL for posting cart and checkout forms.
store_domain: Description: This FoxyCart stores FoxyCart store domain (the example part of example.foxycart.com).
store_logo_url: Description: Your store logo url as configured in the FoxyCart admin.
store_name: Description: Your FoxyCart store name as configured in the FoxyCart admin.
store_url: Description: Your store's website URL as configured in the FoxyCart admin.
template_config: Description: All of the settings configured in the FoxyCart admin under the configuration menu will be available here for you to use within your twig template customizations.
template_config.analytics_config: Description: (UNDER CONSTRUCTION): A place to automatically configure your analytics tools.
template_config.analytics_config.google_analytics: Description: Configuration settings for your Google Analytics account.
template_config.analytics_config.google_analytics.account_id: Your Google Analytics acccount id
template_config.analytics_config.google_analytics.account_key: Your Google Analytics acccount key
template_config.analytics_config.google_analytics.usage: Configuration for how this setting is being used.
template_config.analytics_config.segment_io: Description: Configuration settings for your Segment.io account.
template_config.analytics_config.segment_io.account_key: Your Segment.io acccount key
template_config.analytics_config.segment_io.usage: Configuration for how this setting is being used.
template_config.analytics_config.usage: Configuration for how this setting is being used.
template_config.cart_display_config: Description: Settings for controlling the display details of your cart.
template_config.cart_display_config.show_product_category: Whether or not to show the product category code in the line item details.
template_config.cart_display_config.show_product_code: Whether or not to show the product code in the line item details.
template_config.cart_display_config.show_product_options: Whether or not to show the product options in the line item details.
template_config.cart_display_config.show_product_weight: Whether or not to show the product weight in the line item details.
template_config.cart_display_config.usage: Whether or not the cart display config has been set or if defaults are in use.
template_config.checkout_type: Description: Either default_account, default_guest, guest_only, or account_only for determing if your checkout will accept guest checkouts or required named accounts and which one will be the default action.
template_config.colors: Description: This configuration allows you to specify the main colors of your website and our system will adjust the CSS using SASS as needed to incorporate your colors into our template designs.
template_config.colors.primary colors.secondary colors.tertiary: The primary, secondary, and tertiary colors for your website.
template_config.colors.usage: Whether or not this configuration setting is being used.
template_config.csc_requirements: Description: Settings for how you'd like to require the Card Security Code (CSC) for your website. Values include all_cards, sso_only (Single Sign On only), new_cards_only (do not require for saved cards).
template_config.custom_checkout_field_requirements: Description: Configuration for displaying and requiring various checkout fields and features.
template_config.custom_checkout_field_requirements.billing_address1 template_config.custom_checkout_field_requirements.billing_address2 template_config.custom_checkout_field_requirements.billing_city template_config.custom_checkout_field_requirements.billing_company template_config.custom_checkout_field_requirements.billing_country template_config.custom_checkout_field_requirements.billing_first_name template_config.custom_checkout_field_requirements.billing_last_name template_config.custom_checkout_field_requirements.billing_phone template_config.custom_checkout_field_requirements.billing_postal_code template_config.custom_checkout_field_requirements.billing_region: These can be set to either hidden, required, optional, or default (in the case of billing_region)
template_config.custom_checkout_field_requirements.cart_controls: Whether or not to allow cart controls on the checkout page.
template_config.custom_checkout_field_requirements.coupon_entry: Whether or not to allow the coupon entry form on the checkout page.
template_config.custom_config: Description: This is where you can put your own custom configuration values for your twig templates. This might be helpful if you want to hard code your templates with some logic and change the display outcome by just adjusting the values here.
template_config.custom_script_values: Description: Used for setting custom JavaScript or CSS elements to be used in the default template.
template_config.custom_script_values.footer: If you have custom JavaScript you'd like to add above the </body> tag for your cart, checkout and receipt templates, put that here. You can use it for conversion tracking scripts by checking the first_receipt_display variable. Full twig syntax is supported here.
template_config.custom_script_values.header: If you have custom CSS (or JavaScript, though the footer is a better place for that) you'd like to add to the <head> tag for your cart, checkout and receipt templates, put that here. Full twig syntax is supported here.
template_config.custom_script_values.checkout_fields: If you to add custom fields to your store's checkout template, add HTML here. These will be inside the <form> tag on the checkout page and will submit with the rest of the checkout form and be recorded as custom fields on the transaction. Full twig syntax is supported here.
template_config.debug: Description: Turn this on to see debugging output in your web browser's console log.
template_config.debug.usage: How this setting is currently being used.
template_config.foxycomplete: Description: Our country and region auto completion system which lets users find locations as they type instead of having to select from a huge list of options.
template_config.foxycomplete.combobox_close: The icon used for closing the location combo box.
template_config.foxycomplete.combobox_open: The icon used for opening the location combo box.
template_config.foxycomplete.show_combobox: Whether or not to show the location combo box.
template_config.foxycomplete.show_flags: Whether or not to show the country flags.
template_config.foxycomplete.usage: Configure how this feature is being used.
template_config.newsletter_subscribe: Description: This allows you to easily add a “Subscribe Me” checkbox to your checkout template so you can use that value as a custom field in the transaction datafeed later.
template_config.newsletter_subscribe.usage: How this setting is configured.
template_config.ssl_receipt: Description: If you require the receipt page to be loaded over HTTPS, turn this feature on.
template_config.supported_payment_cards: Description: An array of the accepted payment cards by your store such as Visa, MasterCard, etc. This will control which card logos are shown on the checkout page.
template_config.tos_checkbox_settings: Description: Use this setting to easily add a terms of service checkbox to your checkout page.
template_config.tos_checkbox_settings.initial_state: Whether or not the terms of service checkbox is checked by default.
template_config.tos_checkbox_settings.url: The URL to your terms of service document.
template_config.tos_checkbox_settings.usage: How this setting is configured (none, required or optional).
template_config.use_checkout_confirmation_window: Description: (UNDER CONSTRUCTION) A popup window for customers to confirm their order before submitting it.
template_config.use_checkout_confirmation_window.usage: Configure how this feature is being used.
weight_uom: Description: The unit of measure used for calculating shipping weights.
with_controls: Description: Whether or not the current display output includes cart controls such as quantity and coupon entry fields.

Checkout

The checkout view data in FC.json includes everything in the cart including the following values:

anonymous_checkout_selected: Description: Used for determing if a customer opted to check out anonymously.
auth_token_is_valid: Description: Used for determining if the Single Sign On (SSO) authorization token is valid.
authentication_is_in_progress: Description: If the customer is currently authenticating.
authentication_is_not_successful: Description: If customer authentication failed.
authentication_is_successful: Description: If customer authentication is successful.
billing_address: Description: (See cart shipping_address)
cc_cvv2: Description: Credit card Card Security Code for new cards.
cc_cvv2_saved: Description: Credit card Card Security Code for existing cards.
cc_exp_month: Description: Credit card expiration date month.
cc_exp_year: Description: Credit card expiration date year.
cc_number: Description: Credit card number.
cc_number_masked: Description: Masked credit card number.
cc_type: Description: Credit card type (Visa, MasterCard, Amex, etc)
change_password: Description: If the customer as opted to change their password.
checkout_date: Description: The date this checkout took place.
checkout_type: Description: The type of checkout taking place which can be either default_account, default_guest, guest_only, account_only
continue_url: Description: The URL used on the receipt to continue back to your store's website.
create_account: Description: Whether or not the customer chose to create an account during checkout.
customer_email: Description: The customer email address.
customer_id_encoded: Description: Used for determining which customer just logged in.
customer_is_authenticated: Description: Used for determining if the current customer is authenticated via Single Sign On (SSO).
customer_password: Description: The customer password entered by the user.
email_is_checking: Description: If the checkout is currently checking to see if the email address given belongs to an existing customer.
email_is_found: Description: Indicates if the email address given belongs to an existing customer.
email_is_valid: Description: Indicates if the email address given is valid.
fc_auth_token: Description: The Single Sign On (SSO) authentication token.
fc_customer_id: Description: The Single Sign On (SSO) passed in customer id.
first_receipt_display: Description: If the receipt is being displayed for the very first time which can be helpful for displaying specific conversion tracking code.
force_password_reset: Description: If the customer requires a password reset because they logged in with a temporary password.
force_saved_account: Description: If the cart contains subscriptions, the customer will be forced to checkout as a named account.
geoip: Description: Used in the emails sent to store administrators to display the GEO IP lookup details for the country based on the ip address of the customer checking out. This will not be available for the checkout or receipt context.
has_discounts: Description: If the cart contains coupon discounts.
has_downloadables: Description: If the cart contains downloadable products.
has_saved_cc: Description: If the customer has a saved credit card.
has_visible_custom_fields: Description: If the checkout has custom fields which are not hidden custom fields.
hosted_payment_gateways: Description: Array of hosted payment gateways available for this checkout.
hosted_payment_gateways.lang_pay_with: Language and logo used on the checkout page to tell the customer they can pay with this method.
hosted_payment_gateways.lang_payment_method: Additional information for the customer indicating what happens next, such as if they will be redirected to another site to confirm payment.
hosted_payment_gateways.supports_subscriptions: Wehther or not this hosted payment method supports subscriptions.
hosted_payment_gateways.type: The type of this hosted solution such as bitpay, dwolla, etc.
html_downloadable_links: Description: The links for downloading products purchased as FoxyCart downloadables.
ip_address: Description: The ip address of the customer.
is_anonymous: Description: If the customer checked out as an anonymous user.
is_uoe: Description: If the customer is currently logged in using Unified Order Entry.
loading_submit: Description: Used for determining if an animation should be displayed near the submit button.
multiship_data: Description: Array of shipments for each multiship customer shipment (in additiona to address data found in shipping_address)
multiship_data.address_name: The name given to this shipto address. This will be the same as the “shipto” value in the cart.
multiship_data.checkout_total_tax: The tax total for this shipment used during checkout.
multiship_data.custom_fields: Custom fields for this shipment.
multiship_data.has_live_rate_shippable_products: Whether or not this shipment has products from a category which uses live shipping rates.
multiship_data.has_shipping_or_handling_cost: Whether or not this shipment has products from a category which has any shipping or handling costs.
multiship_data.has_visible_custom_fields: Whether or not any of the custom fields in this shipment are visable.
multiship_data.number: The shipto number used for visual organization.
multiship_data.total_future_shipping: The total future shipping amount in this shipment
multiship_data.total_item_price: The total amount of all the items in this shipment
multiship_data.total_price: The total price in this shipment
multiship_data.total_shipping: The total shipping amount in this shipment
multiship_data.total_tax: The total tax amount in this shipment
new_customer_password: Description: When creating a new customer or changing an existing password, this will contain the new password entered by the customer.
order_id: Description: The transaction id of this order.
password_expired: Description: True if the password this customer used has expired, such as when using a temporary password.
payer_id: Description: Used by 3D Secure systems.
payment_is_pending: Description: If the customer checked out with a hosted gateway which first marks the payment as pending, this boolean can be used for special messaging to the customer on the receipt.
payment_method_type: Description: Either plastic_saved, plastic_new, or the type of the hosted payment gateway being used.
payment_type: Description: The payment type usually being plastic, hosted (as in a hosted payment gateway), purchase_order, paypal or other.
processor_response: Description: The payment gateway response value used on the receipt.
purchase_order: Description: The purchase order value submitted by the customer.
receipt_url: Description: The connonical url of the transaction receipt.
required_fields: Description: Array of required field names as configured in the FoxyCart admin template configuration page.
shipping_and_handling_label: Description: The default label for the shipping and/or handling fees charged for this order.
show_message_for_testing: Description: Used to indicate if a testing informational message is to be displayed. This can be useful for styling purposes and can be triggered by passing in a fc_show_info custom field.
status: Description: Used in some situations such as with hosted gateways to specify the status of the current transaction. Values include approved, authorized, declined, pending, or rejected.
subscriptions: Description: Array of subscription data for this transaction.
subscriptions.description: The textual description of this subscription including the frequency.
subscriptions.sub_token_url: The subscription token url which can be used by the customer to modify or cancel this subscription or by the store to adjust the subscription via the API.
subscriptions.html_links: The links needed by the customer to modify or cancel this subscription in html format.
subscriptions.text_links: The links needed by the customer to modify or cancel this subscription in text format.
temporary_password_sent: Description: Indicating of the temporary password has been sent to the customer.
text_downloadable_links: Description: Text links for downloading the products purchased.
timestamp: Description: Used by the Single Sign On (SSO) feature to ensure the token is only valid for a specific amount of time.
token: Description: Used by 3D Secure systems.
tos_agreement: Description: The state of the terms of service checkbox, if being used by the checkout.
use_alternate_shipping_address: Description: A boolean state of the checkbox for using an alternate shipping address other than the billing address.
use_different_addresses: Description: The state of the checkbox for using an alternate shipping address other than the billing address.
utils: Description: Custom twig macros we've added which we've also ported to twig.js
utils.get_error_string: Get a specific error string from the array of errors by context key.
utils.get_info_string: Get a specific info string from the array of informational strings by context key.
utils.shipping_results: Macro for formatting shipping rate results into radio buttons.
utils.use_different_addresses: Macro for displaying the use alternate address checkbox.

Checkout Config (FC.json.config)

The checkout config view data in FC.json.config includes everything in the cart including the following values:

alert_test_gateway: Description: Used for FoxyCart test stores.
base_directory: Description: Used for determing the correct base directory for this store version.
cc_expiration_months: Description: An array of months for displaying the credit card expiration month select box.
cc_expiration_years: Description: An array of years for displaying the credit card expiration year select box.
has_multiple_payment_options: Description: A boolean used for display logic when there are more than one payment options enabled by the store for the checkout page.
lang: Description: Includes language strings from cart config lang as well as additional strings for checkout, email and receipt contexts.
supports_pay_with_plastic: Description: A boolean used for display logic on the checkout page for if the store supports paying with a debit or credit card.
supports_purchase_order: Description: A boolean used for dispaly logic on the checkout page for if the store supports paying by purchase order.

Email

The email view data in FC.json.config includes everything in the cart and checkout including the following values:

days_since_first_failed_transaction: Description: The number of days since the subscription in this email first failed, used for dunning reminder emails.
is_order: Description: If this email is for a normal transaction
is_expiring_payment_reminder: Description: If this email is for an expiring payment methods reminder email triggered by the dunning functionality
is_subscription_dunning_cancellation: Description: If this email is for a subscription that has just been cancelled through the dunning functionality
is_subscription_dunning_reminder: Description: If this email is for a subscription past due reminder email triggered by the dunning functionality

2016/11/21 05:24

v2.0

Products

Business Rules

Templates

Advanced Topics

API & Backend Topics

Miscellany

−Table of Contents

Templates, Caching, and Template Customization with HTML + CSS

Quick and Easy Customizations

Get Your Logo In There!

Other Common Customizations

Minor Styling Customizations

Advanced and Thorough Customizations

What Are Templates and Why Do You Care?

An Overview of FoxyCart's Template Customization & Caching

Introduction to Templating

Class, ID, and Data Conventions

CSS Class and ID Naming Principles with BEM

Specific IDs and Data Attributes

Frameworks & Extending

Errors

Required Fields & Inline Errors

1. Field Highlighting

2. Error bar updating

3. Error Event Firing

Twig Templates & Conventions

Making It Easy: AutoMagiCache

Caching Assets Manually

Getting Even More Advanced with Twig

Where Twig Is Used in FoxyCart

Using Twig with FoxyCart

Understanding Twig

Twig + FoxyCart

Customizing the Cart

Allowed Twig Tags and Functionality

Default Template Styles

AutoMagiCache Technical Details

What It Does

What Is Supported?

Important Notes

Notes on Fonts

Notes on JS Files

Comments, Conditional Comments, and the Ampersand ("&")

View Data

Cart

Cart Config (FC.json.config)

Checkout

Checkout Config (FC.json.config)

Email

Page Tools

Site Tools

User Tools