This article applies to Contextual Commerce. (Looking for Classic Commerce documentation?)
Popup Storefronts are powered by FastSpring's Store Builder Library and offer both very simple and advanced ways to integrate with your website.
Create and Customize Popup Storefronts
When using a Popup Storefront you will need to get in touch with FastSpring support to "whitelist" domains where the Popup Storefront will be shown. All of your domains (including those you will use for testing and development) need to be whitelisted.
Placing a Popup Storefront On Your Website
The snippet is a part of the Store Builder Library and will look similar to this:
After the snippet has been added to the <head> of your website, you can show the popup on the page.
Placing Test Orders via a Popup Storefront
If your Popup Storefront is offline, the provided snippet will automatically include the URL for your test Storefront. If your Storefront is online but you want to place test orders, you can also add the string test to the URL found in the data-storefront parameter of the snippet, as shown in the example above. The string test should be inserted between your company name and onfastspring.com.
In the example above - vendor.test.onfastspring.com/popup-vendor - the company name would be vendor, followed by test, indicating that only test orders will be processed, followed by the remainder of the URL for the Popup Storefront (onfastspring.com/popup-vendor).
Please use caution when implementing test mode Popup Storefronts on your webpages; you do not want live customers to be able to place test orders, so it is important to make sure any webpage with a test mode Popup Storefront is not available externally / outside of your network.
If you want to modify the webpage to call the live Popup Storefront (and the Storefront is online), you can simply remove the 'test' string from the URL in the script. To continue the example above, the resulting live URL would be vendor.onfastspring.com/popup-vendor.
Triggering the Popup Window
The easiest way to show the popup on the page is by using an HTML directive:
The example directive above will add "Product One" to the cart and open the Popup Storefront to initiate checkout (assuming that "product-one" is the product path / product ID of a product that exists in your Store).
The value that you enter for the data-fsc-item-path-value should be the product path (also called the product ID) for the product in your Store that will be added to the cart.
- From the Dashboard, select the Products menu and then select Products, Bundles or Subscriptions, depending on the item you want to add to the cart via your Popup Storefront.
- Click the tile of the item you want to add to the cart. The item's details will appear.
- The product ID / product path can be found at the top left-hand corner of the item's details, as illustrated above. This is the value you will enter for the data-fsc-item-path-value in your HTML directive to open a Popup Storefront.
See the Popup Storefront from the example above in action:
Once you have added the Popup Storefront and made sure it's working, you can implement advanced checkout scenarios by exploring capabilities of the Store Builder Library.
Library Callbacks for Popups
Using Store Builder Library, you can set callback functions that will be called on certain events that happen inside the popup, for additional tracking and behavior options. Please see Getting Started with Store Builder Library for more information on callbacks and available options.