Omnichannel

Introduction

The Storefront Boilerplate also includes built-in integration with the SCAYLE Omnichannel Add-on. The integration is powered by the @scayle/omnichannel-nuxt npm package, which is pre-installed in the Boilerplate (1.0.0-rc.8 and later). Like @scayle/storefront-nuxt updates to this package will be regularly published for new Omnichannel features.

Manual Installation

If you are not using the Boilerplate, you can also install the module manually. First, add the npm package:

yarn add @scayle/omnichannel-nuxt

Then in your nuxt config file, add the module to the modules option.

modules: [
    '@scayle/storefront-nuxt/module',
    '@scayle/omnichannel-nuxt/module',
],

Configuration

The integration requires a few additional environment variables to be set:

NUXT_OMNICHANNEL_API_TOKEN
NUXT_OMNICHANNEL_API_HOST
NUXT_PUBLIC_GOOGLE_MAPS_API_KEY

You can request Omnichannel API credentials from your SCAYLE Customer Success Manager. For the Google Maps integration, you will have to create a new API Key in the Google Cloud Console. If these variables are set, the Omnichannel integration in the Storefront Boilerplate will be automatically enabled and the Store Locator and Store Availability features will be visible.

Store Locator

With the Omnichannel integration enabled, the Store Locator page becomes available. It can be accessed by clicking the location marker icon in the header and it brings the user to a map where they can search for stores in their vicinity.

The user can search by address, city name, or postal code. The SCAYLE Omnichannel API is then used to find a list of local stores, sorted by the nearest first. The user can use the map to see where the stores are located and see details such as the phone number and opening hours.

Alternatively, users can click the location marker next to the search field to search by geo-location. This requires that they permit the site to use their geo-location.

By clicking the ribbon icon in the top-right of the card, the user can save a store as their favorite. The favorite store will be saved in the browser's local storage and will be the default store used when querying stock availability.

To access the favorite store in other areas of the application, use the useFavoriteStore composable. The returned value is reactive and changes will be persisted.

const favoriteStoreId = useFavoriteStore()
favoriteStoreId.value = 7

Store Availability

With the Omnichannel integration enabled, an additional widget is also added to the Product Detail page. Once a specific size is selected, the availability of the product will be queried for the user's favorite store and shown above the add to basket button. The user can also select a different store to check if there is no stock available or if they would like to shop at a different store.

Composables

The @scayle/omnichannel-nuxt provides a composable useStoreLocator for interacting with the Omnichannel API. Use this composable if you need to integrate the Omnichannel in other parts of the application.

Example: Getting storesData based on a provided address

import { useStoreLocator } from '@scayle/omnichannel-nuxt'

const { storesData, refreshStores } = useStoreLocator()
const address = 'Hamburg'
await refreshStores(address)

Example: Getting variantStoresData based on a provided address

import { useStoreLocator } from '@scayle/omnichannel-nuxt'

const { variantStoresData, refreshVariantStores } = useStoreLocator()
const address = 'Hamburg'
const storeId = 12
await refreshVariantStores(storeId, { address: address })

Example: Getting storeVariantData based on provided store ID and variant ID

import { useStoreLocator } from '@scayle/omnichannel-nuxt'

const { storeVariantData, refreshStoreVariant } = useStoreLocator()
const variantId = 1
const storeId = 12
await refreshStoreVariant(variantId, storeId)

For more information on the Omnichannel API, see the Omnichannel Dev Guide.