diff --git a/lib/simpleshop_theme_web/components/shop_components.ex b/lib/simpleshop_theme_web/components/shop_components.ex index 197e660..0266750 100644 --- a/lib/simpleshop_theme_web/components/shop_components.ex +++ b/lib/simpleshop_theme_web/components/shop_components.ex @@ -245,4 +245,141 @@ defmodule SimpleshopThemeWeb.ShopComponents do """ end + + @doc """ + Renders the shop header with logo, navigation, and actions. + + ## Attributes + + * `theme_settings` - Required. The theme settings map. + * `logo_image` - Optional. The logo image struct (with id, is_svg fields). + * `header_image` - Optional. The header background image struct. + * `active_page` - Optional. Current page for nav highlighting. + * `mode` - Optional. Either `:live` (default) or `:preview`. + * `cart_count` - Optional. Number of items in cart. Defaults to 0. + + ## Examples + + <.shop_header theme_settings={@theme_settings} /> + <.shop_header theme_settings={@theme_settings} mode={:preview} cart_count={2} /> + """ + attr :theme_settings, :map, required: true + attr :logo_image, :map, default: nil + attr :header_image, :map, default: nil + attr :active_page, :string, default: nil + attr :mode, :atom, default: :live + attr :cart_count, :integer, default: 0 + + def shop_header(assigns) do + ~H""" +
+ <%= if @theme_settings.header_background_enabled && @header_image do %> +
+ <% end %> + + + + + +
+ + +
+
+ """ + end + + defp logo_url(logo_image, %{logo_recolor: true, logo_color: color}) when logo_image.is_svg do + clean_color = String.trim_leading(color, "#") + "/images/#{logo_image.id}/recolored/#{clean_color}" + end + + defp logo_url(logo_image, _), do: "/images/#{logo_image.id}" + + defp header_background_style(settings, header_image) do + "position: absolute; top: 0; left: 0; right: 0; bottom: 0; " <> + "background-image: url('/images/#{header_image.id}'); " <> + "background-size: #{settings.header_zoom}%; " <> + "background-position: #{settings.header_position_x}% #{settings.header_position_y}%; " <> + "background-repeat: no-repeat; z-index: 0;" + end end diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex b/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex index cc45082..428d999 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages.ex @@ -5,117 +5,6 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do embed_templates "preview_pages/*" - @doc """ - Renders the shop header with logo based on logo_mode setting. - """ - attr :theme_settings, :map, required: true - attr :logo_image, :map, default: nil - attr :header_image, :map, default: nil - attr :active_page, :string, default: nil - - def shop_header(assigns) do - ~H""" -
- <%= if @theme_settings.header_background_enabled && @header_image do %> -
- <% end %> - - - - - -
- - -
-
- """ - end - - defp logo_url(logo_image, %{logo_recolor: true, logo_color: color}) when logo_image.is_svg do - clean_color = String.trim_leading(color, "#") - "/images/#{logo_image.id}/recolored/#{clean_color}" - end - defp logo_url(logo_image, _), do: "/images/#{logo_image.id}" - - defp header_background_style(settings, header_image) do - "position: absolute; top: 0; left: 0; right: 0; bottom: 0; " <> - "background-image: url('/images/#{header_image.id}'); " <> - "background-size: #{settings.header_zoom}%; " <> - "background-position: #{settings.header_position_x}% #{settings.header_position_y}%; " <> - "background-repeat: no-repeat; z-index: 0;" - end - @doc """ Renders the cart drawer (floating sidebar). diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex index 0144832..6370abc 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex @@ -8,7 +8,7 @@ <% end %> - + <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="about" mode={:preview} cart_count={2} />
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex index 0b0b308..5a1d043 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex @@ -8,7 +8,7 @@ <% end %> - + <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="cart" mode={:preview} cart_count={2} />

diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex index 85938a2..1e280f0 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex @@ -8,7 +8,7 @@ <% end %> - + <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="collection" mode={:preview} cart_count={2} />
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex index eccf6bd..5e48412 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex @@ -8,7 +8,7 @@ <% end %> - + <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="contact" mode={:preview} cart_count={2} />

diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex index fc2aef1..14125b4 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex @@ -8,7 +8,7 @@ <% end %> - + <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="error" mode={:preview} cart_count={2} />
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex index fa991c8..5c78f91 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex @@ -8,7 +8,7 @@ <% end %> - + <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="home" mode={:preview} cart_count={2} />
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex index 2cc4e87..6c7672d 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex @@ -11,7 +11,7 @@ <% end %> - + <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="pdp" mode={:preview} cart_count={2} />