berrypod/lib/berrypod_web/components/page_templates/pdp.html.heex

<.shop_layout {layout_assigns(assigns)} active_page="pdp">
  <main id="main-content" class="page-container">
    <.breadcrumb
      items={
        if @product.category do
          [
            %{
              label: @product.category,
              page: "collection",
              href:
                "/collections/#{@product.category |> String.downcase() |> String.replace(" ", "-")}"
            }
          ]
        else
          []
        end ++
          [%{label: @product.title, current: true}]
      }
      mode={@mode}
    />

    <div class="pdp-grid">
      <.product_gallery images={@gallery_images} product_name={@product.title} />

      <div>
        <.product_info product={@product} display_price={@display_price} />

        <form action="/cart/add" method="post" phx-submit="add_to_cart">
          <input type="hidden" name="_csrf_token" value={Phoenix.Controller.get_csrf_token()} />
          <input
            type="hidden"
            name="variant_id"
            value={@selected_variant && @selected_variant.id}
          />
          <input type="hidden" name="quantity" value={@quantity} />

          <%!-- Dynamic variant selectors --%>
          <%= for option_type <- @option_types do %>
            <.variant_selector
              option_type={option_type}
              selected={@selected_options[option_type.name]}
              available={@available_options[option_type.name] || []}
              mode={@mode}
            />
          <% end %>

          <%!-- Fallback for products with no variant options --%>
          <div
            :if={@option_types == []}
            class="pdp-variant-fallback"
          >
            One size
          </div>

          <.quantity_selector quantity={@quantity} in_stock={@product.in_stock} />
          <.add_to_cart_button mode={@mode} />
        </form>
        <.trust_badges :if={@theme_settings.pdp_trust_badges} />
        <.product_details product={@product} />
      </div>
    </div>

    <.reviews_section
      :if={@theme_settings.pdp_reviews}
      reviews={Berrypod.Theme.PreviewData.reviews()}
      average_rating={5}
      total_count={24}
    />

    <.related_products_section
      :if={@theme_settings.pdp_related_products}
      products={@related_products}
      theme_settings={@theme_settings}
      mode={@mode}
    />
  </main>
</.shop_layout>