feat(blog): add shoppable product block sections

blog/loaders/options/productsByTerm.ts

@@ -0,0 +1,25 @@
+import { allowCorsFor } from "@deco/deco";
+import { searchProductOptions } from "../../utils/productResolver.ts";
+import { AppContext } from "../../mod.ts";
+
+export interface Props {
+  term?: string;
+}
+
+/**
+ * @title Products by term
+ * @description Searchable product picker for blog product blocks.
+ */
+export default async function productsByTerm(
+  props: Props,
+  req: Request,
+  ctx: AppContext,
+) {
+  Object.entries(allowCorsFor(req)).forEach(([name, value]) => {
+    ctx.response.headers.set(name, value);
+  });
+
+  return await searchProductOptions(props.term ?? "", req, ctx);
+}
+
+export const cache = "no-cache";

blog/manifest.gen.ts

@@ -23,6 +23,7 @@ import * as $$$15 from "./loaders/extensions/BlogpostPage.ts";
 import * as $$$16 from "./loaders/extensions/BlogpostPage/ratings.ts";
 import * as $$$17 from "./loaders/extensions/BlogpostPage/reviews.ts";
 import * as $$$8 from "./loaders/GetCategories.ts";
+import * as $$$18 from "./loaders/options/productsByTerm.ts";
 import * as $$$$$$3 from "./sections/blocks/BlockImage.tsx";
 import * as $$$$$$4 from "./sections/blocks/Callout.tsx";
 import * as $$$$$$5 from "./sections/blocks/CardGroup.tsx";
@@ -34,11 +35,14 @@ import * as $$$$$$10 from "./sections/blocks/Divider.tsx";
 import * as $$$$$$11 from "./sections/blocks/Heading.tsx";
 import * as $$$$$$12 from "./sections/blocks/List.tsx";
 import * as $$$$$$13 from "./sections/blocks/Paragraph.tsx";
-import * as $$$$$$14 from "./sections/blocks/Quote.tsx";
-import * as $$$$$$15 from "./sections/blocks/Stat.tsx";
-import * as $$$$$$16 from "./sections/blocks/StatGroup.tsx";
-import * as $$$$$$17 from "./sections/blocks/Steps.tsx";
-import * as $$$$$$18 from "./sections/blocks/Video.tsx";
+import * as $$$$$$14 from "./sections/blocks/ProductCard.tsx";
+import * as $$$$$$15 from "./sections/blocks/ProductHighlight.tsx";
+import * as $$$$$$16 from "./sections/blocks/ProductShelf.tsx";
+import * as $$$$$$17 from "./sections/blocks/Quote.tsx";
+import * as $$$$$$18 from "./sections/blocks/Stat.tsx";
+import * as $$$$$$19 from "./sections/blocks/StatGroup.tsx";
+import * as $$$$$$20 from "./sections/blocks/Steps.tsx";
+import * as $$$$$$21 from "./sections/blocks/Video.tsx";
 import * as $$$$$$0 from "./sections/Seo/SeoBlogPost.tsx";
 import * as $$$$$$1 from "./sections/Seo/SeoBlogPostListing.tsx";
 import * as $$$$$$2 from "./sections/Template.tsx";
