Render HTML on ProductDetails (#1715)

Shopify · Jun 23, 2022 · 0e798d6 · 0e798d6
1 parent 761d7a8
commit 0e798d6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/templates/demo-store/src/components/product/ProductDetail.client.tsx b/templates/demo-store/src/components/product/ProductDetail.client.tsx
@@ -32,7 +32,10 @@ export function ProductDetail({
           </Disclosure.Button>
 
           <Disclosure.Panel className={'pb-4 pt-2 grid gap-2'}>
-            <Text as="div">{content}</Text>
+            <div
+              className="prose dark:prose-invert"
+              dangerouslySetInnerHTML={{__html: content}}
+            />
             {learnMore && (
               <div className="">
                 <Link

diff --git a/templates/demo-store/src/lib/utils.ts b/templates/demo-store/src/lib/utils.ts
@@ -64,8 +64,8 @@ export function isDiscounted(price: MoneyV2, compareAtPrice: MoneyV2) {
 
 export function getExcerpt(text: string) {
   const regex = /<p.*>(.*?)<\/p>/;
-  const correspondingText = regex.exec(text);
-  return correspondingText ? correspondingText[1] : '';
+  const match = regex.exec(text);
+  return match?.length ? match[0] : text;
 }
 
 function resolveToFromType(

diff --git a/templates/demo-store/src/routes/products/[handle].server.tsx b/templates/demo-store/src/routes/products/[handle].server.tsx
@@ -52,7 +52,7 @@ export default function Product() {
     },
   });
 
-  const {media, title, vendor, description, id} = product;
+  const {media, title, vendor, descriptionHtml, id} = product;
   const {shippingPolicy, refundPolicy} = shop;
 
   return (
@@ -79,10 +79,10 @@ export default function Product() {
                 </div>
                 <ProductForm />
                 <div className="grid gap-4 py-4">
-                  {description && (
+                  {descriptionHtml && (
                     <ProductDetail
                       title="Product Details"
-                      content={description}
+                      content={descriptionHtml}
                     />
                   )}
                   {shippingPolicy?.body && (
@@ -123,7 +123,7 @@ const PRODUCT_QUERY = gql`
       id
       title
       vendor
-      description
+      descriptionHtml
       media(first: 7) {
         nodes {
           ...Media