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.

Featuresri:link

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

Installationri:link

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 filesri:link

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 Implementationri:link

Add the Toolkit panel component to your layout:

1. Add the Toolkit panel component to your layoutri:link

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>
    // ...
  );
}