Add PriceBlock and VariantPrice

templates/hydrogen-theme/app/components/blocks/PriceBlock.tsx

@@ -0,0 +1,32 @@
+import type {InferType} from 'groqd';
+
+import {Await, useLoaderData} from '@remix-run/react';
+import {flattenConnection} from '@shopify/hydrogen-react';
+import {Suspense} from 'react';
+
+import type {PRICE_BLOCK} from '~/qroq/blocks';
+import type {loader} from '~/routes/($locale).products.$productHandle';
+
+import {VariantPrice} from '../product/VariantPrice';
+
+export function PriceBlock(props: InferType<typeof PRICE_BLOCK>) {
+  const loaderData = useLoaderData<typeof loader>();
+  const variantsPromise = loaderData.variants;
+
+  return (
+    <>
+      {/* Todo => Add skeleton and errorElement */}
+      <Suspense>
+        <Await resolve={variantsPromise}>
+          {({product}) => {
+            const variants = product?.variants?.nodes.length
+              ? flattenConnection(product.variants)
+              : [];
+
+            return <VariantPrice variants={variants} />;
+          }}
+        </Await>
+      </Suspense>
+    </>
+  );
+}

templates/hydrogen-theme/app/components/product/ProductDetails.tsx

@@ -3,6 +3,7 @@ import {PortableText} from '@portabletext/react';
 import type {ProductInformationSectionProps} from '../sections/ProductInformationSection';
 
 import {AddToCartButtonBlock} from '../blocks/AddToCartButtonBlock';
+import {PriceBlock} from '../blocks/PriceBlock';
 import {ShopifyDescriptionBlock} from '../blocks/ShopifyDescriptionBlock';
 import {ShopifyTitleBlock} from '../blocks/ShopifyTitleBlock';
 
@@ -16,6 +17,7 @@ export function ProductDetails(props: {data: ProductInformationSectionProps}) {
               addToCartButton: ({value}) => {
                 return <AddToCartButtonBlock {...value} />;
               },
+              price: ({value}) => <PriceBlock {...value} />,
               shopifyDescription: ({value}) => (
                 <ShopifyDescriptionBlock {...value} />
               ),

templates/hydrogen-theme/app/components/product/ProductForm.tsx

@@ -26,11 +26,6 @@ export function ProductForm({
   const selectedVariant = useSelectedVariant({variants});
   const isOutOfStock = !selectedVariant?.availableForSale;
 
-  const isOnSale =
-    selectedVariant?.price?.amount &&
-    selectedVariant?.compareAtPrice?.amount &&
-    selectedVariant?.price?.amount < selectedVariant?.compareAtPrice?.amount;
-
   return (
     <div className="grid gap-10">
       <div className="grid gap-4">

templates/hydrogen-theme/app/components/product/VariantPrice.tsx

@@ -0,0 +1,31 @@
+import type {ProductVariantFragmentFragment} from 'storefrontapi.generated';
+
+import {Money} from '@shopify/hydrogen-react';
+
+import {useSelectedVariant} from '~/hooks/useSelectedVariant';
+
+export function VariantPrice({
+  variants,
+}: {
+  variants: ProductVariantFragmentFragment[];
+}) {
+  const selectedVariant = useSelectedVariant({variants});
+  const price = selectedVariant?.price;
+  const compareAtPrice = selectedVariant?.compareAtPrice;
+  const isOutOfStock = !selectedVariant?.availableForSale;
+
+  const isOnSale =
+    selectedVariant?.price?.amount &&
+    selectedVariant?.compareAtPrice?.amount &&
+    selectedVariant?.price?.amount < selectedVariant?.compareAtPrice?.amount;
+
+  // Todo => Add sale and sold out badges
+  return (
+    <div className="flex items-center gap-3">
+      {compareAtPrice && (
+        <Money className="line-through opacity-50" data={compareAtPrice} />
+      )}
+      {price && <Money className="text-lg" data={price} />}
+    </div>
+  );
+}

templates/hydrogen-theme/app/qroq/blocks.ts

@@ -20,3 +20,8 @@ export const ADD_TO_CART_BUTTON_BLOCK = q.object({
   _type: q.literal('addToCartButton'),
   size: z.enum(['small', 'medium', 'large']),
 });
+
+export const PRICE_BLOCK = q.object({
+  _key: q.string(),
+  _type: q.literal('price'),
+});

templates/hydrogen-theme/app/qroq/sections.ts

@@ -4,6 +4,7 @@ import {q, z} from 'groqd';
 
 import {
   ADD_TO_CART_BUTTON_BLOCK,
+  PRICE_BLOCK,
   SHOPIFY_DESCRIPTION_BLOCK,
   SHOPIFY_TITLE_BLOCK,
 } from './blocks';
@@ -117,6 +118,7 @@ export const PRODUCT_INFORMATION_SECTION_FRAGMENT = {
           SHOPIFY_TITLE_BLOCK,
           SHOPIFY_DESCRIPTION_BLOCK,
           ADD_TO_CART_BUTTON_BLOCK,
+          PRICE_BLOCK,
           q.contentBlock(),
         ]),
       )

templates/hydrogen-theme/studio/schemas/objects/global/productRichtext.tsx

@@ -1,4 +1,4 @@
-import {ShoppingCart, Text, Type} from 'lucide-react';
+import {BadgeDollarSign, ShoppingCart, Text, Type} from 'lucide-react';
 import {defineField} from 'sanity';
 
 export default defineField({
@@ -50,6 +50,26 @@ export default defineField({
         },
       },
     },
+    {
+      name: 'price',
+      type: 'object',
+      fields: [
+        defineField({
+          name: 'priceProxy',
+          title: 'Price',
+          type: 'proxyString',
+          options: {field: 'store.priceRange.minVariantPrice'},
+        }),
+      ],
+      icon: () => <BadgeDollarSign size="18px" />,
+      preview: {
+        prepare: () => {
+          return {
+            title: 'Price',
+          };
+        },
+      },
+    },
     {
       name: 'addToCartButton',
       type: 'object',