feat: add dynamic variant selector with color swatches

- Fix Printify options parsing (Color/Size were swapped)
- Add extract_option_types/1 for frontend display with hex colors
- Filter option types to only published variants (not full catalog)
- Track selected variant in LiveView with price updates
- Color swatches for color-type options, text buttons for size
- Disable unavailable combinations
- Add startup recovery for stale sync status

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/simpleshop_theme_web/live/shop_live/product_show.ex

@@ -42,6 +42,13 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
       ]
       |> Enum.reject(&is_nil/1)
 
+    # Initialize variant selection
+    option_types = product[:option_types] || []
+    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)
+
     socket =
       socket
       |> assign(:page_title, product.name)
@@ -57,6 +64,12 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
       |> assign(:cart_items, [])
       |> assign(:cart_count, 0)
       |> assign(:cart_subtotal, "£0.00")
+      |> 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}
   end
@@ -76,6 +89,70 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
   defp image_src(_, url) when is_binary(url), do: url
   defp image_src(_, _), do: nil
 
+  # Select first available variant by default
+  defp initialize_variant_selection([first | _] = _variants) do
+    {first.options, first}
+  end
+
+  defp initialize_variant_selection([]) 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 =
+        variants
+        |> Enum.filter(fn v ->
+          v.is_available &&
+            Enum.all?(other_options, fn {k, selected_val} ->
+              v.options[k] == selected_val
+            end)
+        end)
+        |> Enum.map(fn v -> v.options[opt_type.name] end)
+        |> Enum.uniq()
+
+      Map.put(acc, opt_type.name, available_values)
+    end)
+  end
+
+  defp variant_price(%{price: price}, _product) when is_integer(price), do: price
+  defp variant_price(_, %{price: price}), do: price
+  defp variant_price(_, _), do: 0
+
+  defp find_variant(variants, selected_options) do
+    Enum.find(variants, fn v -> v.options == selected_options end)
+  end
+
+  @impl true
+  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,
+        socket.assigns.variants,
+        selected_options
+      )
+
+    socket =
+      socket
+      |> assign(:selected_options, selected_options)
+      |> assign(:selected_variant, selected_variant)
+      |> assign(:available_options, available_options)
+      |> assign(:display_price, variant_price(selected_variant, socket.assigns.product))
+
+    {:noreply, socket}
+  end
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -91,6 +168,10 @@ defmodule SimpleshopThemeWeb.ShopLive.ProductShow do
       cart_items={@cart_items}
       cart_count={@cart_count}
       cart_subtotal={@cart_subtotal}
+      option_types={@option_types}
+      selected_options={@selected_options}
+      available_options={@available_options}
+      display_price={@display_price}
     />
     """
   end

lib/simpleshop_theme_web/live/theme_live/index.ex

@@ -336,12 +336,35 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
 
   defp preview_page(%{page: :pdp} = assigns) do
     product = List.first(assigns.preview_data.products)
+    option_types = product[:option_types] || []
+    variants = product[:variants] || []
+
+    # Select first variant by default for preview
+    {selected_options, selected_variant} =
+      case variants do
+        [first | _] -> {first.options, first}
+        [] -> {%{}, nil}
+      end
+
+    # All options available in preview mode (show all values)
+    available_options =
+      Enum.reduce(option_types, %{}, fn opt, acc ->
+        values = Enum.map(opt.values, & &1.title)
+        Map.put(acc, opt.name, values)
+      end)
+
+    display_price =
+      if selected_variant, do: selected_variant.price, else: product.price
 
     assigns =
       assigns
       |> assign(:product, product)
       |> assign(:gallery_images, build_gallery_images(product))
       |> assign(:related_products, Enum.slice(assigns.preview_data.products, 1, 4))
+      |> assign(:option_types, option_types)
+      |> assign(:selected_options, selected_options)
+      |> assign(:available_options, available_options)
+      |> assign(:display_price, display_price)
 
     ~H"""
     <SimpleshopThemeWeb.PageTemplates.pdp
@@ -356,6 +379,10 @@ defmodule SimpleshopThemeWeb.ThemeLive.Index do
       cart_items={PreviewData.cart_drawer_items()}
       cart_count={2}
       cart_subtotal="£72.00"
+      option_types={@option_types}
+      selected_options={@selected_options}
+      available_options={@available_options}
+      display_price={@display_price}
     />
     """
   end