Shop.js is a front-end framework for ecommerce powered by Hanzo. It has a fully customizable look and feel with many built-in reactive components.

You can see a great example of Shop.js in action at stoned.audio. It powers the complete shopping experience from their referral program and user signup to checkout and customer portal.

Containers are Custom HTML tags that define a section of embeddable dynamic content. Controls are very simple composeable widgets that provide ui inputs and outputs for users. Containers can contain other containers or controls.

Containers also expose data fields from the global data referrential tree passed into Shop.start and services. Data fields are accessed using the 'data' special variable (see below) and services which are accessed by their name. Services are either functions or read-only fields.

For example a submit() service can be invoked by calling 'submit()' directly or binding an event 'onclick="submit"' for invokation by user when they interact with an element on the page.

A reference to the global data referrential tree. that's passed into the Shop.start function can be referenced from most containers by using the 'data' variable.

The exceptions to this rule are lineitem and order which are used internally by the looping containers lineitems and orders respectively. The 'data' in these containers refer to the specific item that's currently being looped over. For example a lineitems container loops over order.items, a lineitem container's 'data' variable refers to the specific item being looped over.

Both lineitem and order both have a 'parent-data' variable that refer to their immediate parents's for composeability reasons, namely to get fields like 'currency' relatively from the parent order or user.

The 'parent' variable references the parent container of the current container. It is useful for using data fields or invoking services of a parent container. Be aware that the root container has no parent set.

The cart container renders cart items and handles the processing of promotional codes.

The checkout container validates the customers shipping and billing information and handles submitting the customer's card to complete the checkout step.

The checkout-shippingaddress container handles just the parts of checkout related to the customer's shipping address. This is useful when doing a multi-page checkout flow with checkout-shipping on the first page and checkout on the second page. Shipping data will propagate from checkout-shipping to checkout.

n/a

The lineitems container loops over and displays an order's or cart's line items (usually the order.items field). The lineitems must be used inside of either a cart or orders container. Internally, a lineitems container simply wraps a lineitem container in a loop.

Template data inside of a lineitems container's HTML tags are passed onto each lineitem container and will be transcluded in lineitem.

It is best to use this container inside another container instead of at the top level so it can be rendered along side other order information.

n/a

n/a

The lineitem container exposes an item and records quantity data. It is not used directly in most cases. It should be used implicitly as part of the lineitems container instead. When using lineitem containers directly, parentData (via parent-data attribute, e.g. ) must be set to the order data.

n/a

n/a

The checkbox control creates and binds a checkbox.

The select control creates and binds a platform-agnostic select based on selectize.js. It is simplist to base custom styling on the skins available here.

The text control creates and binds a text-input.

These constants can be accessed via Shop.Events. or the string value can be used instead