Omnichannel

Overview

The SCAYLE Storefront Application includes a built-in integration with the SCAYLE Omnichannel Add-on. The Omnichannel Add-on connects physical stores with your online shop, providing a unified customer experience across all channels. This guide covers setup, configuration, and how to utilize features like the Store Locator and real-time Store Availability.

This integration is powered by the @scayle/omnichannel-nuxt NPM package, which is pre-installed in the Storefront Application (versions 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 Storefront Application (e.g., if you have a custom Nuxt setup), you can install the Omnichannel module manually.

First, add the NPM package:

# Starting with Storefront Application v1.11.x
pnpm add @scayle/omnichannel-nuxt
# Until Storefront Application v1.10.x
yarn add @scayle/omnichannel-nuxt

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

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

Configuration

The Omnichannel integration requires a few additional environment variables to be set in your .env file:

NUXT_OMNICHANNEL_API_TOKEN
NUXT_OMNICHANNEL_API_HOST
NUXT_PUBLIC_Maps_API_KEY

You can request Omnichannel API credentials from your SCAYLE Account Manager. For the Google Maps integration, you will need to create a new API Key in the Google Cloud Console. If these variables are correctly set, the Omnichannel integration in the Storefront Application will be automatically enabled, and the Store Locator and Store Availability features will become 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 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 view 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 a store 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.

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 package provides the useStoreLocator composable for interacting with the Omnichannel API. Use this composable if you need to integrate Omnichannel functionality in other parts of your application.

Example: Getting storesData based on a provided address

Example: Getting variantStoresData based on a provided address

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

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