Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
npx create-ollie-shop and knows the template already renders the modal, so your component only decides when it opens.Require login before my custom action runs.
import { useLogin } from '@ollie-shop/sdk';
| Property | Type | Description |
|---|---|---|
openLogin | (options?: OpenLoginOptions) => void | Opens the login modal with optional configuration |
closeLogin | () => void | Closes the login modal |
| Property | Type | Default | Description |
|---|---|---|---|
isRequired | boolean | false | When true, prevents the modal from being closed by clicking the backdrop |
title | string | null | Custom title to display in the login modal header |
const { openLogin, closeLogin } = useLogin();
// Open with default settings
openLogin();
// Open with custom title
openLogin({ title: "Sign in to continue" });
// Open as required (can't dismiss by clicking backdrop)
openLogin({ isRequired: true, title: "Login required" });
// Close programmatically
closeLogin();
import { useLogin, useCheckoutSession } from '@ollie-shop/sdk';
import styles from './styles.module.css';
function FavoriteButton({ productId }: { productId: string }) {
const { openLogin } = useLogin();
const { session: { user } } = useCheckoutSession();
const handleFavorite = () => {
if (user.isGuest) {
openLogin({
isRequired: true,
title: "Sign in to save favorites"
});
return;
}
// User is logged in, add to favorites
addToFavorites(productId);
};
return (
<button className={styles.button} onClick={handleFavorite}>
Add to Favorites
</button>
);
}
.button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background-color: #556AEB;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.button:hover {
background-color: #4458d1;
}