Examples

Simple

Intercepting clicks on links, displaying a loader and updating the targets' content.

Target modes: replace, append, prepend

In the following example, we implement three different FrameTarget components, each with one the available content update strategy ("mode"): replace (the default), append or prepend.

Form

Adding a product to a cart

This example uses the Frame components, as well as the Action, Figure and Panel components, to add support for adding products to a cart without reloading the page.

The FrameForm and FrameAnchor components are used to intercept click on links and form submission to make request in the background. The FrameLoader component displays a nice loader while the request are made. The FrameTarget components are then used to update some of the content on the page.

The Panel component is used to display a nice cart and the Action component listens to the Frame event frame-content, which signals that the new content is being inserted, to open the cart and display the newly inserted content.