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.
FoxyCart supports many common template customizations from the Template Configuration page in the admin. You can configure:
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!
Nearly every piece of HTML that FoxyCart presents to your customers is configurable in a template for your store. There are individual templates for:
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.
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.
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.@extend functionality so you won't see any Bootstrap classnames.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.
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.
.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:name attributes have underscores. These can't be changed without breaking serverside functionality, so don't change them in template customizations.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-.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.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.
#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.
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.
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 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:
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.
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.
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.
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
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.
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.
partial.context.inc.twig, like address.checkout.inc.twig. The context piece is optional.TODO: add detailed walkthrough for 2.0 customization path.
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.
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.
Twig is used in all FoxyCart templates:
The first step is to review the Twig for Template Designers at the official Twig site.
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).
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.”
At present, the only allowed functionality for Twig is as follows:
if, for, include, macro, block, set, importabs, number_format, escape, raw, length, date_modify, replace, upper, lower, title, trim, date, url_encode, keysblock, date, template_from_stringAs 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.
*.jpg, *.jpeg, *.png, *.gif) to use FoxyCart image caching./ / with \/\/ when not preceded by a space or line break.</ with <\/.<img> paths to use FoxyCart image caching.<a> paths to point to the correct locations.<form> actions to point to correct locations.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.src=“foo/bar” or src='foo/bar'.<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>.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.../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.*.foxycart.com subdomain.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)
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
{ {
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>
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_cancel_and_continue_linkcart_config_hashcart_is_fullpagetrue or false depending if the cart is the full page cart or notcontextcart, checkout or receipt. Used for configuring various display and functionality concerns. cart represents both Sidecart and full page cart versions.couponscoupons.{coupon_code}coupons.{coupon_code}.amountcoupons.{coupon_code}.idcoupons.{coupon_code}.is_appliedcoupons.{coupon_code}.is_taxablecoupons.{coupon_code}.name{coupon_code} is the code value used by the customer to add the coupon.{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_fieldscustom_fields.{name}custom_fields.{name}.is_hiddencustom_fields.{name}.value{name} is the value of the name assigned to this custom field.expires_infuture_couponsfuture_coupons.{coupon_code}future_coupons.{coupon_code}.amountfuture_coupons.{coupon_code}.idfuture_coupons.{coupon_code}.is_appliedfuture_coupons.{coupon_code}.namefuture_subscription_totals_by_datefuture_subscription_totals_by_date.totalfuture_subscription_totals_by_date.total_item_pricefuture_subscription_totals_by_date.total_shippingfuture_subscription_totals_by_date.total_taxfuture_subscription_totals_by_date.total_weightgift_cardsgift_cards.{gift_card_code}gift_cards.{gift_card_code}.amountgift_cards.{gift_card_code}.idgift_cards.{gift_card_code}.code_idgift_cards.{gift_card_code}.is_appliedgift_cards.{gift_card_code}.namegift_cards.{gift_card_code}.current_balance{gift_card_code} is the code value used by the customer to add the gift card.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_couponshas_future_productshas_future_shippinghas_live_rate_shippable_productshas_location_dependant_taxeshas_multishiphas_product_imageshas_shippable_productshas_subscriptionshas_taxesis_future_shipping_onlyis_new_subscriptionis_subscription_cancelis_subscription_modificationis_updateinfoitem_countitems[]items[].alt_nameitems[].base_priceitems[].categoryitems[].codeitems[].parent_codeitems[].delivery_typeitems[].downloadable_iditems[].expiresitems[].heightitems[].iditems[].imageitems[].is_parentitems[].item_numberitems[].lengthitems[].multishipitems[].nameitems[].options[]items[].options[].classitems[].options[].nameitems[].options[].valueitems[].priceitems[].price_eachitems[].quantityitems[].quantity_maxitems[].quantity_minitems[].shiptoitems[].sub_enddateitems[].sub_frequencyitems[].sub_nextdateitems[].sub_startdateitems[].urlitems[].weightitems[].weight_eachitems[].widthlanguageenglish, french, german etc). Can be blank if using the default template set.language_iso_codeen, fr, de etc). Can be blank if using the default template set.loading_couponsloading_quantityloading_shipping_resultsloading_taxeslocale_codeen_USlocale_infomessagesmessages.errors[]messages.errors[].contextmessages.errors[].messagemessages.info[]messages.info[].contextmessages.info[].messagemessages.warnings[]messages.warnings[].contextmessages.warnings[].messagemultiship_datapayment_info_requiredsession_idsession_nameshipping_addressshipping_address.address1shipping_address.address2shipping_address.address_nameshipping_address.cityshipping_address.city_option_selectedshipping_address.city_optionsshipping_address.city_options.cityshipping_address.city_options.regionshipping_address.companyshipping_address.countryshipping_address.country_nameshipping_address.first_nameshipping_address.last_nameshipping_address.phoneshipping_address.postal_codeshipping_address.prefixshipping_address.regionshipping_address.region_labelshipping_address.region_nameshipping_address.shipping_results[]shipping_address.shipping_results[].methodshipping_address.shipping_results[].priceshipping_address.shipping_results[].service_idshipping_address.shipping_results[].service_nameshipping_address.shipping_service_descriptionshipping_address.shipping_service_idshipping_address.taxes[]shipping_address.taxes[].amountshipping_address.taxes[].applies_to_handlingshipping_address.taxes[].applies_to_shippingshipping_address.taxes[].default_amountshipping_address.taxes[].is_errorshipping_address.taxes[].is_liveshipping_address.taxes[].nameshipping_address.taxes[].rateshipping_address.taxes[].tax_idshipping_address.total_future_shippingshipping_address.total_shippingshipping_address.total_taxshipping_address.typeshipping_and_handling_labelshow_address_entryshow_amazon_fps_payment_optionshow_coupon_input_buttonshow_multiship_detailsshow_paypal_express_payment_optionshow_shipping_tbdstore_idtemplate_settotal_discounttotal_future_item_pricetotal_future_shippingtotal_future_weight_shippabletotal_item_pricetotal_ordertotal_shippingtotal_taxtotal_weighttotal_weight_shippabletransaction_idcache_pathcart_config_hashcdn_base_pathcdn_static_pathcss_filecurrency_formatlanglang.{code}lang.{code}…locationslocations.{country_code}locations.{country_code}…locations.{country_code}.activelocations.{country_code}.altlocations.{country_code}.boostlocations.{country_code}.cc2locations.{country_code}.cc3locations.{country_code}.ccnumlocations.{country_code}.cnlocations.{country_code}.pclocations.{country_code}.pc.intlocations.{country_code}.pc.langlocations.{country_code}.pc.regexlocations.{country_code}.pc.reqlocations.{country_code}.pc.searchlocations.{country_code}.rlocations.{country_code}.r.langlocations.{country_code}.r.options.{region code}locations.{country_code}.r.options.{region code}.activelocations.{country_code}.r.options.{region code}.altlocations.{country_code}.r.options.{region code}.boostlocations.{country_code}.r.options.{region code}.clocations.{country_code}.r.options.{region code}.nlocations.{country_code}.r.options.{region code}.reqlocations_billinglocations)locations_shippinglocations)paypal_checkout_button_urlpost_urlstore_domainstore_logo_urlstore_namestore_urltemplate_configtemplate_config.analytics_configtemplate_config.analytics_config.google_analyticstemplate_config.analytics_config.google_analytics.account_idtemplate_config.analytics_config.google_analytics.account_keytemplate_config.analytics_config.google_analytics.usagetemplate_config.analytics_config.segment_iotemplate_config.analytics_config.segment_io.account_keytemplate_config.analytics_config.segment_io.usagetemplate_config.analytics_config.usagetemplate_config.cart_display_configtemplate_config.cart_display_config.show_product_categorytemplate_config.cart_display_config.show_product_codetemplate_config.cart_display_config.show_product_optionstemplate_config.cart_display_config.show_product_weighttemplate_config.cart_display_config.usagetemplate_config.checkout_typetemplate_config.colorstemplate_config.colors.primarycolors.secondarycolors.tertiarytemplate_config.colors.usagetemplate_config.csc_requirementstemplate_config.custom_checkout_field_requirementstemplate_config.custom_checkout_field_requirements.billing_address1template_config.custom_checkout_field_requirements.billing_address2template_config.custom_checkout_field_requirements.billing_citytemplate_config.custom_checkout_field_requirements.billing_companytemplate_config.custom_checkout_field_requirements.billing_countrytemplate_config.custom_checkout_field_requirements.billing_first_nametemplate_config.custom_checkout_field_requirements.billing_last_nametemplate_config.custom_checkout_field_requirements.billing_phonetemplate_config.custom_checkout_field_requirements.billing_postal_codetemplate_config.custom_checkout_field_requirements.billing_regiontemplate_config.custom_checkout_field_requirements.cart_controlstemplate_config.custom_checkout_field_requirements.coupon_entrytemplate_config.custom_configtemplate_config.custom_script_valuestemplate_config.custom_script_values.footertemplate_config.custom_script_values.headertemplate_config.custom_script_values.checkout_fieldstemplate_config.debugtemplate_config.debug.usagetemplate_config.foxycompletetemplate_config.foxycomplete.combobox_closetemplate_config.foxycomplete.combobox_opentemplate_config.foxycomplete.show_comboboxtemplate_config.foxycomplete.show_flagstemplate_config.foxycomplete.usagetemplate_config.newsletter_subscribetemplate_config.newsletter_subscribe.usagetemplate_config.ssl_receipttemplate_config.supported_payment_cardstemplate_config.tos_checkbox_settingstemplate_config.tos_checkbox_settings.initial_statetemplate_config.tos_checkbox_settings.urltemplate_config.tos_checkbox_settings.usagetemplate_config.use_checkout_confirmation_windowtemplate_config.use_checkout_confirmation_window.usageweight_uomwith_controlsThe checkout view data in FC.json includes everything in the cart including the following values:
anonymous_checkout_selectedauth_token_is_validauthentication_is_in_progressauthentication_is_not_successfulauthentication_is_successfulbilling_addressshipping_address)cc_cvv2cc_cvv2_savedcc_exp_monthcc_exp_yearcc_numbercc_number_maskedcc_typechange_passwordcheckout_datecheckout_typecontinue_urlcreate_accountcustomer_emailcustomer_id_encodedcustomer_is_authenticatedcustomer_passwordemail_is_checkingemail_is_foundemail_is_validfc_auth_tokenfc_customer_idfirst_receipt_displayforce_password_resetforce_saved_accountgeoiphas_discountshas_downloadableshas_saved_cchas_visible_custom_fieldshosted_payment_gatewayshosted_payment_gateways.lang_pay_withhosted_payment_gateways.lang_payment_methodhosted_payment_gateways.supports_subscriptionshosted_payment_gateways.typehtml_downloadable_linksip_addressis_anonymousis_uoeloading_submitmultiship_datashipping_address)multiship_data.address_namemultiship_data.checkout_total_taxmultiship_data.custom_fieldsmultiship_data.has_live_rate_shippable_productsmultiship_data.has_shipping_or_handling_costmultiship_data.has_visible_custom_fieldsmultiship_data.numbermultiship_data.total_future_shippingmultiship_data.total_item_pricemultiship_data.total_pricemultiship_data.total_shippingmultiship_data.total_taxnew_customer_passwordorder_idpassword_expiredpayer_idpayment_is_pendingpayment_method_typepayment_typeprocessor_responsepurchase_orderreceipt_urlrequired_fieldsshipping_and_handling_labelshow_message_for_testingstatussubscriptionssubscriptions.descriptionsubscriptions.sub_token_urlsubscriptions.html_linkssubscriptions.text_linkstemporary_password_senttext_downloadable_linkstimestamptokentos_agreementuse_alternate_shipping_addressuse_different_addressesutilsutils.get_error_stringutils.get_info_stringutils.shipping_resultsutils.use_different_addressesThe checkout config view data in FC.json.config includes everything in the cart including the following values:
alert_test_gatewaybase_directorycc_expiration_monthscc_expiration_yearshas_multiple_payment_optionslanglang as well as additional strings for checkout, email and receipt contexts.supports_pay_with_plasticsupports_purchase_orderThe email view data in FC.json.config includes everything in the cart and checkout including the following values:
days_since_first_failed_transactionis_orderis_expiring_payment_reminderis_subscription_dunning_cancellationis_subscription_dunning_reminder