mowry_coffee/product.html at master · jacksonmowry/mowry_coffee · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@for product in products
<div id="card" class="flex overflow-hidden flex-col gap-2 w-96 bg-white rounded-xl shadow-sm">
    <img class="self-center w-full aspect-square" src="@product.img" alt="" />
    <div class="flex flex-col gap-2 justify-start p-4 h-full">
        <div>
            <div class="font-semibold">@product.name</div>
            <p>@product.description</p>
        </div>
        <div class="flex items-center self-center mt-4 w-full justify-center">
            @if product.q_on_hand > 0
            <label for="quantity">Qty:</label>
            <select hx-get="/price_per?id=@product.id" hx-swap="none" id="quantity@product.id" name="quantity@product.id" class="p-1 mr-2 bg-gray-50 rounded-lg border border-gray-300 focus:border-orange-400 focus:ring-orange-400 flex-start open:h-10">
                @for i in 1..product.q_on_hand+1
                <option value="$i">$i</option>
                @end
            </select>
            <button hx-on="click: document.getElementById('cart').open = true;" hx-swap="outerHTML" hx-target="#cart_cta@product.id" hx-get="/add_to_cart/@product.id" hx-include="[name='quantity@product.id']" class=" self-center my-4"
            ><span class="p-2 rounded-l-full border-2 border-r-0 border-orange-400"><span>$</span><span id="price@product.id">${product.default_price / f64(100):.2f}</span></span><span class="p-2 bg-orange-400 rounded-r-full border-2 border-orange-400">
                Add to cart
                <svg class="inline w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" stroke-linecap="round" stroke-linejoin="round"></path></svg></span
                                                                                                                                                                                                                                                                                                                                                                      ></button>
            @else
            <span class="font-bold">Out Of Stock</span>
            @end
        </div>
    </div>
    <div id="cart_cta@product.id"></div>
</div>
@end