76 lines
2.2 KiB
Elixir
76 lines
2.2 KiB
Elixir
|
defmodule BerrypodWeb.Shop.Search do
|
||
|
|
use BerrypodWeb, :live_view
|
||
|
|
|
||
|
|
alias Berrypod.Search
|
||
|
|
|
||
|
|
@impl true
|
||
|
|
def mount(_params, _session, socket) do
|
||
|
|
{:ok, assign(socket, :page_title, "Search")}
|
||
|
|
end
|
||
|
|
|
||
|
|
@impl true
|
||
|
|
def handle_params(params, _uri, socket) do
|
||
|
|
query = params["q"] || ""
|
||
|
|
results = if query != "", do: Search.search(query), else: []
|
||
|
|
|
||
|
|
{:noreply,
|
||
|
|
socket
|
||
|
|
|> assign(:search_page_query, query)
|
||
|
|
|> assign(:search_page_results, results)}
|
||
|
|
end
|
||
|
|
|
||
|
|
@impl true
|
||
|
|
def handle_event("search_submit", %{"q" => query}, socket) do
|
||
|
|
{:noreply, push_patch(socket, to: ~p"/search?q=#{query}")}
|
||
|
|
end
|
||
|
|
|
||
|
|
@impl true
|
||
|
|
def render(assigns) do
|
||
|
|
~H"""
|
||
|
|
<.shop_layout {layout_assigns(assigns)} active_page="search">
|
||
|
|
<main id="main-content" class="page-container">
|
||
|
|
<.page_title text="Search" />
|
||
|
|
|
||
|
|
<form action="/search" method="get" phx-submit="search_submit" class="search-page-form">
|
||
|
|
<input
|
||
|
|
type="search"
|
||
|
|
name="q"
|
||
|
|
value={@search_page_query}
|
||
|
|
placeholder="Search products..."
|
||
|
|
class="themed-input"
|
||
|
|
/>
|
||
|
|
<button type="submit" class="themed-button">Search</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<%= if @search_page_results != [] do %>
|
||
|
|
<p class="search-page-count">
|
||
|
|
{length(@search_page_results)} {if length(@search_page_results) == 1,
|
||
|
|
do: "result",
|
||
|
|
else: "results"} for "{@search_page_query}"
|
||
|
|
</p>
|
||
|
|
<.product_grid theme_settings={@theme_settings}>
|
||
|
|
<%= for product <- @search_page_results do %>
|
||
|
|
<.product_card
|
||
|
|
product={product}
|
||
|
|
theme_settings={@theme_settings}
|
||
|
|
mode={@mode}
|
||
|
|
variant={:default}
|
||
|
|
/>
|
||
|
|
<% end %>
|
||
|
|
</.product_grid>
|
||
|
|
<% else %>
|
||
|
|
<%= if @search_page_query != "" do %>
|
||
|
|
<div class="collection-empty">
|
||
|
|
<p>No products found for "{@search_page_query}"</p>
|
||
|
|
<.link navigate="/collections/all" class="collection-empty-link">
|
||
|
|
Browse all products
|
||
|
|
</.link>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
<% end %>
|
||
|
|
</main>
|
||
|
|
</.shop_layout>
|
||
|
|
"""
|
||
|
|
end
|
||
|
|
end
|