Persistent Cart Across Browsers/Devices

[pevey]

On many store web sites, a user's cart persists if they log into their account from a new device. I have implemented this feature for my own use, and I think it would be a useful addition to the core.

This discussion is to get feedback on this idea and the planned approach.

Currently, when I fetch a cart in my storefront application (using the sveltekit-medusa-client), the app first checks if a cart cookie is set on that device/browser and tries to use that. If it is not set or if the cart cookie is not valid, it looks to see if there is a logged in user. If so, it checks to see if that user has a valid cart session. The checking is very simple. It just returns the first valid cart session found for that user.

This requires two small customizations of the medusa backend that I am proposing adding to the core. I think adding these to the core is more appropriate than making a plugin for them since these changes are quite small and are not really about integration with a third-party service or application. These are customizations that I think would be widely applicable for many medusa users.

1. Add an API route to get a cart by customer. The route I currently use is:

	router.use("/store/customers/me/cart", authenticateCustomer())
	router.get("/store/customers/me/cart", cors(storeCorsOptions), async (req, res) => {
		if (req.user && req.user.customer_id) {
			const cartService = req.scope.resolve("cartService")
			const cart = await cartService.retrieveByCustomerId(req.user.customer_id)
			return res.json({ cart })
		} else {
			return res.status(404).json({ cart: null })
		}
	})

2. Add a function in the cart service to retrieveByCustomerId, which is used in the route above.

	async retrieveByCustomerId(customerId: string): Promise<Cart> {
		if (!customerId) {
			throw new MedusaError(MedusaError.Types.INVALID_DATA, `"customerId" must be defined`)
		}
		const cartRepo = this.activeManager_.withRepository(this.cartRepository_)

		const lastCompleted: Cart | null = await cartRepo.findOne({
			where: {
				customer_id: customerId,
				completed_at: Not(IsNull()),
			},
			order: { completed_at: "desc" },
		})

		if (lastCompleted?.completed_at) {
			const query = buildQuery({
				customer_id: customerId,
				completed_at: null,
				created_at: MoreThan(lastCompleted.completed_at),
			})
			return await cartRepo.findOne(query)
		} else {
			const query = buildQuery({ 
				customer_id: customerId,
				completed_at: null,
			})
			return await cartRepo.findOne(query)
		}
	}

NOTE: The function in part 2 was edited after some testing to address situations where a customer may create a new cart on a new device, log in, complete that cart, and then not want to see old carts from before the time of the last completed cart.

If anyone has any suggested changes or additions, please let me know. I will wait a week or so and then create a PR if there is general agreement.

[tsvetann]

Hey @pevey i didn't quite follow how adding the proposed API improves the current cart functionality. The new API requires a logged in customer but if the customer is already logged in then the functionality already exists? Or you are describing how it currently works on your custom setup? Thanks

[pevey]

Can you point me to where to find the cart if the customer is logged in?

I don't think there is currently any way by default to find a cart by customer. But I could have missed it. I added these two bits to allow a lookup by customer.

The storefront app then implements a persistent cart, if desired. Or, things can be left exactly as they are now. Adding this endpoint and the associated service function just makes it possible to do a lookup by customer, but you don't have to.

[tsvetann]

I was actually asking questions but now I understand. so to sum up and make sure I am on the same page. Currently, we can only get the cart by the cart_id which is stored in local storage and you are proposing to have an additional ability to get the cart by the customer id via API? I think that makes total sense given that currently we have the option to associate a cart with customer_id. Thanks

[winston0410]

Hey late to this thread, I have created a custom endpoint and service to handle this myself, @tsvetann any chance this can be included into the medusa's source?

//services/customerCart.ts
import { CartService, TransactionBaseService, Cart, FindConfig } from "@medusajs/medusa";

export class CustomerCartService extends TransactionBaseService {
  private cartService: CartService;

  constructor(container) {
    super(container);
    this.cartService = container.cartService;
  }

  public async getLastIncompleteCart(customerId: string, options: FindConfig<Cart>) {
    const { lastIncompletedCartId } = await this.manager_.transaction(
      async (trx) => {
        const result = await trx.query(
          `WITH last_cart AS (
        SELECT cart.* FROM customer 
        JOIN cart ON customer.id = cart.customer_id 
        WHERE customer.id = $1
        ORDER BY cart.id DESC
         LIMIT 1
      )
      SELECT last_cart.id FROM last_cart
      WHERE last_cart.completed_at IS NULL`,
          [customerId],
        );

        return {
          lastIncompletedCartId: result[0]?.id,
        };
      },
    );

    return lastIncompletedCartId
      ? await this.cartService.retrieveWithTotals(lastIncompletedCartId, options)
      : undefined;
  }
}

export default CustomerCartService;

// api/index.ts
import { CustomerCartService } from "../services/customerCart";
import { Router } from "express";
import {
  defaultStoreCartFields,
  defaultStoreCartRelations,
  FindParams,
  transformStoreQuery,
  wrapHandler,
} from "@medusajs/medusa";
import {
  cleanResponseData,
} from "@medusajs/medusa/dist/utils/clean-response-data";

import requireCustomerAuthentication from "@medusajs/medusa/dist/api/middlewares/require-customer-authentication";

export default (rootDirectory, pluginOptions) => {
  const storeRouter = Router();

  storeRouter.get(
    "/store/customer/me/cart",
    requireCustomerAuthentication(),
    transformStoreQuery(FindParams, {
      defaultRelations: defaultStoreCartRelations,
      defaultFields: defaultStoreCartFields,
      isList: false,
    }),
    wrapHandler(async (req, res) => {
      const customerCartService = req.scope.resolve(
        "customerCartService",
      ) as CustomerCartService;

      const data = await customerCartService.getLastIncompleteCart(
        req.user.customer_id,
        req.retrieveConfig,
      );

      res.json({ cart: cleanResponseData(data, []) });
    }),
  );

  return [storeRouter];
};

[tsvetann]

I am not part of the core team. @pevey maybe a question for you?

[shivamsuyal]

Just a suggestion
You don't have to write whole new functions, you can store the cart id in user metadata