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.

Featuresri:link

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

ri:checkbox-circle-fill
Auto-fill box for adding single products.
ri:checkbox-circle-fill
Adding multiple products via multiline form control.
ri:checkbox-circle-fill
Uploading shopping lists in CSV format.
ri:checkbox-circle-fill
Quantity management - lets you choose the exact quantity for each item without navigating through multiple screens.
ri:checkbox-circle-fill
Storing data for future sessions.
ri:checkbox-circle-fill
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.

Installationri:link

Add the module filesri:link

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

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

1. Extend SDK configurationri:link

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

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!