SAP Commerce Cloud: Re-Order

SAP Re-Order module allows customers to easily place a new order for the same or similar products that they have previously purchased from an ecommerce store. This module can help increase customer loyalty, retention and revenue by offering convenience and personalization.

Features

As a customer, gain instant access to the Re-Order process, designed to simplify and expedite your re-ordering journey:

Modal with re-order functionality baked in.
Instant visible information about state of reordering, notifications and tag on product card in cart.

The Re-Order module can be used a additional feature for already existing ordering flow.

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 Alokai Sales Team.

From the root of your project run the following command:

npx @vsf-enterprise/storefront-cli add-module re-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 re-order inside.

Frontend Implementation

1. Add internationalization messages

Add translations for the Re-Order module in the order detail page and the cart page.

// storefront-unified-nextjs/app/[locale]/(default)/my-account/my-orders/[id]/page.tsx

export default function OrderDetailsPage({ params: { id } }: OrderDetailsPageProps) {
  const messages = useMessages();

  return (
    <NextIntlClientProvider messages={pick(messages, 'OrderDetailsPage')}>    <NextIntlClientProvider messages={pick(messages, 'OrderDetailsPage', 'ReOrder')}>      <OrderDetailsPageClient id={id} />
    </NextIntlClientProvider>
  );
}

// storefront-unified-nextjs/app/[locale]/(default)/cart/page.tsx

export default function CartPage() {
  const messages = useMessages();
  // ...

  return (
    // ...
    <NextIntlClientProvider
      messages={pick(messages, ['CartPage', 'OrderSummary', 'CartProductCard', 'QuantitySelector'])}      messages={pick(messages, ['CartPage', 'OrderSummary', 'CartProductCard', 'QuantitySelector', 'ReOrder'])}    >
      <CartPageClient />
    </NextIntlClientProvider>
  );
}

In your current order details page add <ReOrderConfirmationModal /> component for reordering.

// storefront-unified-nextjs/app/[locale]/(default)/my-account/my-orders/[id]/page.client.tsx

import { ConfirmationModal as ReOrderConfirmationModal } from '@sf-modules/re-order'; import { parseAsBoolean, useQueryState } from 'nuqs'; // ...

export default function OrderDetailsPageClient({ id }: OrderDetailsPageClientProps) {
  const [, setReOrderModalOpen] = useQueryState('re-order', parseAsBoolean);   // ...

  return (
    // ...
    <aside className="flex flex-col gap-2 px-4 lg:w-[412px] lg:px-0">
      // ...
      <AsideButton icon={SfIconShoppingCart}>{t('aside.reorder')}</AsideButton>      <AsideButton icon={SfIconShoppingCart} onClick={() => setReOrderModalOpen(true)}>
        {t('aside.reorder')}
      </AsideButton>
      // ...
      <ReOrderConfirmationModal onConfirm={() => setReOrderModalOpen(null)} queryParamTrigger="re-order" />    </aside>
    // ...
  );
}

3. Add smaller quantity tag into cart

Additionally, if smaller quantity tag wants to be visible in the cart page, then desiredQuantity property has to be set for the <ProductCard /> component with the wantedQuantities[id] value.

Smaller quantity tag should be removed from a card once product is updated.

// storefront-unified-nextjs/app/[locale]/(default)/cart/components/product-card.tsx

import { useReOrderProducts } from '@sf-modules/re-order'; // ...

export default function ProductCard({ product }: ProductCardProps) {
  const { removeWantedQuantities, wantedQuantities } = useReOrderProducts();   // ...

  return (
    <CartProductCard
      attributes={product.attributes}
      desiredQuantity={wantedQuantities[id]}      disabled={isMutatingCart}
      id={id}
      imageAlt={product.image?.alt}
      imageUrl={product.image?.url}
      key={id}
      maxValue={product.quantityLimit || Infinity}
      minValue={1}
      name={product.name ?? ''}
      onRemove={() => removeCartLineItem.mutate()}      onUpdate={(quantity) => updateCartQuantity.mutate({ quantity })}      onRemove={() => {
        removeCartLineItem.mutate();
        removeWantedQuantities(id);
      }}
      onUpdate={(quantity) => {
        updateCartQuantity.mutate({ quantity });
        removeWantedQuantities(id);
      }}
      price={product.unitPrice}
      productId={id}
      sku={product.sku ?? product.productId}
      slug={product.slug}
      specialPrice={product.unitPrice?.isDiscounted ? formatPrice(product.unitPrice?.regularPrice) : undefined}
      totalPrice={product.totalPrice ? formatPrice(product.totalPrice) : undefined}
      value={product.quantity}
    />
  );
}

With these steps, your Re-Order feature 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 reordering process!