less than a minute read • Updated 8 minutes ago
JavaScript Overview
An introduction to Foxy's JavaScript — the FC object, how to hook into it safely, and what's covered in this section.
Foxy’s JavaScript powers the cart, checkout, and receipt — the same code runs whether it’s loaded on Foxy’s hosted pages or embedded on your own site. It’s modular and built around a unified event system, so you can hook into almost anything Foxy does without needing to modify Foxy’s own code.
Most stores never need to touch this directly — the default behavior covers the vast majority of use cases. This section is for custom integrations: reacting to cart or checkout activity, overriding default configuration, or rendering cart and checkout templates from your own code.
The FC object
All of Foxy’s JavaScript functionality is exposed through a global FC object. Because Foxy’s JavaScript loads asynchronously, FC isn’t guaranteed to exist yet when your page first loads — so code that depends on it needs to wait until it’s ready.
The standard way to do this is with FC.onLoad, a function you define that Foxy calls once, right before its own initialization runs:
var FC = FC || {};
FC.onLoad = function () {
FC.client.on('ready.done', function () {
// Your custom code goes here.
});
};
Defining FC.onLoad before Foxy’s JavaScript is included ensures your code runs at the right time, regardless of load order. This pattern is used throughout Foxy’s JavaScript functionality, so it’s worth understanding before working with events, configuration, or template rendering.
Note that this won’t execute properly if it’s placed inside a jQuery $(document).ready() call.
What’s in this section
Configure JavaScript loading options — override default behavior like debug logging using
FC.override.Configure the session domain and cookie path — control where and how Foxy’s session cookie is set, and reset a session entirely.
JavaScript events reference — the full list of events available on the cart, checkout, and receipt, and how to bind to them.
JavaScript naming and file structure reference — naming conventions, internal file structure, and the order JavaScript executes on page load.
Render cart and checkout templates with Twig.js — how Foxy renders cart and checkout templates client-side, and how sequential render calls are handled.