shop.tonybtw.com

package views

import (

	"fmt"

	"shop.tonybtw.com/internal/models"

)

func get_all_images(product models.Product, images []models.Product_Image) []string {

	var urls []string

	urls = append(urls, product.Image_URL)

	for _, img := range images {

		urls = append(urls, img.Image_URL)

	}

	return urls

}

templ Product(product models.Product, variants []models.Variant, images []models.Product_Image, cart_count int) {

	@Layout(product.Name) {

		<div class="product-detail">

			<div class="product-gallery" x-data={ fmt.Sprintf("{ active: 0, images: %s }", to_json(get_all_images(product, images))) }>

				<img :src="images[active]" :alt="active" class="gallery-main"/>

				if len(images) > 0 {

					<div class="gallery-thumbs">

						<template x-for="(img, index) in images" :key="index">

							<img

								:src="img"

								:class="{ 'active': active === index }"

								@click="active = index"

								class="gallery-thumb"

							/>

						</template>

					</div>

				}

			</div>

			<div class="product-info">

				<h1>{ product.Name }</h1>

				<p class="product-price">{ Format_Price(product.Price) }</p>

				<p class="product-description">{ product.Description }</p>

				<form hx-post="/cart/add" hx-target="#cart-widget" hx-swap="outerHTML">

					<input type="hidden" name="product_id" value={ templ.EscapeString(fmt.Sprintf("%d", product.ID)) }/>

					<label for="variant_id">Size:</label>

					<select name="variant_id" id="variant_id" required>

						for _, variant := range variants {

							<option value={ templ.EscapeString(fmt.Sprintf("%d", variant.ID)) }>

								{ variant.Size }

							</option>

						}

					</select>

					<label for="quantity">Quantity:</label>

					<select name="quantity" id="quantity">

						for i := 1; i <= 10; i++ {

							<option value={ templ.EscapeString(fmt.Sprintf("%d", i)) }>{ templ.EscapeString(fmt.Sprintf("%d", i)) }</option>

						}

					</select>

					<button type="submit" class="btn-primary">Add to Cart</button>

				</form>

			</div>

		</div>

	}

}