feat: improved UI
This commit is contained in:
@@ -4,9 +4,9 @@
|
||||
<input type="hidden" name="product" value="{{ product.pk }}">
|
||||
|
||||
{% if product.has_variants %}
|
||||
<div class="mb-4">
|
||||
<label for="variant">{% translate 'Variante' %}</label>
|
||||
<select class="input" id="variant" name="variant">
|
||||
<div class="mb-3">
|
||||
<label for="variant" class="sr-only">{% translate 'Variante' %}</label>
|
||||
<select class="select select-bordered {% if size == 'sm' %}select-sm{% endif %} w-full" id="variant" name="variant">
|
||||
{% for variant in product.variants.all %}
|
||||
<option value="{{ variant.pk }}" {% if not variant.stock %}disabled{% endif %}>
|
||||
{% for attribute_value in variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
|
||||
@@ -17,12 +17,11 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex items-center">
|
||||
<input class="input mr-4" id="quantity" aria-label="quantity" type="number" min="1" max="10" name="quantity" value="1">
|
||||
<button class="btn btn-primary">
|
||||
{% include 'components/icons/add_cart.svg' %}
|
||||
{% translate 'Añadir al carrito' %}
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="input input-bordered {% if size == 'sm' %}input-sm w-16{% else %}w-20{% endif %} text-center" id="quantity" aria-label="{% translate 'Cantidad' %}" type="number" min="1" max="10" name="quantity" value="1">
|
||||
<button class="btn btn-primary {% if size == 'sm' %}btn-sm{% endif %} flex-1">
|
||||
{% include 'components/icons/add_cart.svg' %}
|
||||
{% if size == 'sm' %}{% translate 'Añadir' %}{% else %}{% translate 'Añadir al carrito' %}{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
@@ -1,94 +1,79 @@
|
||||
{% load i18n %}
|
||||
<section class=" py-2 antialiased md:py-8">
|
||||
<section class="py-6 md:py-12 antialiased">
|
||||
<form action="{% url 'web:cart_detail' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
|
||||
<h2 class="text-xl font-semibold sm:text-2xl">{% translate 'Carrito' %}</h2>
|
||||
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h2 class="text-xl sm:text-2xl font-display font-bold mb-6">{% translate 'Carrito' %}</h2>
|
||||
|
||||
<div class="mt-4 sm:mt-6 md:gap-6 lg:flex lg:items-start xl:gap-8">
|
||||
<div class="mx-auto w-full flex-none lg:max-w-2xl xl:max-w-4xl">
|
||||
<div class="space-y-6">
|
||||
<div class="lg:grid lg:grid-cols-3 lg:gap-8 xl:gap-12">
|
||||
<div class="lg:col-span-2">
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
{% for item in items %}
|
||||
<div class="rounded-lg p-4 shadow-md md:p-6">
|
||||
<div class="space-y-4 flex items-center justify-between gap-6 space-y-0">
|
||||
<a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
|
||||
class="shrink-0 md:order-1">
|
||||
<img class="h-20 w-20" src="{{ item.product.images.all.0.s.url }}"
|
||||
alt="{{ item.product.name }}"/>
|
||||
<img class="hidden h-20 w-20" src="{{ item.product.images.all.0.s_dark.url }}"
|
||||
<div class="rounded-2xl border border-base-300 bg-base-100 p-4 md:p-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}" class="shrink-0">
|
||||
<img class="h-20 w-20 rounded-lg object-contain bg-base-200/50 p-1" src="{{ item.product.images.all.0.s.url }}"
|
||||
alt="{{ item.product.name }}"/>
|
||||
</a>
|
||||
|
||||
<div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
|
||||
<div class="w-full min-w-0 flex-1">
|
||||
<a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
|
||||
class="text-base font-medium hover:underline "
|
||||
class="text-base font-medium hover:text-primary"
|
||||
>
|
||||
{{ item.product.name }}
|
||||
</a>
|
||||
{% if item.variant %}
|
||||
<p class="text-sm">
|
||||
<p class="text-sm text-base-content/60">
|
||||
{% for attribute_value in item.variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<form class="flex" hx-post="{% url 'web:delete_cart_item' pk=item.pk %}"
|
||||
hx-swap="none">
|
||||
{% csrf_token %}
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex items-center text-sm font-medium text-red-700 hover:underline cursor-pointer"
|
||||
>
|
||||
{% include 'components/icons/x.svg' %}
|
||||
{% translate 'Quitar' %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<form hx-post="{% url 'web:delete_cart_item' pk=item.pk %}" hx-swap="none" class="mt-2">
|
||||
{% csrf_token %}
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex items-center gap-1 text-sm font-medium text-error hover:underline cursor-pointer"
|
||||
>
|
||||
{% include 'components/icons/x.svg' %}
|
||||
{% translate 'Quitar' %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<label for="counter-input" class="sr-only">{% translate 'Cantidad' %}</label>
|
||||
<div class="flex items-center justify-between md:order-3 md:justify-end">
|
||||
<div class="flex items-center">
|
||||
<span class="w-10 shrink-0 text-center text-sm font-medium focus:outline-none focus:ring-0">
|
||||
{{ item.quantity }}x
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-end md:order-4 md:w-32">
|
||||
<p class="text-base font-bold ">
|
||||
{{ item.price.price_with_tax }}€
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-end shrink-0">
|
||||
<span class="block text-sm text-base-content/60 mb-1">{{ item.quantity }}x</span>
|
||||
<p class="text-base font-bold">
|
||||
{{ item.price.price_with_tax }}€
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if items.count == 0 %}
|
||||
<p class="text-base font-normal ">
|
||||
{% translate 'No hay nada en el carrito...' %}
|
||||
</p>
|
||||
<p>
|
||||
<a href="{% url 'web:index' %}" title=""
|
||||
class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline ">
|
||||
<div class="rounded-2xl border border-base-300 bg-base-100 p-8 text-center">
|
||||
<p class="text-base-content/70 mb-2">
|
||||
{% translate 'No hay nada en el carrito...' %}
|
||||
</p>
|
||||
<a href="{% url 'web:index' %}" class="link link-primary">
|
||||
{% translate 'Volver a inicio' %}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<h2 class="text-xl font-semibold sm:text-2xl">
|
||||
<h2 class="text-lg sm:text-xl font-display font-semibold mt-4">
|
||||
{% translate 'Dirección de envío' %}
|
||||
</h2>
|
||||
|
||||
<section class="p-4 rounded-lg">
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
|
||||
<section class="rounded-2xl border border-base-300 bg-base-100 p-4 md:p-6">
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
{% if user.is_anonymous %}
|
||||
<div class="sm:col-span-2">
|
||||
<label for="email"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<label for="email" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'E-Mail' %}</label>
|
||||
<input type="text" name="email" id="email"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'E-Mail' %}"
|
||||
value=""
|
||||
required=""
|
||||
@@ -98,44 +83,40 @@
|
||||
<input type="hidden" name="email" value="{{ user.email }}">
|
||||
{% endif %}
|
||||
<div class="sm:col-span-2">
|
||||
<label for="shipping_address_full_name"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<label for="shipping_address_full_name" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Nombre completo' %}</label>
|
||||
<input type="text" name="shipping_address_full_name" id="shipping_address_full_name"
|
||||
class="input"
|
||||
class="input input-bordered w-full mb-3"
|
||||
placeholder="{% translate 'Nombre completo' %}"
|
||||
value="{% if shipping_address %}{{ shipping_address.full_name }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
<label for="shipping_address"
|
||||
class="block my-2 text-sm font-medium ">
|
||||
<label for="shipping_address" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Dirección' %}</label>
|
||||
<input type="text" name="shipping_address" id="shipping_address"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'Dirección' %}"
|
||||
value="{% if shipping_address %}{{ shipping_address.address }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="shipping_address_town"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<div>
|
||||
<label for="shipping_address_town" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Localidad' %}
|
||||
</label>
|
||||
<input type="text" name="shipping_address_town" id="shipping_address_town"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'Localidad' %}"
|
||||
value="{% if shipping_address %}{{ shipping_address.address_town }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="shipping_address_zip"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<div>
|
||||
<label for="shipping_address_zip" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Código postal' %}
|
||||
</label>
|
||||
<input type="text" name="shipping_address_zip" id="shipping_address_zip"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'Código postal' %}"
|
||||
value="{% if shipping_address %}{{ shipping_address.address_zip }}{% endif %}"
|
||||
required=""
|
||||
@@ -143,80 +124,72 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="shipping_address_state"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<label for="shipping_address_state" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Provincia' %}
|
||||
</label>
|
||||
<input type="text" name="shipping_address_state" id="shipping_address_state"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'Provincia' %}"
|
||||
value="{% if shipping_address %}{{ shipping_address.address_state }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<label for="shipping_address_country" class="block mb-2 text-sm font-medium ">
|
||||
<label for="shipping_address_country" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'País' %}
|
||||
</label>
|
||||
<input type="text" name="shipping_address_country" id="shipping_address_country"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'País' %}"
|
||||
value="{% if shipping_address %}{{ shipping_address.address_country }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2 class="text-xl font-semibold sm:text-2xl">
|
||||
<h2 class="text-lg sm:text-xl font-display font-semibold mt-4">
|
||||
{% translate 'Dirección de facturación' %}
|
||||
</h2>
|
||||
|
||||
<section class="p-4 rounded-lg">
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
|
||||
<section class="rounded-2xl border border-base-300 bg-base-100 p-4 md:p-6">
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div class="sm:col-span-2">
|
||||
<label for="billing_address_full_name"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<label for="billing_address_full_name" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Nombre completo' %}</label>
|
||||
<input type="text" name="billing_address_full_name" id="billing_address_full_name"
|
||||
class="input"
|
||||
class="input input-bordered w-full mb-3"
|
||||
placeholder="{% translate 'Nombre completo' %}"
|
||||
value="{% if billing_address %}{{ billing_address.full_name }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
<label for="billing_address"
|
||||
class="block my-2 text-sm font-medium ">
|
||||
<label for="billing_address" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Dirección' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address" id="billing_address"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'Dirección' %}"
|
||||
value="{% if billing_address %}{{ billing_address.address }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="billing_address_town"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<div>
|
||||
<label for="billing_address_town" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Localidad' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address_town" id="billing_address_town"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'Localidad' %}"
|
||||
value="{% if billing_address %}{{ billing_address.address_town }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="billing_address_zip"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<div>
|
||||
<label for="billing_address_zip" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Código postal' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address_zip" id="billing_address_zip"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'Código postal' %}"
|
||||
value="{% if billing_address %}{{ billing_address.address_zip }}{% endif %}"
|
||||
required=""
|
||||
@@ -224,54 +197,44 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="billing_address_state"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<label for="billing_address_state" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'Provincia' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address_state" id="billing_address_state"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'Provincia' %}"
|
||||
value="{% if billing_address %}{{ billing_address.address_state }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<label for="billing_address_country"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
<label for="billing_address_country" class="block mb-1 text-sm font-medium">
|
||||
{% translate 'País' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address_country" id="billing_address_country"
|
||||
class="input"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="{% translate 'País' %}"
|
||||
value="{% if billing_address %}{{ billing_address.address_country }}{% endif %}"
|
||||
required=""
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl mb-4 font-semibold sm:text-2xl">
|
||||
<h2 class="text-lg sm:text-xl font-display font-semibold mb-3">
|
||||
{% translate 'Opciones de envío' %}
|
||||
</h2>
|
||||
<article class="rounded-lg">
|
||||
|
||||
<article class="rounded-2xl border border-base-300 bg-base-100 divide-y divide-base-300">
|
||||
{% for shipping_method in shipping_methods %}
|
||||
<div class="p-4">
|
||||
<input type="radio" id="shipping_method_{{ shipping_method.pk }}"
|
||||
<div class="p-4 flex items-center gap-3">
|
||||
<input type="radio" id="shipping_method_{{ shipping_method.pk }}" class="radio radio-primary"
|
||||
name="shipping_method"
|
||||
value="{{ shipping_method.pk }}" {% if forloop.first %}checked{% endif %}>
|
||||
<label for="shipping_method_{{ shipping_method.pk }}"
|
||||
class=" ">
|
||||
{{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
|
||||
<label for="shipping_method_{{ shipping_method.pk }}" class="cursor-pointer">
|
||||
{{ shipping_method.name }} — {{ shipping_method.shipping_product.price.price_with_tax }}€
|
||||
</label>
|
||||
{% if not forloop.last %}
|
||||
</div>
|
||||
<hr class="h-px mx-4"/>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</article>
|
||||
</section>
|
||||
@@ -279,75 +242,52 @@
|
||||
</div>
|
||||
|
||||
<!-- Resumen del pedido -->
|
||||
<div class="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full">
|
||||
<div
|
||||
class="space-y-4 rounded-lg p-4 shadow-md sm:p-6">
|
||||
<p class="text-xl font-semibold ">
|
||||
<div class="mt-6 lg:mt-0">
|
||||
<div class="rounded-2xl border border-base-300 bg-base-100 p-4 sm:p-6 sticky top-20">
|
||||
<p class="text-lg font-display font-semibold mb-4">
|
||||
{% translate 'Resumen del pedido' %}
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<dl class="flex items-center justify-between gap-4">
|
||||
<dt
|
||||
class="text-base font-normal ">
|
||||
{% translate 'Base imponible' %}
|
||||
</dt>
|
||||
<dd class="text-base font-medium ">{{ base_total }} €
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="flex items-center justify-between gap-4">
|
||||
<dt class="text-base font-normal ">
|
||||
{% translate 'Descuentos' %}
|
||||
</dt>
|
||||
<dd class="text-base font-medium text-green-600">-{{ savings }} €</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="flex items-center justify-between gap-4">
|
||||
<dt class="text-base font-normal">
|
||||
{% translate 'Gastos de envío' %}
|
||||
</dt>
|
||||
<dd class="text-base font-medium ">
|
||||
{{ shipping_cost }} €
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="flex items-center justify-between gap-4">
|
||||
<dt class="text-base font-normal ">
|
||||
{% translate 'Impuestos' %}
|
||||
</dt>
|
||||
<dd class="text-base font-medium ">{{ tax_total }} €
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="flex flex-col gap-2 text-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-base-content/70">{% translate 'Base imponible' %}</span>
|
||||
<span class="font-medium">{{ base_total }} €</span>
|
||||
</div>
|
||||
|
||||
<dl class="flex items-center justify-between gap-4 pt-2 ">
|
||||
<dt class="text-base font-bold ">{% translate 'Total' %}
|
||||
</dt>
|
||||
<dd class="text-base font-bold ">{{ total }} €</dd>
|
||||
</dl>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-base-content/70">{% translate 'Descuentos' %}</span>
|
||||
<span class="font-medium text-success">-{{ savings }} €</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-base-content/70">{% translate 'Gastos de envío' %}</span>
|
||||
<span class="font-medium">{{ shipping_cost }} €</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-base-content/70">{% translate 'Impuestos' %}</span>
|
||||
<span class="font-medium">{{ tax_total }} €</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center items-center">
|
||||
<button
|
||||
class="btn btn-primary">
|
||||
{% translate 'Terminar pedido' %}
|
||||
</button>
|
||||
<div class="flex items-center justify-between border-t border-base-300 mt-4 pt-4">
|
||||
<span class="font-display font-bold">{% translate 'Total' %}</span>
|
||||
<span class="font-display font-bold text-xl">{{ total }} €</span>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary w-full mt-6">
|
||||
{% translate 'Terminar pedido' %}
|
||||
</button>
|
||||
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<span class="text-sm font-normal "> {% translate 'o' %} </span>
|
||||
<a href="{% url 'web:index' %}" title=""
|
||||
class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline ">
|
||||
<div class="flex items-center justify-center gap-2 mt-3">
|
||||
<span class="text-sm text-base-content/60">{% translate 'o' %}</span>
|
||||
<a href="{% url 'web:index' %}" class="link link-primary text-sm">
|
||||
{% translate 'Seguir comprando' %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -1,75 +1,43 @@
|
||||
{% load i18n %}
|
||||
<button
|
||||
hx-on:click="htmx.toggleClass(htmx.find('#myCartDropdown1'), 'hidden'); htmx.addClass(htmx.find('#userDropdown1'), 'hidden')"
|
||||
id="myCartDropdownButton1"
|
||||
data-dropdown-toggle="myCartDropdown1" type="button"
|
||||
class="icon-button">
|
||||
{% include 'components/icons/cart.svg' %}
|
||||
<span class="hidden sm:flex">
|
||||
{% translate 'Carrito' %}</span>
|
||||
<span class="ml-1">({{ cart.items.count }})</span>
|
||||
</button>
|
||||
{% if cart.items.count == 0 %}
|
||||
<p class="text-sm text-base-content/70 py-2">{% translate 'No hay nada en el carrito' %}</p>
|
||||
{% else %}
|
||||
<ul class="flex flex-col gap-3 max-h-80 overflow-y-auto">
|
||||
{% for cart_item in cart.items.all %}
|
||||
<li class="flex items-start gap-3 {% if not forloop.last %}pb-3 border-b border-base-300{% endif %}">
|
||||
<a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}" class="shrink-0">
|
||||
<img class="h-14 w-14 rounded-md object-cover bg-base-200" src="{{ cart_item.product.images.all.0.s.url }}" alt="{{ cart_item.product.name }}">
|
||||
</a>
|
||||
|
||||
<!-- Cart -->
|
||||
<div id="myCartDropdown1"
|
||||
class="cart-navbar-floating hidden"
|
||||
>
|
||||
<div>
|
||||
{% if cart.items.count == 0 %}
|
||||
<h2 class="text-sm font-medium ">No hay nada en el carrito</h2>
|
||||
{% endif %}
|
||||
|
||||
{% for cart_item in cart.items.all %}
|
||||
<div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex">
|
||||
<a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}"
|
||||
class="text-sm font-semibold leading-none hover:underline">
|
||||
{{ cart_item.product.name }}
|
||||
class="text-sm font-semibold leading-snug hover:text-primary line-clamp-2">
|
||||
{{ cart_item.product.name }}
|
||||
</a>
|
||||
{% if cart_item.variant %}
|
||||
<p class="text-xs">
|
||||
<p class="text-xs text-base-content/60">
|
||||
{% for attribute_value in cart_item.variant.attribute_values.all %}{{ attribute_value }}{% if not forloop.last %}, {% endif %}{% endfor %}
|
||||
</p>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<p
|
||||
class="mt-0.5 truncate text-sm font-normal ">
|
||||
{{ cart_item.price.price_with_tax }}€
|
||||
</p>
|
||||
|
||||
<form hx-post="{% url 'web:delete_cart_item' pk=cart_item.pk %}"
|
||||
hx-swap="none">
|
||||
<span class="mt-0.5 truncate text-sm font-normal mr-2">
|
||||
{% translate 'Cantidad' %}: {{ cart_item.quantity }}
|
||||
|
||||
</span>
|
||||
<button data-tooltip-target="tooltipRemoveItem1a" type="submit"
|
||||
class="text-red-600 hover:text-red-700 :text-red-600 cursor-pointer"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<span class="sr-only">{% translate 'Quitar' %}</span>
|
||||
{% include 'components/icons/remove.svg' %}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="tooltipRemoveItem1a" role="tooltip"
|
||||
class="tooltip invisible absolute z-10 inline-block rounded-lg px-3 py-2 text-sm font-medium
|
||||
text-white opacity-0 shadow-md transition-opacity duration-300 "
|
||||
>
|
||||
{% translate 'Quitar del carrito' %}
|
||||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2 mt-1">
|
||||
<span class="text-xs text-base-content/60 mx-2">{% translate 'x' %} {{ cart_item.quantity }}</span>
|
||||
<span class="text-sm font-bold">{{ cart_item.price.price_with_tax }} €</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form hx-post="{% url 'web:delete_cart_item' pk=cart_item.pk %}" hx-swap="none">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-ghost btn-xs btn-circle text-error" aria-label="{% translate 'Quitar' %}">
|
||||
{% include 'components/icons/remove.svg' %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<hr class="h-px mx-4 my-2 " />
|
||||
{% endfor %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% if cart.items.count > 0 %}
|
||||
<a href="{% url 'web:cart_detail' %}"
|
||||
class="btn btn-primary"
|
||||
role="button"> {% translate 'Ver carrito' %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<a href="{% url 'web:cart_detail' %}" class="btn btn-primary btn-sm w-full mt-4">
|
||||
{% translate 'Ver carrito' %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user