From 12d87998eeb40a017f6553300dec5137a8b9be13 Mon Sep 17 00:00:00 2001
From: jamey <jamey@server.jamey.stream>
Date: Tue, 24 Feb 2026 15:22:43 +0000
Subject: [PATCH] make entire product card image area clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stretched-link::after overlay (z-index: 0) was blocked by
product-card-image-wrap (z-index: 1), so only the title text was
actually clickable. Wrapping the image area in a <.link> component
directly fixes this — taps/clicks bubble up to the link naturally,
and touch-scroll on the image carousel still works on mobile.

Also corrects the mode check: ThemeHook sets mode: :shop on shop pages,
not :live, so the condition is now mode != :preview (consistent with
how the title link already worked).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/shop/components.css                |  1 +
 .../components/shop_components/product.ex     | 27 +++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/assets/css/shop/components.css b/assets/css/shop/components.css
index f9fe576..f245346 100644
--- a/assets/css/shop/components.css
+++ b/assets/css/shop/components.css
@@ -50,6 +50,7 @@
   }
 
   .product-card-image-wrap {
+    display: block;
     z-index: 1;
     overflow: hidden;
     position: relative;
diff --git a/lib/berrypod_web/components/shop_components/product.ex b/lib/berrypod_web/components/shop_components/product.ex
index 25a8a00..9566d7c 100644
--- a/lib/berrypod_web/components/shop_components/product.ex
+++ b/lib/berrypod_web/components/shop_components/product.ex
@@ -96,14 +96,20 @@ defmodule BerrypodWeb.ShopComponents.Product do
     primary_image = Product.primary_image(product)
     hover_image = Product.hover_image(product)
 
+    product_url =
+      if assigns.clickable && assigns.mode != :preview do
+        "/products/#{Map.get(assigns.product, :slug) || Map.get(assigns.product, :id)}"
+      end
+
     assigns =
       assigns
       |> assign(:primary_image, primary_image)
       |> assign(:hover_image, hover_image)
       |> assign(:has_hover_image, assigns.theme_settings.hover_image && hover_image != nil)
+      |> assign(:product_url, product_url)
 
     ~H"""
-    <div class="product-card-image-wrap">
+    <.product_card_image_wrap href={@product_url}>
       <%= if @show_badges do %>
         <.product_badge product={@product} />
       <% end %>
@@ -142,7 +148,7 @@ defmodule BerrypodWeb.ShopComponents.Product do
           <span class="product-image-dot"></span>
         </div>
       <% end %>
-    </div>
+    </.product_card_image_wrap>
     <div class="product-card-content">
       <%= if @show_category && Map.get(@product, :category) do %>
         <%= if @mode == :preview do %>
@@ -193,6 +199,23 @@ defmodule BerrypodWeb.ShopComponents.Product do
     """
   end
 
+  attr :href, :string, default: nil
+  slot :inner_block, required: true
+
+  defp product_card_image_wrap(assigns) do
+    ~H"""
+    <%= if @href do %>
+      <.link navigate={@href} class="product-card-image-wrap" tabindex="-1" aria-hidden="true">
+        {render_slot(@inner_block)}
+      </.link>
+    <% else %>
+      <div class="product-card-image-wrap">
+        {render_slot(@inner_block)}
+      </div>
+    <% end %>
+    """
+  end
+
   attr :image, :map, default: nil
   attr :alt, :string, required: true
   attr :variant, :atom, required: true