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 at least in version 2.3.1 installed in your project.

Add the module files

To install the module, you need an enterprise license and credentials. Contact your Customer Success Manager if you're already a customer. If you're not a customer yet, contact Alokai Sales Team.

From the root of your project run the following command:

npx @vsf-enterprise/storefront-cli add-module sfcc-toolkit -e sfcc

Follow the instructions in the command line to complete the installation. To make sure the installation is finished, go to the apps/storefront-middleware/sf-modules folder and check if there's a folder named sfcc-toolkit inside.

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: { locale } }: RootLayoutProps) {
  // ...

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