@scayle/omnichannel-nuxt

Omnichannel

This is the basis for setting up a new Omnichannel Add On based on Nuxt. It provides a reusable composable, that can be used in the actual shop 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 2

import { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig & { storefront: ModuleOptions } = {
  // ...

  modules: [
    // ...
    [
      '@scayle/omnichannel-nuxt/dist/module',
      {
        host: environment.OMNICHANNEL_API_HOST,
        token: environment.OMNICHANNEL_API_TOKEN,
      },
    ],
  ],
  // ...
}

export default config

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.

[note] When using Nuxt 2, composables can directly be imported from '@scayle/omnichannel-nuxt'. [/note]

useStoreLocator

Getting storesData based on a provided address

Example:

// import { useStoreLocator } from '@scayle/omnichannel-nuxt' // Nuxt 2
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 '@scayle/omnichannel-nuxt' // Nuxt 2
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 '@scayle/omnichannel-nuxt' // Nuxt 2
import { useStoreLocator } from '#omnichannel/composables'

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