79 lines
3.0 KiB
HTML
79 lines
3.0 KiB
HTML
{% extends 'theme/base.html' %}
|
|
|
|
{% load static %}
|
|
{% load i18n %}
|
|
|
|
{% block main %}
|
|
{% include 'components/generic/navbar.html' %}
|
|
|
|
<section class="py-6 md:py-12 antialiased">
|
|
<div class="max-w-screen-xl px-4 sm:px-6 lg:px-8 mx-auto">
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-8 xl:gap-16">
|
|
<div class="shrink-0 max-w-md lg:max-w-lg mx-auto w-full">
|
|
|
|
<div class="carousel w-full rounded-2xl bg-base-200/50 aspect-square">
|
|
{% for image in product.images.all %}
|
|
<div id="product-image-{{ forloop.counter }}" class="carousel-item w-full items-center justify-center">
|
|
<img class="w-full h-full object-contain p-6" src="{{ image.xl.url }}" alt="{{ product.name }}"/>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if product.images.all|length > 1 %}
|
|
<div class="flex w-full justify-center gap-2 py-3 flex-wrap">
|
|
{% for image in product.images.all %}
|
|
<a href="#product-image-{{ forloop.counter }}" class="w-14 h-14 rounded-lg border-2 border-base-300 hover:border-primary overflow-hidden shrink-0">
|
|
<img class="w-full h-full object-contain bg-base-200/50 p-1" src="{{ image.s.url }}" alt="{{ product.name }} {{ forloop.counter }}">
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mt-6 lg:mt-0">
|
|
<h1 class="font-display text-2xl sm:text-3xl font-bold text-base-content">
|
|
{{ product.name }}
|
|
</h1>
|
|
|
|
<div class="my-4 flex items-center gap-3 flex-wrap">
|
|
<p class="font-display text-3xl sm:text-4xl font-extrabold">
|
|
{% if product.price %}
|
|
{{ product.price.price_with_tax }} €
|
|
{% elif product.min_variant_price %}
|
|
{% translate 'Desde' %} {{ product.min_variant_price.price_with_tax }} €
|
|
{% endif %}
|
|
</p>
|
|
|
|
{% if not product.has_variants %}
|
|
{% if product.stock > 0 %}
|
|
<span class="badge badge-success badge-outline">{% translate 'En stock' %}</span>
|
|
{% else %}
|
|
<span class="badge badge-error badge-outline">{% translate 'Agotado' %}</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<hr class="my-6 border-base-300"/>
|
|
|
|
<div class="flex items-center gap-3">
|
|
{% if user.is_authenticated %}
|
|
<div hx-get="{% url 'web:wishlist_button' pk=product.pk %}" hx-trigger="load, updated-wishlist">
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="flex-1 max-w-xs">
|
|
{% include 'components/cart/add_to_cart.html' %}
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-6 border-base-300"/>
|
|
|
|
<p class="text-base-content/80 leading-relaxed whitespace-pre-line">
|
|
{{ product.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|