Vue Storefront is now Alokai! Learn More
Quick Order

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.

Middleware Extension

This module adds additional, SAP-specific middleware methods. Make sure to extend middleware with them to start using quick-order.

That step includes:

  1. Extending the unifiedApiExtension methods with the apiMethods property.
  2. Implementing the new API methods.
// middleware.config.ts
import { type Config, type Context, createUnifiedExtension, methods, normalizers } from "@vsf-enterprise/unified-api-sapcc";
import {   getQuickOrderCart,   addQuickOrderCartLineItems,   moveQuickOrderCartLineItems, } from "@sf-modules-middleware/quick-order"; 
const apiMethods = methods<typeof normalizers>(); const unifiedApiExtension = createUnifiedExtension<Context>()({
  normalizers,
  apiMethods: {
    ...apiMethods,     getQuickOrderCart,     addQuickOrderCartLineItems,     moveQuickOrderCartLineItems,   },
});

With these changes new, custom methods will become available in the SDK:

  • getQuickOrderCart,
  • addQuickOrderCartLineItems,
  • moveQuickOrderCartLineItems.

Frontend Implementation

1. 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:

// 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!