Collapse Menu
Documentation
FastSpring App
Contact Support

Popup Storefront Cart

Overview

How to use the shopping cart in your Popup Storefront

Table of Contents

You can include a shopping cart inside the Popup Storefront from which customers can see and modify the contents of their order. This shopping cart can also house up to 10 Cross-Sells. If you use the data-continuous markup directive, this enables the cart session to persist after the customer closes the Popup Storefront.

Customer Experience

When it is enabled, the shopping cart icon appears at the top, left corner of the popup storefront. The Store Builder Library displays the total number of all products in the cart; customers can click on the cart to adjust quantities of their products and view subscription terms.

2021-09-02_08-47-11.png

When the customer clicks Continue Checkout, the checkout dialog displays. Launching the cart directly bypasses the checkout dialog, and removes the back arrow from the cart page.

The color of the quantity indicator is the Price Line Color, which you can configure under Styling > Pricing Block.


Enable the Popup Storefront Cart

  1. In the FastSpring App, go to Storefronts > Popup Storefronts.
  2. Click Settings on the specific Popup Storefront where you want to enable the cart.
  3. On the Checkout page, select the True checkbox under the Show Shopping Cart field.
  4. Click Save.


Directly Launch the Popup Cart

With Version 0.8.1 or later of the Store Builder Library, you can launch the Popup Cart rather than the Popup Storefront at checkout. You can do this with fastspring.builder.viewCart(), or data-fsc-action=”ViewCart”. Data-fsc-action=”ViewCart” may be stacked with additional actions, such as “Add”. 

To control the Store Builder Library version that your page loads, update the URL in the src directive of the script, such as https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.3/fastspring-builder.min.js
 

Keep Cart Items for Future Sessions

To ensure selected products remain in the customer’s cart when they close the Popup Storefront, include the data-continuous =”true” callback in your Store Builder Library (SBL) script.

When data-continuous is enabled, the customer can close the popup dialog and make changes to the cart contents with your page’s SBL functions. If they re-open the Popup Storefront during the same browser session, the selected contents from the SBL session automatically appear in the cart.