Ask your agent. The Ollie Shop skill ships with projects created by Don’t have the skill yet? Install it.
npx create-ollie-shop and covers every hook on this page, so you can describe the goal instead of picking the hook yourself.Prompt
Which hook should I use to read the selected shipping method?
Hooks
- Cart & Customer Data
- Store Configuration
- Session Data
Problem: Need access to cart contents and customer informationWhat you get:
useCheckoutSession Hook
import { 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 settingsWhat you get:
useStoreInfo Hook
import { useStoreInfo } from '@ollie-shop/sdk';
export default function ThemedComponent() {
const { platformStoreId, logo, theme, props } = useStoreInfo();
// `theme` is a flat record of CSS-variable-style tokens
// (Record<string, string>), not a nested object.
return (
<div
style={{
backgroundColor: theme?.['--color-primary'],
color: theme?.['--color-text'],
}}
>
<h1>{platformStoreId}</h1>
{logo && <img src={logo} alt="Store logo" />}
{props?.flags?.showCouponCodeInputOpened && (
<p>Coupon input is opened by default</p>
)}
</div>
);
}
- Store metadata (
storeId,platformStoreId,logo,versionId,template) - Theme tokens (
themeas a flatRecord<string, string>) - Feature flags and configuration via
propsandsettings - The injected custom
componentsfor this store
Problem: Need access to session data, provider data and to validate required fieldsWhat you get:
useStoreInfo Hook
import { 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