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.

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

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