Quick Order Interface

Introduction

You can test the Quick Order Interface on our SparkLayer Demo Store
The SparkLayer Quick Order Interface provides wholesale customers with a rapid way to build and place orders on your website. Like the Product Purchasing Interface, the Quick Order Interface replaces certain elements of your existing website; in this case the 'Shopping Cart' and then allows customers to checkout in a matter of clicks.
The Quick Order Interface works as an 'Overlay' and can be accessed on any page by clicking a link (typically in the website's header) or by adding products to an order.
Useful tip: if you would like to show the Quick Order Interface on page load, you can do so by adding #spark-cart to the end of the URL, e.g. https://www.yourstore.com/#spark-cart

Notifications

When a customer adds an item to their order, you can configure the Quick Order Interface to use a 'Toast Notification' rather than loading the entire order each time.
For details on how to configure this, please see our Advanced Functionality guide.
The Quick Order Interface has a built-in Quick Search that lets customers rapidly add products to their order, simply by typing in theSKU. The search results will automatically default to specific pack sizes if enabled and allow easy updating of the quantities required.

CSV Import

It's possible to quickly bulk upload products to appear in the Quick Order Interface by using the 'Import CSV file' feature in the 'Options' menu.
For SparkLayer to recognise the contents of an order, the CSV file has to be formatted in the following way:
sku
qty
code-123
20
code-abc
30
The CSV file must match the column headers exactly (i.e. sku and qty)
Providing the contents of the CSV file includes valid SKUs, all products will be added to the Quick Order Interface and replace the existing contents. If a product requires specific pack sizes to be specified, the CSV Import will round up to the nearest valid pack size.

Shopping Lists

The 'Save as shopping list' feature allows customers to easily save an entire contents of an order for future use. Once products have been added to the Quick Order Interface, under the 'Options' menu, click 'Save as shopping list' and this will prompt for a 'Shopping List Name' to be specified.
The most recent saved shopping lists can be accessed from within the 'Options' menu and any additional shopping lists can be accessed from the My Account Interface.

Updating products

Any updates to products within the Quick Order Interface are done without the need to reload the page, ensuring a fast experience for the customer. The customer can update quantities (increase and decrease), remove products, or add products via the Quick Search.

Order summary

Once the customer has added products to their order, they can see a review of the costs as well as select from a range of options before completing their order via the checkout.
By default, SparkLayer shows pricing to the customer excluding tax charges (i.e. the net prices) and then displays the total tax charges as a separate item.
Because wholesale orders are more restrictive than standard retail orders, the process of completing an order requires very little information to be supplied by the customer. For example, it's common that wholesale customers aren't allowed to add or edit their addresses, or they must use a certain payment method which limits the amount of choices they need to make.
When clicking 'Proceed to Checkout' a simple interface then shows the following:
Item
Details
Order Totals
Order totals summary, including tax applicable
Addresses
Address book to choose a destination shipping address
Payment
Payment method from those available to the customer, e.g. pay on account (see below for more details)
Notes
Order notes that allow them to leave information such as Purchase Order Numbers

Payment methods

SparkLayer supports a range of B2B-specific payment methods that can be tailored on a per-customer basis (learn more here). When customers reach the payment step, they'll see available methods and can easily select their preference.
Available payment methods include:
Payment method
Description
Payment by invoice
This will allow the customer to checkout without having to enter in payment details and apply a Zero-value order
Payment on Account
Similar to above, the customer can checkout without needing to enter any payment details
Upfront Payment
The customer will be required to enter credit/debit card details and pay as normal during the checkout process
Request for quote
The customer can submit their order without choosing a payment method. The order will be marked as a 'Draft' order and can subsequently be edited.
Buy Now Pay Later
Learn more about how this works

Request for Quote orders

The Request for Quote feature lets your B2B customers place an order which can then have edits made against it. For example, you may need to adjust their shipping price or apply an additional discount to their total order cost.
For the customer, when they select 'Request for Quote', they'll be able to place orders without needing to enter the checkout process, making the process extremely rapid.
When the order is placed, it'll be marked as a Draft order that can subsequently be edited and finalised with the customer. For Shopify merchants, this uses the built-in Draft orders functionality within Shopify and you can learn more here.

Checkout process

Clicking 'Complete Order' takes the customer to the checkout process. The checkout process on SparkLayer works in one of two ways:
#
Action
Details
1
Checkout redirect
Some third-party platforms require usage of their own checkout (e.g. Shopify) and the customer will be redirected to their hosted solution to complete the process
2
Checkout via SparkLayer
If you're implementing SparkLayer in a more headless fashion, the customer can complete the process from within the Quick Order Interface without being redirected to a hosted checkout. This loads a thank-you screen with a short summary of their order.
Completing the checkout from within the SparkLayer Quick Order Interface
Using the Shopify Checkout - you can learn more about how SparkLayer works with Shopify in our Shopify Integration guide

After an order is placed

Once the customer has completed their order, this is then sent through to your eCommerce platform just like any standard order (i.e. for a B2C customer). Depending on the set up you've configured via the SparkLayer API, this will then be sent directly to your backend system or via a middleware solution. Please refer to our Frontend Flow for more details.

Persistent saved cart

A great feature of the SparkLayer Quick Order Interface is the 'persistent saved cart'. When a customer adds items to their order, the contents are automatically saved to their browsing session. If the customer then signs out and logs back in, all previous items in their order will be saved.
This feature also works across different devices, e.g. a customer could build an order on a desktop computer and then complete it the next day on a mobile device.

Clearing an order

The Quick Order Interface has a handy way to quickly remove the contents of an order. Within the 'Options' menu, clicking 'Clear Cart' will remove all the products currently added and allow a brand new order to be created.
Last modified 13d ago