Template
Product cards, header, footer, PDP, and typography reworked toward a leaner layout; adds shop policy pages backed by the Storefront API. - Type: switch to Geist Sans/Mono, regular-weight headings - Product cards: drop borders, rounded corners, and action buttons - Header: shorter bar, no bottom border, center-out hover underline, bag icon replacing the cart icon (drawer wording updated to match) - Footer: single line with policy links and social icons on bg-background - Policies: /policies/[handle] renders shop.privacyPolicy, termsOfService, refundPolicy, shippingPolicy, subscriptionPolicy (SSG, hourly revalidation) - PDP: image grid with mobile carousel + dots and click-to-zoom, sticky info column, colour swatches from option optionValues with a configurable name-to-colour fallback in config/swatches.ts, Shop-purple checkout button - Recommendations: left-aligned heading on bg-background - Ignore .env*.local and tsconfig.tsbuildinfo Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016jWbNNJLksC1QG8z8845FX
61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { SHOPIFY_STOREFRONT_API_URL } from '@/services/shopify/client';
|
|
import { GET_SHOP_POLICIES_QUERY } from '@/graphql/policies';
|
|
|
|
export interface ShopPolicy {
|
|
id: string;
|
|
title: string;
|
|
handle: string;
|
|
body: string;
|
|
url: string;
|
|
}
|
|
|
|
interface ShopPoliciesResponse {
|
|
data?: {
|
|
shop?: Record<string, ShopPolicy | null>;
|
|
};
|
|
}
|
|
|
|
// Handles Shopify uses for each policy — also the routes under /policies/[handle].
|
|
export const POLICY_HANDLES = [
|
|
'terms-of-service',
|
|
'privacy-policy',
|
|
'refund-policy',
|
|
'shipping-policy',
|
|
'subscription-policy',
|
|
] as const;
|
|
|
|
// Policies change rarely, so this uses its own fetch (revalidated hourly)
|
|
// rather than the no-store `shopifyFetch` used for carts and products.
|
|
export async function getShopPolicies(): Promise<ShopPolicy[]> {
|
|
const token = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN;
|
|
|
|
const response = await fetch(SHOPIFY_STOREFRONT_API_URL, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...(token ? { 'X-Shopify-Storefront-Access-Token': token } : {}),
|
|
},
|
|
body: JSON.stringify({ query: GET_SHOP_POLICIES_QUERY }),
|
|
next: { revalidate: 3600 },
|
|
});
|
|
|
|
if (!response.ok) {
|
|
console.error('Failed to load shop policies:', response.status);
|
|
return [];
|
|
}
|
|
|
|
const json: ShopPoliciesResponse = await response.json();
|
|
const shop = json.data?.shop ?? {};
|
|
|
|
return Object.values(shop).filter((policy): policy is ShopPolicy =>
|
|
Boolean(policy?.handle)
|
|
);
|
|
}
|
|
|
|
export async function getShopPolicy(
|
|
handle: string
|
|
): Promise<ShopPolicy | null> {
|
|
const policies = await getShopPolicies();
|
|
return policies.find((policy) => policy.handle === handle) ?? null;
|
|
}
|