Documentation Index
Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt
Use this file to discover all available pages before exploring further.
The SDK provides React hooks that give you real-time access to cart data, payment methods, shipping options, and store configuration.
Hooks
Cart & Customer Data
Store Configuration
Session Data
Problem: Need access to cart contents and customer informationimport { useCheckoutSession, useCheckoutAction } from '@ollie-shop/sdk';
export default function CartSummary() {
const { session } = useCheckoutSession();
const { execute: executeRemoveItems } = useCheckoutAction("REMOVE_ITEMS");
const { currency, language } = session.locale;
// Format price utility function
const formatPrice = (price: number) => {
return new Intl.NumberFormat(language, {
style: "currency",
currency: currency,
}).format(price / 100);
};
return (
<div>
<h3>Hello {session.customer?.firstName}!</h3>
<p>Items: {session.cartItems.length}</p>
<p>Total: {formatPrice(session.totals.items || 0)}</p>
{session.cartItems.map((item) => (
<div key={item.id}>
<span>{item.name} ({formatPrice(item.price)})</span>
<button onClick={() => executeRemoveItems([item.index])}>Remove</button>
</div>
))}
</div>
);
}
- Session data (cart items, customer profile, totals)
- Locale information (currency, language)
- Access to raw session data from e-commerce provider
- Real-time updates when session changes
Problem: Need access to store theme and settingsimport { useStoreInfo } from '@ollie-shop/sdk';
export default function ThemedComponent() {
const { platformStoreId, theme, props, messages } = useStoreInfo();
return (
<div
style={{
backgroundColor: theme.colors.primary,
color: theme.colors.text,
borderRadius: theme.radius.primary
}}
>
<h1>{platformStoreId}</h1>
<p>{messages.checkout.title}</p>
{props?.flags?.showStockLevels && (
<p>Stock information enabled</p>
)}
</div>
);
}
- Store information (name, logo, currency)
- Theme configuration (colors, fonts, spacing)
- Feature flags and props
- Localized messages and text
Problem: Need access to session data, provider data and to validate required fieldsimport { useCheckoutSession } from '@ollie-shop/sdk';
export const function PageShipping {
const { sessionValidity } = useCheckoutSession();
// Extract address validation errors if they exist
const missingAddressFields =
sessionValidity && "errors" in sessionValidity
? sessionValidity.errors?.shipping?.addresses
: undefined;
// Component rendering...
return (
<form onSubmit={() => {}}>
<button type="submit">
Next to {missingAddressFields ? 'address' : 'payment'}
</button>
</form>
)
}
- Raw data from the e-commerce provider
- Ollie Session data
- Validate required fields
