SAP Commerce Cloud: Quick Order

SAP Quick Order is a module for shop owners looking to streamline the purchasing process of their customers. It adds a dynamic form within your store that offers a seamless and intuitive experience tailored for busy professionals.

Features

As a customer, gain instant access to the Quick Order form, designed to simplify and expedite your ordering journey:

Auto-fill box for adding single products.
Adding multiple products via multiline form control.
Uploading shopping lists in CSV format.
Quantity management - lets you choose the exact quantity for each item without navigating through multiple screens.
Storing data for future sessions.
Moving the whole quick order list into the cart with one simple click.

The Quick Order module can be used on a separate page or as a nice addition to your own, custom b2b space.

Installation

Add the module files

To install the module, you need an enterprise license and credentials. Contact your Customer Support Manager if you're already a customer. If you're not a customer yet, contact our sales team.

From the root of your project run the following command:

npx @vsf-enterprise/storefront-cli add-module quick-order -e [sapcc,sapcc-b2b]

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 quick-order inside.

Middleware Extension

This module adds additional, SAP-specific middleware methods. Make sure to install the Quick Order extension in the Middleware configuration to start using the quick-order module.

// storefront-middleware/integrations/sapcc/config.ts

import type { MiddlewareConfig } from "@vsf-enterprise/sapcc-api";
import type { ApiClientExtension, Integration } from "@vue-storefront/middleware";
import { multistoreExtension, unifiedApiExtension } from "./extensions";
import { quickOrderExtensionFactory } from "@sf-modules-middleware/quick-order"; 
// ...

export const config = {
  location: "@vsf-enterprise/sapcc-api/server",
  configuration: {
    // ...
  },
  extensions: (extensions: ApiClientExtension[]) => [
    ...extensions,
    unifiedApiExtension,
    ...(IS_MULTISTORE_ENABLED === "true" ? [multistoreExtension] : []),
    quickOrderExtensionFactory(),   ],
} satisfies Integration<MiddlewareConfig>;

Then, export the type of the new extension in the types.ts file in root directory of the Middleware.

// storefront-middleware/types.ts

export {
  type UnifiedEndpoints,
} from "./integrations/sapcc/types";

export type { QuickOrderEndpoints } from "@sf-modules-middleware/quick-order";

Frontend Implementation

1. Extend SDK configuration

First, you need to add the newly installed extension to the SDK config. To do so, edit the sdk/sdk.config.ts file in your Next.js Storefront directory.

// storefront-unified-nextjs/sdk/sdk.config.ts

import { contentfulModule } from '@vsf-enterprise/contentful-sdk';
import { CreateSdkOptions, createSdk } from '@vue-storefront/next';
import type { UnifiedEndpoints } from 'storefront-middleware/types'; import type {   UnifiedEndpoints,   QuickOrderEndpoints, } from 'storefront-middleware/types'; 
//...

export const { getSdk } = createSdk(options, ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
  unified: buildModule(middlewareModule<UnifiedEndpoints>, {
    apiUrl: `${middlewareUrl}/commerce`,
    defaultRequestConfig: {
      headers: getRequestHeaders(),
    },
  }),
  quickOrder: buildModule(middlewareModule<QuickOrderEndpoints>, {     apiUrl: `${middlewareUrl}/commerce/quick-order`,     defaultRequestConfig: {       headers: getRequestHeaders(),     },   }),   contentful: buildModule(contentfulModule, {
    apiUrl: `${middlewareUrl}/cntf`,
  }),
}));

export type Sdk = ReturnType<typeof getSdk>;

2. Create a Quick Order page

In your pages, directory create a quick-order page with a default layout and add the quick-order component from this module:

// storefront-unified-nextjs/pages/quick-order.tsx

import { QuickOrder } from '@sf-modules/quick-order';
import { useTranslation } from 'next-i18next';
import { createGetServerSideProps } from '~/helpers/ssr';
import { DefaultLayout } from '~/layouts';

export const getServerSideProps = createGetServerSideProps({ i18nNamespaces: ['common', 'footer'] });

export function QuickOrderPage() {
  const { t } = useTranslation();

  return (
    <DefaultLayout
      breadcrumbs={[
        { link: '/', name: t('home') },
        { link: '/quick-order', name: t('quickOrder') },
      ]}
    >
      <QuickOrder />
    </DefaultLayout>
  );
}

export default QuickOrderPage;

With these steps, your quick order page is now effectively integrated with SAP Commerce Cloud. You've just provided a practical solution for your customers who want a hassle-free and efficient buying process!