23e95a3de6
All checks were successful
deploy / deploy (push) Successful in 1m3s
Variant options (colour, size) are now URL params handled via handle_params instead of phx-click events. Swatches and size buttons render as patch links in shop mode, so changing variants works as plain navigation without JS. Quantity is now a number input that submits with the form. Unavailable variants render as disabled spans. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
79 lines
2.4 KiB
Plaintext
79 lines
2.4 KiB
Plaintext
<.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}
|
|
/>
|
|
<%!-- quantity is provided by the quantity_selector input below --%>
|
|
|
|
<%!-- 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}
|
|
option_urls={(@option_urls || %{})[option_type.name] || %{}}
|
|
/>
|
|
<% 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>
|