@scayle/omnichannel-nuxt NPM

Omnichannel

This is the basis for setting up a new Omnichannel Add-On integration using Nuxt. It provides a reusable composables, that can be used in the actual storefront project.

Getting started

To start working with @scayle/omnichannel-nuxt, make sure to register it as a module in your nuxt.config.ts file:

Nuxt 3

export default defineNuxtConfig({
  modules: ['@scayle/omnichannel-nuxt/module'],
  runtimeConfig: {
    /** Omnichannel runtime configuration */
    omnichannel: {
      apiHost: '', // Override: NUXT_OMNICHANNEL_API_HOST
      apiToken: '', // Override: NUXT_OMNICHANNEL_API_TOKEN
    },
  },
})

Architecture

The Omnichannel Add-On package provides useStoreLocator composable, which can be used to call the following methods:

refreshStores to get storesData based on provided address
refreshVariantStores to get variantStoresData based on provided store ID
refreshStoreVariant to get storeVariantData based on provided store ID and variant ID

List of composables

When using Nuxt 3, composables are automatically registered and do not need to be imported explicitly. The Nuxt 3 composables can optionally be imported using the import alias #omnichannel/composables.

useStoreLocator

Getting storesData based on a provided address

Example:

import { useStoreLocator } from '#omnichannel/composables'

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

Getting variantStoresData based on a provided address

Example:

import { useStoreLocator } from '#omnichannel/composables'

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

Getting storeVariantData based on a provided store ID and variant ID

Example:

import { useStoreLocator } from '#omnichannel/composables'

const { storeVariantData, refreshStoreVariant } = useStoreLocator(
  'useStoreLocator',
  ['openingTimes'],
)
const variantId = 1
const storeId = 12
await refreshStoreVariant(variantId, storeId)

What is SCAYLE?

SCAYLE is a full-featured e-commerce software solution that comes with flexible APIs. Within SCAYLE, you can manage all aspects of your shop, such as products, stocks, customers, and transactions.

Learn more about SCAYLE’s architecture and commerce modules in the docs.