Skip to main content

Cart Integration Setup

This guide walks you through setting up the cart integration in your Archibald application, following the recommended modular pattern.

Server-Side Configuration​

To enable cart functionality on the server, register the CartModule in your CoreServer implementation.

Module Registration​

import { CartModule } from '@archibald/cart';
import { CommerceCartProvider } from '@archibald/commerce/cart';

// ... inside your Server class
public async initModules() {
    await this.registerModules([
        new CartModule({
            provider: new CommerceCartProvider({ 
                config: () => this.configService.get('hybris.api')
            })
        }),
        // ... other modules
    ]);
}

Client-Side Configuration​

1. Initialize the Cart Client​

The @archibald/cart package is headless and uses a CartFactory to create a CartClient. You need a concrete cart definition (e.g., commerceDefinition from @archibald/commerce/cart) to initialize it.

import { CartFactory } from '@archibald/cart';
import { commerceDefinition } from '@archibald/commerce/cart';
import { api } from 'shop/client/api';

const cart = new CartFactory(commerceDefinition);
export default cart.createClient({ api });

As a shortcut, @archibald/commerce/cart also exports CommerceCart, a prebuilt CartFactory instance created from commerceDefinition:

import { CommerceCart } from '@archibald/commerce/cart';
import { api } from 'shop/client/api';

export default CommerceCart.createClient({ api });

2. Provide the Client to your App​

Wrap your application with the CartClientProvider in your main App.tsx.

import { CartClientProvider } from '@archibald/commerce/cart';
import CartClient from 'shop/client/api/creators/cart';

function App() {
    return (
        <CartClientProvider client={CartClient}>
            {/* Your application components */}
        </CartClientProvider>
    );
}

Managing Cart IDs​

Use the useCartId hook to handle the cart cookie or storage entry automatically.

import { useCartId } from '@archibald/cart';

function MyComponent() {
    const { cartId, setCartId, clearCartId } = useCartId();
    // ...
}