fix: styling
This commit is contained in:
Pablo Moreno
@@ -1,356 +1,380 @@
|
|||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
<section class="bg-white py-2 antialiased dark:bg-gray-900 md:py-8">
|
<section class="bg-white py-2 antialiased dark:bg-gray-900 md:py-8">
|
||||||
<form action="{% url 'web:cart_detail' %}" method="post">
|
<form action="{% url 'web:cart_detail' %}" method="post">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
|
<div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
|
||||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">{% translate 'Carrito' %}</h2>
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">{% translate 'Carrito' %}</h2>
|
||||||
|
|
||||||
<div class="mt-4 sm:mt-6 md:gap-6 lg:flex lg:items-start xl:gap-8">
|
<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="mx-auto w-full flex-none lg:max-w-2xl xl:max-w-4xl">
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
|
|
||||||
{% for item in items %}
|
{% for item in items %}
|
||||||
<div
|
<div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm
|
||||||
class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:p-6">
|
dark:border-gray-700 dark:bg-gray-800 md:p-6">
|
||||||
<div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0">
|
<div class="space-y-4 flex items-center justify-between gap-6 space-y-0">
|
||||||
<a href="#" class="shrink-0 md:order-1">
|
<a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
|
||||||
<img class="h-20 w-20 dark:hidden" src="{{ item.product.images.all|first }}"
|
class="shrink-0 md:order-1">
|
||||||
alt="{{ item.product.name }}"/>
|
<img class="h-20 w-20 dark:hidden" src="{{ item.product.images.all|first }}"
|
||||||
<img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all|first }}"
|
alt="{{ item.product.name }}"/>
|
||||||
alt="{{ item.product.name }}"/>
|
<img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all|first }}"
|
||||||
</a>
|
alt="{{ item.product.name }}"/>
|
||||||
|
</a>
|
||||||
|
|
||||||
<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="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
|
||||||
<div class="flex items-center">
|
<a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
|
||||||
<span
|
class="text-base font-medium text-gray-900 hover:underline dark:text-white"
|
||||||
class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 dark:text-white">
|
>
|
||||||
{{ item.quantity }}x
|
{{ item.product.name }}
|
||||||
</span>
|
</a>
|
||||||
|
|
||||||
|
<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-600 hover:underline dark:text-red-500"
|
||||||
|
>
|
||||||
|
{% include 'components/icons/x.svg' %}
|
||||||
|
{% translate 'Quitar' %}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</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 border-0 bg-transparent text-center text-sm font-medium
|
||||||
|
text-gray-900 focus:outline-none focus:ring-0 dark:text-white"
|
||||||
|
>
|
||||||
|
{{ item.quantity }}x
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-end md:order-4 md:w-32">
|
||||||
|
<p class="text-base font-bold text-gray-900 dark:text-white">
|
||||||
|
{{ item.product.price.price_with_tax }}€
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% if items.count == 0 %}
|
||||||
|
<p class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
{% 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 dark:text-primary-500">
|
||||||
|
{% translate 'Volver a inicio' %}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
|
||||||
|
{% translate 'Dirección de envío' %}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
|
||||||
|
|
||||||
|
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
|
||||||
|
{% if user.is_anonymous %}
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<label for="email"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
{% translate 'E-Mail' %}</label>
|
||||||
|
<input type="text" name="email" id="email"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="{% translate 'E-Mail' %}"
|
||||||
|
value=""
|
||||||
|
required=""
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<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 text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Nombre completo' %}</label>
|
||||||
|
<input type="text" name="shipping_address_full_name" id="shipping_address_full_name"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
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 text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Dirección' %}</label>
|
||||||
|
<input type="text" name="shipping_address" id="shipping_address"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
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 text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Localidad' %}
|
||||||
|
</label>
|
||||||
|
<input type="text" name="shipping_address_town" id="shipping_address_town"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
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 text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Código postal' %}
|
||||||
|
</label>
|
||||||
|
<input type="text" name="shipping_address_zip" id="shipping_address_zip"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="{% translate 'Código postal' %}"
|
||||||
|
value="{% if shipping_address %}{{ shipping_address.address_zip }}{% endif %}"
|
||||||
|
required=""
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="shipping_address_state"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Provincia' %}
|
||||||
|
</label>
|
||||||
|
<input type="text" name="shipping_address_state" id="shipping_address_state"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
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 text-gray-900 dark:text-white">
|
||||||
|
{% translate 'País' %}
|
||||||
|
</label>
|
||||||
|
<input type="text" name="shipping_address_country" id="shipping_address_country"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="{% translate 'País' %}"
|
||||||
|
value="{% if shipping_address %}{{ shipping_address.address_country }}{% endif %}"
|
||||||
|
required=""
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
|
||||||
|
{% translate 'Dirección de facturación' %}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
|
||||||
|
|
||||||
|
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<label for="billing_address_full_name"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Nombre completo' %}</label>
|
||||||
|
<input type="text" name="billing_address_full_name" id="billing_address_full_name"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
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 text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Dirección' %}
|
||||||
|
</label>
|
||||||
|
<input type="text" name="billing_address" id="billing_address"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
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 text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Localidad' %}
|
||||||
|
</label>
|
||||||
|
<input type="text" name="billing_address_town" id="billing_address_town"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
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 text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Código postal' %}
|
||||||
|
</label>
|
||||||
|
<input type="text" name="billing_address_zip" id="billing_address_zip"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="{% translate 'Código postal' %}"
|
||||||
|
value="{% if billing_address %}{{ billing_address.address_zip }}{% endif %}"
|
||||||
|
required=""
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="billing_address_state"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
{% translate 'Provincia' %}
|
||||||
|
</label>
|
||||||
|
<input type="text" name="billing_address_state" id="billing_address_state"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
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 text-gray-900 dark:text-white">
|
||||||
|
{% translate 'País' %}
|
||||||
|
</label>
|
||||||
|
<input type="text" name="billing_address_country" id="billing_address_country"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
||||||
|
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
||||||
|
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
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 text-gray-900 dark:text-white sm:text-2xl">
|
||||||
|
{% translate 'Opciones de envío' %}
|
||||||
|
</h2>
|
||||||
|
<article class="rounded-lg border border-gray-200 dark:border-gray-600">
|
||||||
|
|
||||||
|
{% for shipping_method in shipping_methods %}
|
||||||
|
<div class="p-4">
|
||||||
|
<input type="radio" id="shipping_method_{{ shipping_method.pk }}"
|
||||||
|
name="shipping_method"
|
||||||
|
value="{{ shipping_method.pk }}" {% if forloop.first %}checked{% endif %}>
|
||||||
|
<label for="shipping_method_{{ shipping_method.pk }}"
|
||||||
|
class="text-gray-900 dark:text-white">
|
||||||
|
{{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
|
||||||
|
</label>
|
||||||
|
{% if not forloop.last %}
|
||||||
|
</div>
|
||||||
|
<hr class="h-px mx-4 bg-gray-200 border-0 dark:bg-gray-700"/>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-end md:order-4 md:w-32">
|
|
||||||
<p
|
|
||||||
class="text-base font-bold text-gray-900 dark:text-white">{{ item.product.price.price_with_tax }}
|
|
||||||
€</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
|
</div>
|
||||||
<a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
|
|
||||||
class="text-base font-medium text-gray-900 hover:underline dark:text-white"
|
|
||||||
>
|
|
||||||
{{ item.product.name }}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
<!-- Resumen del pedido -->
|
||||||
<form class="flex" hx-post="{% url 'web:delete_cart_item' pk=item.pk %}"
|
<div class="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full">
|
||||||
hx-swap="none">
|
<div
|
||||||
{% csrf_token %}
|
class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">
|
||||||
<button
|
<p class="text-xl font-semibold text-gray-900 dark:text-white">
|
||||||
type="submit"
|
{% translate 'Resumen del pedido' %}
|
||||||
class="inline-flex items-center text-sm font-medium text-red-600 hover:underline dark:text-red-500"
|
</p>
|
||||||
>
|
|
||||||
{% include 'components/icons/x.svg' %}
|
<div class="space-y-4">
|
||||||
{% translate 'Quitar' %}
|
<div class="space-y-2">
|
||||||
|
<dl class="flex items-center justify-between gap-4">
|
||||||
|
<dt
|
||||||
|
class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
{% translate 'Base imponible' %}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ base_total }} €
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<dl class="flex items-center justify-between gap-4">
|
||||||
|
<dt class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
{% 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 text-gray-500 dark:text-gray-400">
|
||||||
|
{% translate 'Gastos de envío' %}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-base font-medium text-gray-900 dark:text-white">
|
||||||
|
{{ shipping_cost }} €
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<dl class="flex items-center justify-between gap-4">
|
||||||
|
<dt class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
{% translate 'Impuestos' %}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ tax_total }} €
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700">
|
||||||
|
<dt class="text-base font-bold text-gray-900 dark:text-white">{% translate 'Total' %}
|
||||||
|
</dt>
|
||||||
|
<dd class="text-base font-bold text-gray-900 dark:text-white">{{ total }} €</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
|
||||||
|
{% translate 'Terminar pedido' %}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center gap-2">
|
||||||
|
<span class="text-sm font-normal text-gray-500 dark:text-gray-400"> {% 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 dark:text-primary-500">
|
||||||
|
{% translate 'Seguir comprando' %}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
{% if items.count == 0 %}
|
|
||||||
<p class="text-base font-normal text-gray-500 dark:text-gray-400">
|
|
||||||
{% 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 dark:text-primary-500">
|
|
||||||
{% translate 'Volver a inicio' %}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
|
|
||||||
{% translate 'Dirección de envío' %}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
|
|
||||||
|
|
||||||
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
|
|
||||||
{% if user.is_anonymous %}
|
|
||||||
<div class="sm:col-span-2">
|
|
||||||
<label for="email"
|
|
||||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'E-Mail' %}</label>
|
|
||||||
<input type="text" name="email" id="email"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
placeholder="{% translate 'E-Mail' %}"
|
|
||||||
value=""
|
|
||||||
required=""
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<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 text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</label>
|
|
||||||
<input type="text" name="shipping_address_full_name" id="shipping_address_full_name"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
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 text-gray-900 dark:text-white">{% translate 'Dirección' %}</label>
|
|
||||||
<input type="text" name="shipping_address" id="shipping_address"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
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 text-gray-900 dark:text-white">{% translate 'Localidad' %}</label>
|
|
||||||
<input type="text" name="shipping_address_town" id="shipping_address_town"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
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 text-gray-900 dark:text-white">{% translate 'Código postal' %}</label>
|
|
||||||
<input type="text" name="shipping_address_zip" id="shipping_address_zip"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
placeholder="{% translate 'Código postal' %}"
|
|
||||||
value="{% if shipping_address %}{{ shipping_address.address_zip }}{% endif %}"
|
|
||||||
required=""
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="shipping_address_state"
|
|
||||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Provincia' %}</label>
|
|
||||||
<input type="text" name="shipping_address_state" id="shipping_address_state"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
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 text-gray-900 dark:text-white">{% translate 'País' %}</label>
|
|
||||||
<input type="text" name="shipping_address_country" id="shipping_address_country"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
placeholder="{% translate 'País' %}"
|
|
||||||
value="{% if shipping_address %}{{ shipping_address.address_country }}{% endif %}"
|
|
||||||
required=""
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
|
|
||||||
{% translate 'Dirección de facturación' %}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<section class="p-4 rounded-lg border border-gray-200 dark:border-gray-600">
|
|
||||||
|
|
||||||
<div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
|
|
||||||
<div class="sm:col-span-2">
|
|
||||||
<label for="billing_address_full_name"
|
|
||||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</label>
|
|
||||||
<input type="text" name="billing_address_full_name" id="billing_address_full_name"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
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 text-gray-900 dark:text-white">{% translate 'Dirección' %}</label>
|
|
||||||
<input type="text" name="billing_address" id="billing_address"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
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 text-gray-900 dark:text-white">{% translate 'Localidad' %}</label>
|
|
||||||
<input type="text" name="billing_address_town" id="billing_address_town"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
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 text-gray-900 dark:text-white">{% translate 'Código postal' %}</label>
|
|
||||||
<input type="text" name="billing_address_zip" id="billing_address_zip"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
placeholder="{% translate 'Código postal' %}"
|
|
||||||
value="{% if billing_address %}{{ billing_address.address_zip }}{% endif %}"
|
|
||||||
required=""
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="billing_address_state"
|
|
||||||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Provincia' %}</label>
|
|
||||||
<input type="text" name="billing_address_state" id="billing_address_state"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
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 text-gray-900 dark:text-white">{% translate 'País' %}</label>
|
|
||||||
<input type="text" name="billing_address_country" id="billing_address_country"
|
|
||||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
|
|
||||||
focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
|
|
||||||
dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
||||||
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 text-gray-900 dark:text-white sm:text-2xl">
|
|
||||||
{% translate 'Opciones de envío' %}
|
|
||||||
</h2>
|
|
||||||
<article class="rounded-lg border border-gray-200 dark:border-gray-600">
|
|
||||||
|
|
||||||
{% for shipping_method in shipping_methods %}
|
|
||||||
<div class="p-4">
|
|
||||||
<input type="radio" id="shipping_method_{{ shipping_method.pk }}" name="shipping_method"
|
|
||||||
value="{{ shipping_method.pk }}" {% if forloop.first %}checked{% endif %}>
|
|
||||||
<label for="shipping_method_{{ shipping_method.pk }}" class="text-gray-900 dark:text-white">
|
|
||||||
{{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
|
|
||||||
</label>
|
|
||||||
{% if not forloop.last %}
|
|
||||||
</div>
|
|
||||||
<hr class="h-px mx-4 bg-gray-200 border-0 dark:bg-gray-700"/>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% endfor %}
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</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 border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">
|
|
||||||
<p class="text-xl font-semibold text-gray-900 dark:text-white">{% 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 text-gray-500 dark:text-gray-400">{% translate 'Base imponible' %}</dt>
|
|
||||||
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ base_total }} €</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
<dl class="flex items-center justify-between gap-4">
|
|
||||||
<dt class="text-base font-normal text-gray-500 dark:text-gray-400">{% 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 text-gray-500 dark:text-gray-400">{% translate 'Gastos de envío' %}</dt>
|
|
||||||
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ shipping_cost }} €</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
<dl class="flex items-center justify-between gap-4">
|
|
||||||
<dt class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Impuestos' %}</dt>
|
|
||||||
<dd class="text-base font-medium text-gray-900 dark:text-white">{{ tax_total }} €</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700">
|
|
||||||
<dt class="text-base font-bold text-gray-900 dark:text-white">{% translate 'Total' %}</dt>
|
|
||||||
<dd class="text-base font-bold text-gray-900 dark:text-white">{{ total }} €</dd>
|
|
||||||
</dl>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
|
||||||
class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
|
|
||||||
{% translate 'Terminar pedido' %}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-center gap-2">
|
|
||||||
<span class="text-sm font-normal text-gray-500 dark:text-gray-400"> {% 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 dark:text-primary-500">
|
|
||||||
{% translate 'Seguir comprando' %}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{# <div#}
|
|
||||||
{# class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">#}
|
|
||||||
{# <form class="space-y-4">#}
|
|
||||||
{# <div>#}
|
|
||||||
{# <label for="voucher" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"> Do you have a#}
|
|
||||||
{# voucher or gift card? </label>#}
|
|
||||||
{# <input type="text" id="voucher"#}
|
|
||||||
{# class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"#}
|
|
||||||
{# placeholder="" required/>#}
|
|
||||||
{# </div>#}
|
|
||||||
{# <button type="submit"#}
|
|
||||||
{# class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">#}
|
|
||||||
{# Apply Code#}
|
|
||||||
{# </button>#}
|
|
||||||
{# </form>#}
|
|
||||||
{# </div>#}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</section>
|
</section>
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
<!-- Cart -->
|
<!-- Cart -->
|
||||||
<div id="myCartDropdown1"
|
<div id="myCartDropdown1"
|
||||||
class="absolute top-10 z-10 mx-auto max-w-sm space-y-4 overflow-hidden rounded-lg bg-white p-4 antialiased shadow-lg dark:bg-gray-800 hidden"
|
class="absolute top-10 z-10 w-56 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4 hidden"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
{% if cart.items.count == 0 %}
|
{% if cart.items.count == 0 %}
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
{% for cart_item in cart.items.all %}
|
{% for cart_item in cart.items.all %}
|
||||||
<div>
|
<div>
|
||||||
<a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}"
|
<a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}"
|
||||||
class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">
|
class="text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">
|
||||||
{{ cart_item.product.name }}
|
{{ cart_item.product.name }}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@@ -58,6 +58,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<hr class="my-2" />
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user