About the Popup Storefront Cart
Popup Storefronts can optionally include a shopping cart that allows buyers to see and modify the entire contents of the order, directly in the Popup Storefront. This article explains the Popup Storefront cart feature.
Popup Storefronts can optionally include a shopping cart that allows buyers to see and modify the entire contents of the order without leaving the Popup Storefront dialog. Plus, if you use the optional data-continuous markup directive when your page loads, the cart session persists even if the customer closes the Popup Storefront dialog.
You can enable the cart for each Popup Storefront by selecting a simple checkbox in the FastSpring App. Using this built-in cart may make it unnecessary for you to develop a shopping cart on your own pages using advanced Store Builder Library (SBL) functionality.
Enabling the Popup Storefront Cart
- To enable the cart in your Popup Storefront, log in to the FastSpring App and browse to Storefronts -> Popup Storefronts.
- Click Settings for the specific Popup Storefront where you want to enable the cart.
- On the Checkout page, select the True checkbox under the Show Shopping Cart field.
- Click .
When a customer clicks a button on your page that launches the Popup Storefront using a standard method, the Popup Storefront opens as usual. If you have enabled Show Shopping Cart for the Storefront, the customer a cart icon will appear at the top left-hand corner of the popup window. The total quantity of all items currently in the cart (added via Store Builder Library) appears at the top right-hand corner of the button.
Clicking the cart button opens the cart interface. A separate line item appears for each item currently in the cart, including the product's icon and display name. For subscription products, the billing terms also appear.
Customers can see and change the quantity of each item (if permitted by the product's Pricing settings), or click the X to remove an item from the cart. Clicking the button or Continue Checkout causes the standard checkout dialog to be displayed.
Cross-Sells in the Popup Cart
The Popup Cart can display up to ten cross-sell offers based on the products in the order. Cross-sell offers appear at the bottom of the cart, with an Add button next to each offer. The style of the Add button automatically matches the style of the Continue Checkout button.
Launching the Popup Cart Directly
If you use the latest version of Store Builder Library (version 0.8.1 or greater), you can open the Popup Storefront directly to the cart rather than initially showing the checkout page. There are two ways you can do this:
- fastspring.builder.viewCart() (Note: This does not currently accept a session ID parameter, but you can still open a pre-created session using the standard checkout() method.)
- the markup directive data-fsc-action="ViewCart" (this can be stacked together with other actions, such as "Add").
If you want the cart items and quantities to persist even when the buyer closes the Popup Storefront, please ensure that the script that loads SBL on your webpage includes data-continuous="true". For more information about this, please see Getting Started with Store Builder Library. With data-continuous enabled, the customer could even close the popup dialog and make changes to the cart contents via your page's SBL functions. When the customer opens the popup again in the same browser session, the current contents of the SBL session appear in the cart automatically.