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.
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
- To enable the cart in your Popup Storefront, log in to the Dashboard and browse to Storefronts -> Popup Storefronts.
- Click SETTINGS for the specific Popup Storefront where you want to enable the cart.
- On the General Settings page, select the True check box under the Show Shopping Cart field.
- Click .
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.
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.
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").
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.