chore: on click on product to show it, it scrolls to the top of the page

AlissonMachadoDev · Dec 1, 2024 · 507f077 · 507f077
1 parent e00946e
commit 507f077
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -32,6 +32,14 @@ import Uploaders from "./uploaders";
 window.Alpine = Alpine;
 Alpine.start()
 
+window.addEventListener("scroll-top", () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  });
+});
+
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,

diff --git a/lib/digistab_store_web/live/products/product_card_component.ex b/lib/digistab_store_web/live/products/product_card_component.ex
@@ -23,14 +23,17 @@ defmodule DigistabStoreWeb.Components.ProductCard do
       <div class="relative">
         <div class="aspect-w-16 aspect-h-9">
           <%= if @product.photos && Enum.any?(@product.photos) do %>
-            <.link patch={~p"/products/#{@product.id}"}>
+            <div
+              phx-click={JS.patch(~p"/products/#{@product.id}") |> JS.dispatch("scroll-top")}
+              class="cursor-pointer"
+            >
               <img
                 src={List.first(@product.photos).url}
                 alt={@product.name}
                 class="w-full h-48 object-cover object-center rounded-lg transition-all duration-300 hover:scale-105"
                 loading="lazy"
               />
-            </.link>
+            </div>
           <% else %>
             <div class="flex items-center justify-center w-full h-48 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg animate-pulse">
               <.icon name="hero-photo" class="w-12 h-12 text-gray-400" />