Step-by-step guide to creating a checkout component
Initialize Component
ollieshop component create --name free-shipping-bar --slot header cd free-shipping-bar
Install Dependencies
npm install
Review Structure
free-shipping-bar/ ├── src/ │ ├── index.tsx # Component code │ └── styles.css # Styles ├── package.json # Dependencies └── meta.json # Component metadata
src/index.tsx
import React from 'react'; import { useCheckoutSession } from '@ollie-shop/sdk'; import './styles.css'; export default function FreeShippingBar() { const { cart } = useCheckoutSession(); const threshold = 10000; // $100 in cents const remaining = threshold - cart.total; const progress = Math.min((cart.total / threshold) * 100, 100); if (remaining <= 0) { return ( <div className="shipping-bar success"> <span>✓ Free shipping unlocked</span> </div> ); } return ( <div className="shipping-bar"> <p>Add ${(remaining / 100).toFixed(2)} for free shipping</p> <div className="progress-track"> <div className="progress-fill" style={{ width: `${progress}%` }} /> </div> </div> ); }
src/styles.css
.shipping-bar { background: #f3f4f6; padding: 12px; text-align: center; font-size: 14px; } .shipping-bar.success { background: #10b981; color: white; } .progress-track { background: #e5e7eb; height: 6px; border-radius: 3px; margin-top: 8px; overflow: hidden; } .progress-fill { background: #3b82f6; height: 100%; transition: width 0.3s ease; }
npm run dev
Build
npm run build
Deploy
ollieshop component deploy
Verify
ollieshop component list
const { cart } = useCheckoutSession(); // Available properties cart.items // Array of cart items cart.total // Total in cents cart.subtotal // Subtotal before shipping/tax cart.shipping // Shipping cost cart.tax // Tax amount
const { addToCart, removeFromCart } = useCheckoutSession(); // Add item await addToCart({ id: 'product-123', quantity: 1 }); // Remove item await removeFromCart('product-123');
// Memoize expensive calculations const totalSavings = useMemo(() => { return cart.items.reduce((sum, item) => sum + item.discount, 0); }, [cart.items]);
const [error, setError] = useState(null); try { await addToCart(item); } catch (err) { setError('Failed to add item'); }
<div role="status" aria-live="polite"> {remaining > 0 ? `${(remaining / 100).toFixed(2)} dollars until free shipping` : 'Free shipping unlocked' } </div>