Salesforce Commerce Cloud: Storefront Toolkit

The Storefront Toolkit is a module that allows site merchandizers to view the storefront as it would appear at a specific date and time. They can specify a customer group or source code and see how the storefront looks when logged in as a customer of the group or using the source code.

Features

The Toolkit module provides a set of features designed to enhance the promotion setup process, such as:

Preview date and time
Setting a specific customer group
Setting a specific source code

Installation

Prerequisite: Make sure you have the @vsf-enterprise/unified-api-sfcc package installed in your project.

To get access to this module and installation assistance, please contact the Alokai sales team or reach out to your Customer Support Manager.

Frontend Implementation

Add the Toolkit panel component to your layout:

1. Add the Toolkit panel component to your layout

In your root layout file, add the <ToolkitPanel /> component. Also, provide the newly added translations to the main layout. To do that, you need to include the SfccToolkit key to the <NextIntlClientProvider /> component:

// storefront-unified-nextjs/app/[locale]/layout.tsx

import './globals.scss';
import { ToolkitPanel } from '@sf-modules/sfcc-toolkit'; 
// ...

export default async function RootLayout({ children, params }: RootLayoutProps) {
  const { locale } = await params;
  // ...

  return (
    // ...
    <NextIntlClientProvider messages={pick(messages, 'Notifications.NotificationAlert')}>
    <NextIntlClientProvider messages={pick(messages, 'Notifications.NotificationAlert', 'SfccToolkit')}>
      <Providers initialCurrency={currencies} sdkOptions={sdkConfig}>
        <ToolkitPanel />
        {children}
      </Providers>
    </NextIntlClientProvider>
    // ...
  );
}

1. Add the Toolkit panel component to your layout

In your main app.vue file, add the <ToolkitPanel /> component:

// storefront-unified-nuxt/app.vue

<template>
  <Body class="font-body" />
  <ToolkitPanel />
  <VitePwaManifest />
  <NuxtLayout name="root">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </NuxtLayout>
</template>

<script setup lang="ts">
  import { ToolkitPanel } from '@sf-modules/sfcc-toolkit'; 

  usePageTitle();
  const { locale } = storeToRefs(useSfState());
  // ...
</script>

How to use the Toolkit module

UI Panel

The Toolkit module introduces an additional panel to the user interface. This panel is where the merchandizer can set their site preview parameters.

You can display the Toolkit panel by adding the toolkit=true query parameter, e.g.: https://my-domain.com/category?toolkit=true. You can add this parameter to any page URL to open the Toolkit panel since the component is added globally on the app level.

Site Preview

The merchandizer can enter a specific date and time to view what the site will look like at that point in time. They can also enter a customer group and/or source code to emulate what the site would look like for a customer in that group and/or using that source code. At least one of the available parameters must be provided.

Once the context is applied, it can be modified or cleared using the respective buttons. Modifications do not take place until the new parameters are applied by re-submitting the form with the "Preview" button.

Once the preview is applied, any future requests will use its context. In case the content being previewed is already displayed on the page, a page refresh can be applied in order to fetch the content with the preview parameters applied.

Salesforce Commerce Cloud: Storefront Toolkit

On this page