Skip to content
Search Articles/

less than a minute read • Updated 8 minutes ago

JavaScript naming and file structure reference

Naming conventions for Foxy JavaScript variables and events, the internal file structure, and the pageload order of execution.

JavaScript naming conventions

Similar to Google’s conventions, but using snake_case instead of camelCase for variable names.

Type

Convention

Example

Function names

camelCase

functionNamesLikeThis

Variable names

snake_case

variable_names_like_this

Class names

PascalCase

ClassNamesLikeThis

Enum names

PascalCase

EnumNamesLikeThis

Method names

camelCase

methodNamesLikeThis

Constant values

UPPER_SNAKE_CASE

CONSTANT_VALUES_LIKE_THIS

Namespaced names

dot notation, camelCase

foo.namespaceNamesLikeThis.bar

File names

lowercase, no separator

filenameslikethis.js

Event naming conventions

  • Present tense, like standard JavaScript events — cart-coupon-add, not cart-coupon-added.

  • Hyphens separate the parts of the event name.

  • Names follow this order: section (cart, checkout, receipt), noun (coupon, email, address, etc.), modifier/attribute if applicable (e.g. cart-item-quantity, where quantity is the attribute of the item), then verb (add, remove, update, change, etc.).

  • The “after” event gets the .done suffix: client.on("cart-item-remove.done", handler).

What counts as an event

  • Anything in an init method.

  • Anything on change, click, keyup/keydown, blur, focusin/focusout.

  • Rendering.

  • Interactions with API JSON.

Selectors are not events — they return a string, not a triggerable action.

File structure

Internal source files used to compile Foxy’s external JavaScript. Source files are available at admin.foxycart.com/static/v/2.0.0/js/src/.

File

Purpose

Internal methods

Events

fc.api.js

Methods that make requests to the api_json.php endpoint.

saveContactInfo, saveShippingServiceInfo, getShippingOptions, getTaxes

none

fc.cart.js

Methods that make requests to the /cart endpoint and update the cart template via Twig.js; cart DOM initialization.

—

cart-item-quantity-update, cart-item-remove, cart-coupon-add, cart-coupon-remove, customer-shipping-options-update, customer-address-update

fc.checkout.js

Checkout page initialization and methods.

—

not yet documented

fc.client.js

Maintains and handles the fcsid session value; prepares links and forms to submit to the cart.

—

cart-submit

fc.event.js

Defines the event model.

—

—

fc.locations.js

Shipping and billing country/state/province/region functionality.

—

none

fc.namespace.js

Declares `var FC = FC

{};`

fc.postal-code.js

Postal code → city + state/region lookup.

—

—

fc.session.js

Sets the fcsid cookie.

—

—

fc.sidecart.js

Everything related to the Sidecart approach.

—

—

fc.template.js

Twig.js-related methods, including custom Twig.js methods that mirror custom server-side methods.

—

—

fc.util.js

Helper functions.

money_format, str_pad, unserialize

—

External scripts

Script

Purpose

foxycart.js

Namespace, session management, events, and utilities.

foxycart.jsonp.js

Base for custom integrations and the default Sidecart approach.

foxycart.jsonp.sidecart.js

The cart in a Sidecart approach.

Pageload events and order of execution

FC.client.init() is called on pageload for any CDN-loaded, store-specific JavaScript, triggering the following sequence:

  1. 1

    FC.client.applySession()

  2. 2

    FC.client.preventDefaultActions()

  3. 3

    If context == cart, then FC.client.updateCart()

  4. 4

    FC.client.event('ready').trigger()

  5. 5

    FC.client.updateMiniCart()

FC.client.updateCart() makes an FC.client.request to get the cart JSON. On completion, FC.client.request triggers FC.client.updateJSON(), which in turn calls FC.client.updateMiniCart().

The ready event then triggers:

  • FC.cart.updateConfig()

  • FC.cart.updatePaymentInfoRequired()

FC.cart.updateConfig() checks and sets localStorage, which triggers FC.client.requestConfig() — a call to FC.client._request that sets the config JSON with the updated data.

Need Help?

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