Collapse Menu
Docs Home
Extensibility Options
Contact Support

About the Popup Storefront Cart

Overview

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 will persist even if the customer closes the Popup Storefront dialog.

You can enable the cart for each Popup Storefront by selecting a simple check box in Dashboard; this may make it unnecessary for you to develop a shopping cart on your own pages using advanced Store Builder Library functionality.

Enabling the Popup Storefront Cart

  1. To enable the cart in your Popup Storefront, log in to the Dashboard and browse to Storefronts -> Popup Storefronts.
  2. Click SETTINGS for the specific Popup Storefront where you want to enable the cart.
  3. On the General Settings page, select the True check box under the Show Shopping Cart field.

  4. Click .

 

Customer Experience

When a customer clicks a button on your page that launches the Popup Storefront (e.g. via fastspring.builder.checkout(), or using the markup directive data-fsc-action="checkout"), the Popup Storefront will open as normal. If Show Shopping Cart is enabled for the Storefront, the customer will see a cart icon 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) will be displayed at the top right-hand corner of the button.

 Tip

The color of the quantity indicator here uses the Price line color set under Colors and Styling -> Pricing Block.


Clicking the cart button opens the cart interface. For each item currently in the cart, the product's icon and display name are shown. For subscription products, the billing terms are also shown.


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. If there is only one item in the cart, the X will not be displayed to prevent the cart from being emptied.

Clicking the  button or Continue Checkout will cause 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 are displayed at the bottom of the cart, with an Add button next to each offer. The Add button is automatically styled to match the appearance of the Continue Checkout button.

 Note

Each product can have an optional Display message configured for its cross-sell offers. In the example above, the Display message is "Customers Also Purchased...". However, if more than one of the products in the order has a cross-sell offer, the Popup Cart only renders the Display label for the first product added at the top of the cross-sell section.

 

Launching the Popup Cart Directly

If you use the latest version of Store Builder Library (SBL version 0.8.1 or greater) in your script that loads the Popup Storefront, there are two ways you can open the Popup Storefront directly to the cart rather than showing the checkout page and letting buyers click the cart button to see the cart contents:

  • 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").

 Note

To control the version of SBL that your page loads, simply update the URL in the src directive of the script, e.g.:  https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.2/fastspring-builder.min.js.

 


Cart Persistence

If you want the contents of the cart to persist even when the buyer closes the Popup Storefront, please ensure that your web page includes data-continuous="true" in the script that loads SBL. For more information about this, please see Getting Started with Store Builder Library. With data-continuous enabled, the buyer could even close the popup dialog, make changes to the cart contents via your page's SBL functions, and then when the popup is opened again, the current contents of the SBL session will be in the cart automatically.

Try FastSpring

Get a free account and see why FastSpring is the ecommerce partner of choice for software providers around the world. Try our full-service ecommerce solution today to unlock revenue growth for your online company.