Vue Storefront is now Alokai! Learn More
Re-Order

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.

Middleware Extension

This module adds additional, SAP-specific middleware methods. Make sure to extend middleware with them to start using the Re-Order module.

That step is already provided with the Storefront and it includes:

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

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

  • addReOrderCartLineItems

Frontend Implementation

1. Add Re-Order modal into your order details

In your current order details component add modal for reordering.

// components/OrderDetailsModal/OrderDetails.tsx
import { ConfirmationModal as ReOrderConfirmationModal } from '@sf-modules/re-order';
import { SfIconShoppingCart, useDisclosure } from '@storefront-ui/react';

export function OrderDetails() {
  const { isOpen: reOrderModalOpen, open: openReOrderModal, close: closeReOrderModal } = useDisclosure();

  return (
        ...
      </div>
    </DescriptionList>
    <div className="flex flex-col gap-2 pt-10 mt-6 border-t border-neutral-200">
      ...
      <OrderButton slotPrefix={<SfIconShoppingCart />} onClick={openReOrderModal}>
        Reorder
      </OrderButton>
      ...
    </div>
    <ReOrderConfirmationModal open={reOrderModalOpen} onCancel={closeReOrderModal} onConfirm={closeReOrderModal} />
    ...
  );
}

Additionally if smaller quantity tag wants to be visible in product card section, which is CartProductCardWrapper, then desiredQuantity property has to be set with wantedQuantities[id] value.

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

export function CartPageContent() {
  const { wantedQuantities } = useReOrderProducts();

  return (
    ...
    <ul className="col-span-7 mb-10 md:mb-0">
      {cart.lineItems.map(
        ({ id, productId, attributes, image, name, unitPrice, quantity, slug, totalPrice, quantityLimit }) => (
          <CartProductCardWrapper
            key={id}
            attributes={attributes}
            id={id}
            productId={productId}
            imageUrl={image?.url}
            imageAlt={image?.alt}
            name={name ?? ''}
            price={formatPrice(unitPrice?.value!)}
            totalPrice={formatPrice(totalPrice as SfMoney)}
            specialPrice={unitPrice?.isDiscounted ? formatPrice(unitPrice?.regularPrice) : undefined}
            minValue={1}
            maxValue={quantityLimit || Infinity}
            value={quantity}
            slug={slug}
            desiredQuantity={wantedQuantities[id]}          />
        ),
      )}
    </ul>
    ...
  );
}

And inside CartProductCardWrapper.tsx additional work has to be done for removing smaller quantity tag from card once product is updated.

// components/ui/CartProductCardWrapper/CartProductCardWrapper.tsx
import { useReOrderProducts } from '@sf-modules/re-order';

export function CartProductCardWrapper() {
  const { removeWantedQuantities } = useReOrderProducts();

  return (
    <CartProductCard
      {...props}
      onUpdate={(quantity) => {
        updateCartQuantity.mutate({ quantity });
        removeWantedQuantities(id); // [code++]
      }}
      onRemove={() => {
        removeCartLineItem.mutate();
        removeWantedQuantities(id); // [code++]
      }}
      disabled={updateCartQuantity.isLoading || removeCartLineItem.isLoading}
    />
  );
}

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!