@@ -63,6 +67,7 @@ const manifest = {
     "blog/loaders/extensions/BlogpostPage/ratings.ts": $$$16,
     "blog/loaders/extensions/BlogpostPage/reviews.ts": $$$17,
     "blog/loaders/GetCategories.ts": $$$8,
+    "blog/loaders/options/productsByTerm.ts": $$$18,
   },
   "sections": {
     "blog/sections/blocks/BlockImage.tsx": $$$$$$3,
@@ -76,11 +81,14 @@ const manifest = {
     "blog/sections/blocks/Heading.tsx": $$$$$$11,
     "blog/sections/blocks/List.tsx": $$$$$$12,
     "blog/sections/blocks/Paragraph.tsx": $$$$$$13,
-    "blog/sections/blocks/Quote.tsx": $$$$$$14,
-    "blog/sections/blocks/Stat.tsx": $$$$$$15,
-    "blog/sections/blocks/StatGroup.tsx": $$$$$$16,
-    "blog/sections/blocks/Steps.tsx": $$$$$$17,
-    "blog/sections/blocks/Video.tsx": $$$$$$18,
+    "blog/sections/blocks/ProductCard.tsx": $$$$$$14,
+    "blog/sections/blocks/ProductHighlight.tsx": $$$$$$15,
+    "blog/sections/blocks/ProductShelf.tsx": $$$$$$16,
+    "blog/sections/blocks/Quote.tsx": $$$$$$17,
+    "blog/sections/blocks/Stat.tsx": $$$$$$18,
+    "blog/sections/blocks/StatGroup.tsx": $$$$$$19,
+    "blog/sections/blocks/Steps.tsx": $$$$$$20,
+    "blog/sections/blocks/Video.tsx": $$$$$$21,
     "blog/sections/Seo/SeoBlogPost.tsx": $$$$$$0,
     "blog/sections/Seo/SeoBlogPostListing.tsx": $$$$$$1,
     "blog/sections/Template.tsx": $$$$$$2,

blog/sections/blocks/ProductCard.tsx

@@ -0,0 +1,136 @@
+import Image from "../../../website/components/Image.tsx";
+import { getProductDisplay } from "../../utils/productData.ts";
+import { coerceProduct } from "../../utils/coerceProductInput.ts";
+import { sanitizeHtml } from "../../utils/sanitizeHtml.ts";
+import { AppContext } from "../../mod.ts";
+import type { Product } from "../../../commerce/types.ts";
+
+/**
+ * @title Product
+ * @description Search and select a storefront product dynamically.
+ * @format dynamic-options
+ * @options blog/loaders/options/productsByTerm.ts
+ */
+type ProductReference = string;
+
+export interface Props {
+  /**
+   * @title Product
+   * @description Product reference as `platform:kind:id` (e.g. `vtex:product:123`). Loader-ref shapes work at runtime but strings are preferred.
+   * @format dynamic-options
+   * @options blog/loaders/options/productsByTerm.ts
+   */
+  product?: ProductReference;
+  /** Badge text (e.g. "New", "Sale") */
+  badge?: string;
+  /** Short description (HTML) */
+  description?: string;
+  /** Call-to-action button text */
+  cta?: string;
+}
+
+type RuntimeProps = Omit<Props, "product"> & {
+  product: Product | null;
+};
+
+export async function loader(props: Props, req: Request, ctx: AppContext) {
+  const product = await coerceProduct(props.product, req, ctx);
+  return {
+    badge: props.badge,
+    description: props.description,
+    cta: props.cta,
+    product,
+  } as RuntimeProps;
+}
+
+/**
+ * @title Product Card
+ * @description Displays a shoppable product card with image, name, price and CTA.
+ */
+export default function ProductCard(
+  { product, badge, description, cta }: RuntimeProps,
+) {
+  if (!product) return null;
+
+  const {
+    name,
+    imageUrl,
+    width,
+    height,
+    price,
+    listPrice,
+    safeUrl,
+    isExternal,
+  } = getProductDisplay(product);
+  if (!name) return null;
+
+  const productDescription = description ?? product.description;
+
+  return (
+    <div class="not-prose my-8 border border-line rounded-brand overflow-hidden bg-base max-w-xs mx-auto">
+      <div class="relative overflow-hidden bg-alt aspect-square">
+        <Image
+          src={imageUrl}
+          alt={name}
+          width={width}
+          height={height}
+          fit="cover"
+          loading="lazy"
+          fetchPriority="low"
+          class="w-full h-full object-cover block"
+        />
+        {badge && (
+          <span class="absolute top-3 left-3 text-xs font-semibold px-2 py-1 rounded-full bg-accent text-inverted leading-none">
+            {badge}
+          </span>
+        )}
+      </div>
+      <div class="p-5 flex flex-col gap-2">
+        <h3 class="text-[1.0625rem] font-semibold leading-snug m-0">{name}</h3>
+        {productDescription && (
+          <div
+            class="text-sm text-secondary leading-normal [text-wrap:pretty] line-clamp-3"
+            dangerouslySetInnerHTML={{
+              __html: sanitizeHtml(productDescription),
+            }}
+          />
+        )}
+        <div class="mt-1 flex items-baseline gap-2">
+          {price && (
+            <span class="text-lg font-bold text-accent tabular-nums">
+              {price}
+            </span>
+          )}
+          {listPrice && listPrice !== price && (
+            <span class="text-sm text-muted line-through tabular-nums">
+              {listPrice}
+            </span>
+          )}
+        </div>
+        {safeUrl && (
+          <a
+            href={safeUrl}
+            {...(isExternal
+              ? { target: "_blank", rel: "noopener noreferrer" }
+              : {})}
+            class="mt-2 inline-flex items-center justify-center py-[0.6em] px-[1.5em] rounded-full bg-accent text-inverted font-semibold text-sm tracking-[0.02em] no-underline transition-opacity hover:opacity-85"
+          >
+            {cta ?? "Comprar"}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function LoadingFallback() {
+  return (
+    <div class="not-prose my-8 border border-line rounded-brand bg-base max-w-xs mx-auto p-5 animate-pulse">
+      <div class="aspect-square bg-alt mb-4 rounded-brand" />
+      <div class="h-5 bg-alt mb-2 rounded" />
+      <div class="h-4 bg-alt mb-2 rounded" />
+      <div class="h-4 bg-alt w-2/3 mb-4 rounded" />
+      <div class="h-9 bg-alt w-1/2 rounded-full" />
+    </div>
+  );
+}

blog/sections/blocks/ProductHighlight.tsx

@@ -0,0 +1,143 @@
+import Image from "../../../website/components/Image.tsx";
+import { getProductDisplay } from "../../utils/productData.ts";
+import { coerceProduct } from "../../utils/coerceProductInput.ts";
+import { sanitizeHtml } from "../../utils/sanitizeHtml.ts";
+import { AppContext } from "../../mod.ts";
+import type { Product } from "../../../commerce/types.ts";
+
+/**
+ * @title Product
+ * @description Search and select a storefront product dynamically.
+ * @format dynamic-options
+ * @options blog/loaders/options/productsByTerm.ts
+ */
+type ProductReference = string;
+
+export interface Props {
+  /**
+   * @title Product
+   * @description Product reference as `platform:kind:id` (e.g. `vtex:product:123`). Loader-ref shapes work at runtime but strings are preferred.
+   * @format dynamic-options
+   * @options blog/loaders/options/productsByTerm.ts
+   */
+  product?: ProductReference;
+  /** Badge text (e.g. "Destaque", "Limited") */
+  badge?: string;
+  /** Full description (HTML) */
+  description?: string;
+  /** Call-to-action button text */
+  cta?: string;
+}
+
+type RuntimeProps = Omit<Props, "product"> & {
+  product: Product | null;
+};
+
+export async function loader(props: Props, req: Request, ctx: AppContext) {
+  const product = await coerceProduct(props.product, req, ctx);
+  return {
+    badge: props.badge,
+    description: props.description,
+    cta: props.cta,
+    product,
+  } as RuntimeProps;
+}
+
+/**
+ * @title Product Highlight
+ * @description Full-width featured product block with image and details side by side.
+ */
+export default function ProductHighlight(
+  { product, badge, description, cta }: RuntimeProps,
+) {
+  if (!product) return null;
+
+  const {
+    name,
+    imageUrl,
+    width,
+    height,
+    price,
+    listPrice,
+    safeUrl,
+    isExternal,
+  } = getProductDisplay(product);
+  if (!name) return null;
+
+  const productDescription = description ?? product.description;
+
+  return (
+    <div class="not-prose my-10 border border-line rounded-brand overflow-hidden bg-base">
+      <div class="flex flex-col sm:flex-row">
+        <div class="relative sm:w-2/5 overflow-hidden bg-alt aspect-video sm:aspect-auto sm:min-h-[280px]">
+          <Image
+            src={imageUrl}
+            alt={name}
+            width={width}
+            height={height}
+            fit="cover"
+            loading="lazy"
+            fetchPriority="low"
+            class="w-full h-full object-cover block"
+          />
+          {badge && (
+            <span class="absolute top-4 left-4 text-xs font-semibold px-2.5 py-1 rounded-full bg-accent text-inverted leading-none">
+              {badge}
+            </span>
+          )}
+        </div>
+        <div class="p-7 flex flex-col gap-3 justify-center sm:w-3/5">
+          <h3 class="text-xl font-bold leading-snug m-0">{name}</h3>
+          {productDescription && (
+            <div
+              class="text-[0.9375rem] text-secondary leading-relaxed [text-wrap:pretty]"
+              dangerouslySetInnerHTML={{
+                __html: sanitizeHtml(productDescription),
+              }}
+            />
+          )}
+          <div class="flex items-baseline gap-2.5 mt-1">
+            {price && (
+              <span class="text-2xl font-bold text-accent tabular-nums">
+                {price}
+              </span>
+            )}
+            {listPrice && listPrice !== price && (
+              <span class="text-base text-muted line-through tabular-nums">
+                {listPrice}
+              </span>
+            )}
+          </div>
+          {safeUrl && (
+            <a
+              href={safeUrl}
+              {...(isExternal
+                ? { target: "_blank", rel: "noopener noreferrer" }
+                : {})}
+              class="mt-2 self-start inline-flex items-center justify-center py-[0.7em] px-[2em] rounded-full bg-accent text-inverted font-semibold text-sm tracking-[0.02em] no-underline transition-opacity hover:opacity-85"
+            >
+              {cta ?? "Comprar"}
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function LoadingFallback() {
+  return (
+    <div class="not-prose my-10 border border-line rounded-brand bg-base animate-pulse">
+      <div class="flex flex-col sm:flex-row">
+        <div class="sm:w-2/5 aspect-video sm:aspect-auto bg-alt" />
+        <div class="p-7 sm:w-3/5 flex flex-col gap-3">
+          <div class="h-7 bg-alt rounded w-3/4" />
+          <div class="h-4 bg-alt rounded" />
+          <div class="h-4 bg-alt rounded w-5/6" />
+          <div class="h-8 bg-alt rounded w-1/3 mt-2" />
+          <div class="h-10 bg-alt rounded-full w-40 mt-2" />
+        </div>
+      </div>
+    </div>
+  );
+}