diff --git a/app/[locale]/product/[handle]/page.tsx b/app/[locale]/product/[handle]/page.tsx
index f8306e001..f381db116 100644
--- a/app/[locale]/product/[handle]/page.tsx
+++ b/app/[locale]/product/[handle]/page.tsx
@@ -72,6 +72,8 @@ export default async function ProductPage({
language: params?.locale?.toUpperCase()
});
+ console.debug({ product });
+
let otherImages: MediaImage[] = [];
if (!!product) {
otherImages = product.images
@@ -111,7 +113,7 @@ export default async function ProductPage({
<div className="relative h-full w-full">
<Image
src={product.featuredImage?.url}
- alt={product.featuredImage?.altText}
+ alt={product.featuredImage?.altText || product.id}
height={product.featuredImage.height}
width={product.featuredImage.width}
className="h-full w-full object-cover"
@@ -151,10 +153,16 @@ export default async function ProductPage({
</div>
</div>
- <div>
+ <div className="bg-base p-12 text-dark">
<ProductTastingNotes product={product} />
</div>
+ {!!product?.galleryIntro?.value && (
+ <div className="font-multilingual flex w-full flex-row justify-end whitespace-pre-line">
+ <div className="md:w-1/2">{product.galleryIntro.value}</div>
+ </div>
+ )}
+
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{!!otherImages &&
otherImages?.length > 0 &&
@@ -181,6 +189,13 @@ export default async function ProductPage({
);
})}
</div>
+
+ {!!product?.lower?.value && (
+ <div className="font-multilingual flex w-full flex-row justify-end whitespace-pre-line">
+ <div className="md:w-1/2">{product.lower.value}</div>
+ </div>
+ )}
+
<Suspense>
<RelatedProducts id={product.id} />
</Suspense>
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 319da1e39..009ad602e 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -14,7 +14,6 @@ import AgeConfirmBeforeCheckout from './age-gate-confirm-before-checkout';
import CloseCart from './close-cart';
import DeleteItemButton from './delete-item-button';
import EditItemQuantityButton from './edit-item-quantity-button';
-import { InlineAddToCart } from './inline-add-to-cart';
import OpenCart from './open-cart';
type MerchandiseSearchParams = {
@@ -157,12 +156,12 @@ export default function CartModal({
);
})}
</ul>
- {!!promotedItem && (
+ {/* {!!promotedItem && (
<InlineAddToCart
variants={promotedItem.variants}
availableForSale={promotedItem.availableForSale}
/>
- )}
+ )} */}
<div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
{/* <div className="mb-3 flex items-center justify-between border-b border-white/20 pb-1">
<p>Taxes</p>
@@ -172,10 +171,10 @@ export default function CartModal({
currencyCode={cart.cost.totalTaxAmount.currencyCode}
/>
</div> */}
- <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
+ {/* <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
<p>Shipping</p>
<p className="text-right text-white/50">Calculated at checkout</p>
- </div>
+ </div> */}
<div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
<p>Total</p>
<Price
diff --git a/components/product/tasting-notes.tsx b/components/product/tasting-notes.tsx
index 737463cf7..eae26cda4 100644
--- a/components/product/tasting-notes.tsx
+++ b/components/product/tasting-notes.tsx
@@ -1,4 +1,3 @@
-import Prose from 'components/prose';
import { Product } from 'lib/shopify/types';
import Image from 'next/image';
@@ -14,10 +13,11 @@ export function ProductTastingNotes({ product }: { product: Product }) {
}
return (
- <div className="flex flex-col justify-between space-y-6 px-6 md:flex-row md:space-x-6 md:space-y-0">
+ <div className="flex flex-col justify-between space-y-6 px-6 md:flex-row md:items-end md:space-x-12 md:space-y-0">
{!!notes ? (
- <div>
- <Prose className="mb-6 text-lg leading-tight dark:text-white/[60%]" html={notes} />
+ <div className="flex w-1/2 flex-col space-y-4">
+ <h2 className="font-multilingual text-[38px] leading-tight">tasting notes</h2>
+ <div className="flex w-full flex-row justify-end whitespace-pre-line">{notes}</div>
</div>
) : null}
{imageUrl && imageHeight && imageWidth && (
diff --git a/components/prose.tsx b/components/prose.tsx
index 249fb4f48..5f9f48372 100644
--- a/components/prose.tsx
+++ b/components/prose.tsx
@@ -11,15 +11,15 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
<div
className={clsx(
'prose text-lg leading-7',
- 'font-multilingual text-[15px] font-extralight text-white',
- 'prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-white',
+ 'font-multilingual text-[15px] font-extralight text-current',
+ 'prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-current',
'prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg',
- 'prose-a:text-white/80 prose-a:underline hover:prose-a:text-white',
- 'prose-strong:text-white',
+ 'prose-a:text-current/80 prose-a:underline hover:prose-a:text-current',
+ 'prose-strong:text-current',
'prose-td:border-opacity-20 prose-td:py-4 prose-td:font-normal',
'prose-tr:border-subtle',
'prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6',
- 'dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
+ 'dark:text-current dark:prose-headings:text-current dark:prose-a:text-current dark:prose-strong:text-current',
'!tracking-normal',
className
)}
diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts
index 2aace2598..6f3ea724e 100644
--- a/lib/shopify/fragments/product.ts
+++ b/lib/shopify/fragments/product.ts
@@ -14,6 +14,16 @@ const productFragment = /* GraphQL */ `
value
type
}
+ galleryIntro: metafield(namespace: "custom", key: "product_gallery_intro") {
+ key
+ value
+ type
+ }
+ lower: metafield(namespace: "custom", key: "product_lower_text") {
+ key
+ value
+ type
+ }
notes: metafield(namespace: "custom", key: "tasting_notes_text") {
key
value
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index 370c71a44..855a2ed6d 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -149,6 +149,12 @@ export type ShopifyProduct = {
summary: {
value: string;
};
+ galleryIntro: {
+ value: string;
+ };
+ lower: {
+ value: string;
+ };
notes?: {
value?: string;
};
diff --git a/tailwind.config.js b/tailwind.config.js
index 462376316..56e55bde9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,5 @@
const plugin = require('tailwindcss/plugin');
-const colors = require('tailwindcss/colors');
+// const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
@@ -9,7 +9,8 @@ module.exports = {
extend: {
colors: {
subtle: '#606A5F',
- dark: '#212720'
+ dark: '#212720',
+ base: '#F4F7F5'
},
fontFamily: {
sans: ['var(--font-lato)', ...defaultTheme.fontFamily.sans],