The SparkLayer Frontend

Introduction
Once SparkLayer is set up to start receiving B2B data and it has been integrated with your eCommerce platform, the next step is to enable the SparkLayer Frontend; this is the visual and interactive element of SparkLayer that the end user (the wholesale customer) will see.
The SparkLayer Frontend is a JavaScript overlay that replaces specific parts of your existing eCommerce website with wholesale ordering capabilities. This all happens seamlessly when a wholesale customer logs into your website and it's what they interact with to see their unique pricing, place orders, and to see their order history. 
It works across different devices (e.g.desktop, tablet, mobile) and contains the core features needed to offer a great wholesale ordering experience!
The SparkLayer Frontend Interfaces
There are four core interfaces to the SparkLayer Frontend:
#
Interface                  
Details
1
​Login form​
This can optionally replace the existing login form on the website with a special 'modal overlay' that allows customers to sign in. Note, this is not necessary to use for third-party platforms such as Shopify.
2
​Product  Purchasing​
This replaces the standard product purchasing interface on your product etail page with a more wholesale-specific one, displaying the customers' product pricing in a clear and concise well. It also includes functions such as pack-size ordering, quantity price breaks, and support for multi-dimensional products (e.g. colour and size)
3
​Quick Order​
This replaces the standard 'Shopping Cart' and keeps a running summary of all items the customer adds to their order an allows them to complete their checkout
4
​My Account​
This allows wholesale customers to view their complete order history, address book, and other basic account details.
You can follow the links above to learn more about each interface!
How SparkLayer is loaded
SparkLayer is designed to be as lightweight as possible and uses modern JavaScript technology to power the frontend. All elements of SparkLayer are fully-hosted using a best-of-breed server infrastructure, meaning there's no code for you to self-manage, host, or maintain going forward.
For performance, SparkLayer Frontend only loads when a customer successfully logs into a website; all loading of the interfaces is asynchronous which means a negligible impact on page load times and performance even though SparkLayer is a hosted third-party solution. The result is the end customer will have a rapid experience browsing products and placing orders.
Our Integration Guide runs through the steps to install the SparkLayer Frontend on a website.
The Frontend Flow
Because the SparkLayer Frontend only interacts with specific areas of the website, this means it's extremely lightweight and really only touches the product purchasing experience. The diagram below gives an overview of key areas of interaction on a standard storefront.
SparkLayer Frontend Flow - Click to zoom

API Simulation Environment

Last modified 6d ago

Copy link

Contents

Introduction

The SparkLayer Frontend Interfaces

How SparkLayer is loaded

The Frontend Flow