Advanced Configurations

Introduction

Advanced configurations allow you to customise a variety of SparkLayer settings that are used to trigger certain actions on the frontend.

These include actions such as which URL should trigger the My Account Interface (e.g. /account) to overwriting some of the default text used in the various interfaces.

If you're using SparkLayer on a third-party eCommerce platform, many of the below will be automatically enabled by default.

This guide gives an overview of what's possible and our team is happy to help if you have any specific queries.

Enabling advanced configurations

To enable the advanced configurations, a special code snippet needs to be added to the <head>...</head> of your main website header beneath the main SparkLayer JavaScript. An example is included below that defines a siteId and the eCommerce platform being used, e.g. Shopify

HTML Example
HTML Example
<head>
...
...
<script async src="https://cdn.sparklayer.io/spark.1.0.js"></script>
<script>
window.sparkOptions = {
siteId: 'your-site-id',
platform: 'shopify'
};
</script>
</head>

Configuration: Account & Cart Redirects

When SparkLayer is installed on a website, it replaces the existing My Account and Shopping Cart pages. You can learn more about how this works in our guide here.

SparkLayer has special handling whereby if a customer accesses these pages whilst logged, it will redirect them to the correct SparkLayer interface instead. For example, if they visit www.yourstore.com/account, it will instead take them to the homepage with the My Account Interface loaded.

Key

Details

accountRedirect

The URL to redirect the user to once they are logged in or if they try and access any account pages.

cartRedirect

The URL to redirect the user to when the access the /cart URL on your website

Code to include

Configuration Code
Configuration Code
<script>
window.sparkOptions = {
siteId: 'your-site-id',
accountRedirect: {
urlRegex: /\/account/g,
goTo: '/#spark-account',
},
cartRedirect: {
urlRegex: /\/cart/g,
goTo: '/#spark-cart',
},
};
</script>

If you would like to show the My Account interface or Quick Order Cart on page load, you can do so by adding #spark-account and #spark-cart to the end of the URL.

Related to the above, the SparkLayer Frontend can also be triggered by clicking buttons that may already exist on your website. For example, you may have a prominent link in your website header to the My Account area or the Shopping Cart. SparkLayer has a 'catch all' that simply updates the behaviour any time these buttons are clicked. The available configurations are as follows

Key

Details

accountButtonSelectors

If the user is logged in, the My Account interface shows. If the user is not logged in, they will be diverted back to your standard login page.

logoutButtonSelectors

This will log the user out of SparkLayer and, if authLogoutUri is set, it will then forward the user to that location (see below)

cartButtonSelectors

If the user is logged in, the Quick Order interface will be shown.

Code sample

Configuration Code
Configuration Code
<script>
window.sparkOptions = {
siteId: 'your-site-id',
accountButtonSelectors: '[href="/account"], [data-spark-link=account]',
logoutButtonSelectors: '[href="/account/logout"], [data-spark-link=logout]',
cartButtonSelectors: '[href="/cart"], [data-spark-link=cart]'
};
</script>

Configuration: eCommerce Platform

SparkLayer has built-in controls for specific eCommerce platforms that let you overwrite a number of different actions in the storefront experience.

Learn more about SparkLayer Platform Integrations here.

Enabling the eCommerce Platform Configuration can be done with a single line of code

Configuration Code
Configuration Code
<script>
window.sparkOptions = {
siteId: 'your-site-id',
platform:'shopify'
};
</script>

In the example above, Shopify has been enabled as the eCommerce platform. When adding this command, the special SparkLayer configurations are automatically added behind-the scenes. If you need to modify these, you can use the following configurations:

Key

Details

useSparkLogin

SparkLayer has a built in login modal. By default, this should be set to false to use the existing eCommerce platform login page

authLogoutUri

The URL that should trigger the user being logged out

accountRedirect

The URL that the user is redirected to upon successfully signing in

cartRedirect

The URL the user is redirected to if they access the /cart url

termsAndConditionsLink

The page the terms and conditions link in the SparkLayer Quick Order Interface should direct to

Code sample

Configuration Code
Configuration Code
<script>
window.sparkOptions = {
siteId: 'your-site-id',
platform:'shopify',
useSparkLogin: false,
authLogoutUri: '/account/logout',
accountRedirect: {
urlRegex: /\/account((?!\/[login|reset]).*)/g,
goTo: '/',
},
cartRedirect: {
urlRegex: /\/cart/g,
goTo: '/',
},
termsAndConditionsLink: '/policies/terms-of-service'
};
</script>

Configuration: Login Interface

SparkLayer has a built in Login Interface that enables your customers to quickly sign into their account via a modal overlay.

To enable this feature, simply set useSparkLogin to true

Configuration Code
Configuration Code
<script>
window.sparkOptions = {
siteId: 'your-site-id',
useSparkLogin: true,
};
</script>

Configuration: Language translations

SparkLayer uses 'language strings' to render the text used in the Frontend Interfaces. By default, English is fully supported, but these could be extended to any language if required.

Key

Details

translations

This overwrites any languages strings defined in the array

Code sample

Configuration Code
Configuration Code
<script>
window.sparkOptions = {
siteId: 'your-site-id',
translations: {
en: {
cart: {
header: {
title: "Your Wholesale Order"
}
}
}
}
};
</script>

For the full list of available language strings, please contact us.

Configuration: CSS Styles

When SparkLayer loads on a product page, it does so by replacing existing components on your store. You can learn about how this works in our guide here.

The advanced configurations can be used to define which elements are hidden or displayed by SparkLayer giving you control over what your wholesale customers do and don't see. Whilst this is useful, it is recommended to use your platform to hide and show elements as this may induce a 'flicker on page load' whilst the SparkLayer JavaScript is loaded.

Code sample

Configuration Code
Configuration Code
<div data-spark="b2c-only">
Only shown for B2C users.
</div>
<div data-spark="b2b-only">
Only shown for B2B users.
</div>

Accessing the GraphQL API

SparkLayer uses GraphQL behind the scene and you can access the SparkLayer GraphQL API via the following method

const results = await window.spark.fetch("your query", {"your variables": true});

To view the full documentation for the SparkLayer GraphQL API, click here.