feature-shopping-list setup

Styles

Import them once, in the stylesheet where you load Tailwind:

@import "@evolve-storefront/feature-shopping-list/styles.css";

Translations

The package ships its texts in @evolve-storefront/feature-shopping-list/messages. evolve messages merges them into your message files and never overwrites a text you changed.

ShoppingListProvider

Single provider for the shopping-list feature. Supplies the injected auth/session/business-unit seam AND owns the create/edit dialogs (built on the base Dialog primitive in @evolve-storefront/ui), so a consumer wires just one provider. businessUnitId set ⇒ multi-list (business) mode.

import { ShoppingListProvider } from "@evolve-storefront/feature-shopping-list/provider";

Prop	Type	Description
children	ReactNode
isAuthenticated?	boolean
hasToken?	boolean
isAuthLoading?	boolean	Pass the auth layer's loading. While true no list query runs, so a signed-in shopper is never read as a guest before their session is known.
businessUnitId?	string
ensureSession?	(() => void | Promise<void>)
onTokenChange?	(() => void)

Prefetching on the server

Fetch the data in a Server Component so the page renders with it instead of a skeleton.

shoppingListDetailQueryOptionsDetail (single list).

import { shoppingListDetailQueryOptions } from "@evolve-storefront/feature-shopping-list/queries";

function shoppingListDetailQueryOptions(
  args: { gqlClient: ClientFetcher; shoppingListId: string; scope: ShoppingListScope; shareable?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<ShoppingList | null, Error, ShoppingList | null, readonly ["shopping-lists", "detail", string]>, "queryFn"> & { queryFn?: QueryFunctio…

Option	Type	Description
gqlClient	ClientFetcher
shoppingListId	string
scope	ShoppingListScope
shareable?	boolean

shoppingListsQueryOptionsOverview (list of lists) — drives membership detection and the overview grid.

import { shoppingListsQueryOptions } from "@evolve-storefront/feature-shopping-list/queries";

function shoppingListsQueryOptions(
  args: { gqlClient: ClientFetcher; scope: ShoppingListScope; enabled: boolean; page?: number | undefined; },
): OmitKeyof<UseQueryOptions<ShoppingListsOverview | null, Error, ShoppingListsOverview | null, readonly ["shopping-lists", "overview", string, number]>, "queryFn"…

Option	Type	Description
gqlClient	ClientFetcher
scope	ShoppingListScope
enabled	boolean
page?	number