// =============================================================================
// Product.jsx — shared renderer for /products/*.html
//
// Each page supplies a plain data object (copy, usage, ingredient notes and the
// full INCI list). Price, name, category and availability are NOT hardcoded:
// they come from /api/store, the same source the storefront and the payment
// endpoint use, so a price edited in Admin shows here too.
//
// Add to bag writes the same cart shape index.html writes, to the same
// localStorage key, and fires the same event the nav badge listens for.
// =============================================================================
const CART_KEY = 'hws-cart-v1';
const addProductToCart = (p) => {
let cart = [];
try { cart = JSON.parse(localStorage.getItem(CART_KEY)) || []; } catch (e) { cart = []; }
const i = cart.findIndex(it => it.id === p.id);
if (i >= 0) cart[i] = { ...cart[i], qty: (cart[i].qty || 1) + 1 };
else cart.push({ id: p.id, name: p.name, cat: p.cat, price: p.price, qty: 1, img: p.img });
try {
localStorage.setItem(CART_KEY, JSON.stringify(cart));
window.dispatchEvent(new CustomEvent('hws-cart-changed', { detail: cart }));
} catch (e) { /* private mode — the page still works, the bag just won't persist */ }
return cart.reduce((s, it) => s + (it.qty || 1), 0);
};
// ── Full ingredient list, collapsed by default ───────────────────────────────
// Cosmetic INCI lists are long and in descending order of concentration. Nobody
// wants 30 Latin names above the fold, but the people who do want them really
// want them — so it is on the page, not in a PDF, one tap away.
const IngredientList = ({ inci }) => {
const { useState } = React;
const [open, setOpen] = useState(false);
return (
{open && (
INCI names, in descending order of concentration — the same list printed on the bottle.
{inci.join(', ')}
)}
);
};
// Product structured data is written from the same /api/store response the buy
// box uses, not baked into the HTML. Price and stock are the two fields most
// likely to be edited in Admin, and stale structured data is worse than none —
// Google will show a price that no longer exists. Google renders this page
// before extracting, so a script tag added here is read the same as a static one.
const writeProductLd = (p, storeOpen, meta) => {
const origin = location.origin;
const ld = {
'@context': 'https://schema.org',
'@type': 'Product',
name: p.name,
sku: p.id,
description: (document.querySelector('meta[name="description"]') || {}).content || '',
image: origin + '/assets/og/product-' + p.id + '.jpg',
brand: { '@type': 'Brand', name: 'Hawaiian Style' },
offers: {
'@type': 'Offer',
url: origin + location.pathname,
priceCurrency: 'THB',
price: String(p.price),
availability: storeOpen
? 'https://schema.org/InStock'
: 'https://schema.org/PreOrder',
seller: { '@type': 'Organization', name: 'Sahatavesin Import Export Co., Ltd.' },
},
};
let el = document.getElementById('hws-product-ld');
if (!el) {
el = document.createElement('script');
el.type = 'application/ld+json';
el.id = 'hws-product-ld';
document.head.appendChild(el);
}
el.textContent = JSON.stringify(ld);
};
// ── Buy box: live price + availability from /api/store ───────────────────────
const BuyBox = ({ id, fallback }) => {
const { useState, useEffect } = React;
const [state, setState] = useState({ status: 'loading' });
const [added, setAdded] = useState(0);
useEffect(() => {
let dead = false;
fetch('/api/store')
.then(r => r.ok ? r.json() : Promise.reject(new Error(r.status)))
.then(d => {
if (dead) return;
const p = (d.products || []).find(x => x.id === id);
const open = !!(d.settings && d.settings.store_open);
setState({ status: 'ok', product: p || null, open });
if (p) writeProductLd(p, open);
})
.catch(() => { if (!dead) setState({ status: 'error' }); });
return () => { dead = true; };
}, [id]);
const box = (children) => (
{children}
);
if (state.status === 'loading') {
return box(Checking price and availability…);
}
// The catalogue is the source of truth for price; if it cannot be reached we
// say so rather than showing a number that might be stale.
if (state.status === 'error' || !state.product) {
return box(
<>
{state.status === 'error' ? 'Price unavailable right now' : 'Not currently on sale'}
{state.status === 'error'
? 'We could not reach the catalogue. Refresh, or find this bottle at any of our stockists.'
: 'This one is not in the online shop at the moment. It may still be on the shelf near you.'}
Where to buy →
);
}
const p = state.product;
return box(
<>