wire shop LiveViews to DB queries and improve search UX
Replace PreviewData indirection in all shop LiveViews with direct Products context queries. Home, collection, product detail and error pages now query the database. Categories loaded once in ThemeHook. Cart hydration no longer falls back to mock data. PreviewData kept only for the theme editor. Search modal gains keyboard navigation (arrow keys, Enter, Escape), Cmd+K/Ctrl+K shortcut, full ARIA combobox pattern, LiveView navigate links, and 150ms debounce. SearchModal JS hook manages selection state and highlight. search.ex gets transaction safety on reindex and a public remove_product/1. 10 new integration tests. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
use SimpleshopThemeWeb, :live_view
|
||||
|
||||
alias SimpleshopTheme.Theme.PreviewData
|
||||
alias SimpleshopTheme.Products
|
||||
|
||||
@sort_options [
|
||||
{"featured", "Featured"},
|
||||
@@ -16,7 +16,6 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
def mount(_params, _session, socket) do
|
||||
socket =
|
||||
socket
|
||||
|> assign(:categories, PreviewData.categories())
|
||||
|> assign(:sort_options, @sort_options)
|
||||
|> assign(:current_sort, "featured")
|
||||
|
||||
@@ -27,7 +26,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
def handle_params(%{"slug" => slug} = params, _uri, socket) do
|
||||
sort = params["sort"] || "featured"
|
||||
|
||||
case load_collection(slug) do
|
||||
case load_collection(slug, sort) do
|
||||
{:ok, title, category, products} ->
|
||||
{:noreply,
|
||||
socket
|
||||
@@ -35,7 +34,7 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
|> assign(:collection_title, title)
|
||||
|> assign(:current_category, category)
|
||||
|> assign(:current_sort, sort)
|
||||
|> assign(:products, sort_products(products, sort))}
|
||||
|> assign(:products, products)}
|
||||
|
||||
:not_found ->
|
||||
{:noreply,
|
||||
@@ -45,19 +44,22 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
end
|
||||
end
|
||||
|
||||
defp load_collection("all") do
|
||||
{:ok, "All Products", nil, PreviewData.products()}
|
||||
defp load_collection("all", sort) do
|
||||
{:ok, "All Products", nil, Products.list_visible_products(sort: sort)}
|
||||
end
|
||||
|
||||
defp load_collection("sale") do
|
||||
sale_products = Enum.filter(PreviewData.products(), & &1.on_sale)
|
||||
{:ok, "Sale", :sale, sale_products}
|
||||
defp load_collection("sale", sort) do
|
||||
{:ok, "Sale", :sale, Products.list_visible_products(on_sale: true, sort: sort)}
|
||||
end
|
||||
|
||||
defp load_collection(slug) do
|
||||
case PreviewData.category_by_slug(slug) do
|
||||
nil -> :not_found
|
||||
category -> {:ok, category.name, category, PreviewData.products_by_category(slug)}
|
||||
defp load_collection(slug, sort) do
|
||||
case Enum.find(Products.list_categories(), &(&1.slug == slug)) do
|
||||
nil ->
|
||||
:not_found
|
||||
|
||||
category ->
|
||||
products = Products.list_visible_products(category: category.name, sort: sort)
|
||||
{:ok, category.name, category, products}
|
||||
end
|
||||
end
|
||||
|
||||
@@ -73,17 +75,6 @@ defmodule SimpleshopThemeWeb.Shop.Collection do
|
||||
{:noreply, push_patch(socket, to: ~p"/collections/#{slug}?sort=#{sort}")}
|
||||
end
|
||||
|
||||
defp sort_products(products, "featured"), do: products
|
||||
defp sort_products(products, "newest"), do: Enum.reverse(products)
|
||||
defp sort_products(products, "price_asc"), do: Enum.sort_by(products, & &1.cheapest_price)
|
||||
|
||||
defp sort_products(products, "price_desc"),
|
||||
do: Enum.sort_by(products, & &1.cheapest_price, :desc)
|
||||
|
||||
defp sort_products(products, "name_asc"), do: Enum.sort_by(products, & &1.title)
|
||||
defp sort_products(products, "name_desc"), do: Enum.sort_by(products, & &1.title, :desc)
|
||||
defp sort_products(products, _), do: products
|
||||
|
||||
defp collection_path(slug, "featured"), do: ~p"/collections/#{slug}"
|
||||
defp collection_path(slug, sort), do: ~p"/collections/#{slug}?sort=#{sort}"
|
||||
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
defmodule SimpleshopThemeWeb.Shop.Home do
|
||||
use SimpleshopThemeWeb, :live_view
|
||||
|
||||
alias SimpleshopTheme.Theme.PreviewData
|
||||
alias SimpleshopTheme.Products
|
||||
|
||||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
preview_data = %{
|
||||
products: PreviewData.products(),
|
||||
categories: PreviewData.categories()
|
||||
}
|
||||
products = Products.list_visible_products(limit: 8)
|
||||
|
||||
socket =
|
||||
socket
|
||||
|> assign(:page_title, "Home")
|
||||
|> assign(:preview_data, preview_data)
|
||||
|> assign(:products, products)
|
||||
|
||||
{:ok, socket}
|
||||
end
|
||||
|
||||
@@ -2,61 +2,53 @@ defmodule SimpleshopThemeWeb.Shop.ProductShow do
|
||||
use SimpleshopThemeWeb, :live_view
|
||||
|
||||
alias SimpleshopTheme.Cart
|
||||
alias SimpleshopTheme.Products
|
||||
alias SimpleshopTheme.Products.{Product, ProductImage}
|
||||
alias SimpleshopTheme.Theme.PreviewData
|
||||
|
||||
@impl true
|
||||
def mount(%{"id" => id}, _session, socket) do
|
||||
products = PreviewData.products()
|
||||
def mount(%{"id" => slug}, _session, socket) do
|
||||
case Products.get_visible_product(slug) do
|
||||
nil ->
|
||||
{:ok, push_navigate(socket, to: ~p"/collections/all")}
|
||||
|
||||
# Find product by slug or ID (real products use slugs, mock data uses string IDs)
|
||||
product = find_product(products, id)
|
||||
product ->
|
||||
related_products =
|
||||
Products.list_visible_products(
|
||||
category: product.category,
|
||||
limit: 4,
|
||||
exclude: product.id
|
||||
)
|
||||
|
||||
# Get related products (exclude current product, take 4)
|
||||
related_products =
|
||||
products
|
||||
|> Enum.reject(fn p -> p.id == product.id end)
|
||||
|> Enum.take(4)
|
||||
gallery_images =
|
||||
(product.images || [])
|
||||
|> Enum.sort_by(& &1.position)
|
||||
|> Enum.map(fn img -> ProductImage.direct_url(img, 1200) end)
|
||||
|> Enum.reject(&is_nil/1)
|
||||
|
||||
# Build gallery images from local image_id or external URL
|
||||
gallery_images =
|
||||
(Map.get(product, :images) || [])
|
||||
|> Enum.sort_by(& &1.position)
|
||||
|> Enum.map(fn img -> ProductImage.direct_url(img, 1200) end)
|
||||
|> Enum.reject(&is_nil/1)
|
||||
option_types = Product.option_types(product)
|
||||
variants = product.variants || []
|
||||
{selected_options, selected_variant} = initialize_variant_selection(variants)
|
||||
available_options = compute_available_options(option_types, variants, selected_options)
|
||||
display_price = variant_price(selected_variant, product)
|
||||
|
||||
# Initialize variant selection
|
||||
option_types = Product.option_types(product)
|
||||
variants = Map.get(product, :variants) || []
|
||||
{selected_options, selected_variant} = initialize_variant_selection(variants)
|
||||
available_options = compute_available_options(option_types, variants, selected_options)
|
||||
display_price = variant_price(selected_variant, product)
|
||||
socket =
|
||||
socket
|
||||
|> assign(:page_title, product.title)
|
||||
|> assign(:product, product)
|
||||
|> assign(:gallery_images, gallery_images)
|
||||
|> assign(:related_products, related_products)
|
||||
|> assign(:quantity, 1)
|
||||
|> assign(:option_types, option_types)
|
||||
|> assign(:variants, variants)
|
||||
|> assign(:selected_options, selected_options)
|
||||
|> assign(:selected_variant, selected_variant)
|
||||
|> assign(:available_options, available_options)
|
||||
|> assign(:display_price, display_price)
|
||||
|
||||
socket =
|
||||
socket
|
||||
|> assign(:page_title, product.title)
|
||||
|> assign(:product, product)
|
||||
|> assign(:gallery_images, gallery_images)
|
||||
|> assign(:related_products, related_products)
|
||||
|> assign(:quantity, 1)
|
||||
|> assign(:option_types, option_types)
|
||||
|> assign(:variants, variants)
|
||||
|> assign(:selected_options, selected_options)
|
||||
|> assign(:selected_variant, selected_variant)
|
||||
|> assign(:available_options, available_options)
|
||||
|> assign(:display_price, display_price)
|
||||
|
||||
{:ok, socket}
|
||||
{:ok, socket}
|
||||
end
|
||||
end
|
||||
|
||||
# Find product by slug first (real products), then try ID match (mock data)
|
||||
defp find_product(products, id) do
|
||||
Enum.find(products, fn p -> p[:slug] == id end) ||
|
||||
Enum.find(products, fn p -> p.id == id end) ||
|
||||
List.first(products)
|
||||
end
|
||||
|
||||
# Select first available variant by default
|
||||
defp initialize_variant_selection([first | _] = _variants) do
|
||||
{first.options, first}
|
||||
end
|
||||
@@ -65,11 +57,8 @@ defmodule SimpleshopThemeWeb.Shop.ProductShow do
|
||||
{%{}, nil}
|
||||
end
|
||||
|
||||
# Compute which option values are available given current selection
|
||||
defp compute_available_options(option_types, variants, selected_options) do
|
||||
Enum.reduce(option_types, %{}, fn opt_type, acc ->
|
||||
# For each option type, find which values have at least one available variant
|
||||
# when combined with the other selected options
|
||||
other_options = Map.delete(selected_options, opt_type.name)
|
||||
|
||||
available_values =
|
||||
@@ -99,10 +88,8 @@ defmodule SimpleshopThemeWeb.Shop.ProductShow do
|
||||
def handle_event("select_option", %{"option" => option_name, "value" => value}, socket) do
|
||||
selected_options = Map.put(socket.assigns.selected_options, option_name, value)
|
||||
|
||||
# Find matching variant
|
||||
selected_variant = find_variant(socket.assigns.variants, selected_options)
|
||||
|
||||
# Recompute available options based on new selection
|
||||
available_options =
|
||||
compute_available_options(
|
||||
socket.assigns.option_types,
|
||||
|
||||
Reference in New Issue
Block a user