fix: huge refactor
This commit is contained in:
@@ -4,9 +4,8 @@
|
||||
<input type="hidden" name="product" value="{{ product.pk }}">
|
||||
|
||||
<div class="flex">
|
||||
<input class="input-number"
|
||||
id="quantity" aria-label="quantity" type="number" min="1" max="10" name="quantity" value="1">
|
||||
<button class="button-primary"
|
||||
<input class="input" 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' %}
|
||||
|
||||
@@ -1,380 +1,345 @@
|
||||
{% load i18n %}
|
||||
<section class="bg-white py-2 antialiased dark:bg-gray-900 md:py-8">
|
||||
<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 text-gray-900 dark:text-white sm:text-2xl">{% translate 'Carrito' %}</h2>
|
||||
<section class=" py-2 antialiased md:py-8">
|
||||
<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="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="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">
|
||||
|
||||
{% for item in items %}
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm
|
||||
dark:border-gray-700 dark:bg-gray-800 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 dark:hidden" src="{{ item.product.images.all.0.s.url }}"
|
||||
alt="{{ item.product.name }}"/>
|
||||
<img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all.0.s_dark.url }}"
|
||||
alt="{{ item.product.name }}"/>
|
||||
</a>
|
||||
{% for item in items %}
|
||||
<div class="rounded-lg p-4 shadow-sm 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 }}"
|
||||
alt="{{ item.product.name }}"/>
|
||||
</a>
|
||||
|
||||
<div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
|
||||
<a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
|
||||
class="text-base font-medium hover:underline "
|
||||
>
|
||||
{{ item.product.name }}
|
||||
</a>
|
||||
|
||||
<div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
|
||||
<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">
|
||||
<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 dark:text-red-400 cursor-pointer"
|
||||
>
|
||||
{% 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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 cursor-pointer">
|
||||
{% translate 'Terminar pedido' %}
|
||||
<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>
|
||||
|
||||
<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-400">
|
||||
{% translate 'Seguir comprando' %}
|
||||
</a>
|
||||
</div>
|
||||
</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 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.product.price.price_with_tax }}€
|
||||
</p>
|
||||
</div>
|
||||
</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 ">
|
||||
{% translate 'Volver a inicio' %}
|
||||
</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<h2 class="text-xl font-semibold sm:text-2xl">
|
||||
{% 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">
|
||||
{% if user.is_anonymous %}
|
||||
<div class="sm:col-span-2">
|
||||
<label for="email"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
{% translate 'E-Mail' %}</label>
|
||||
<input type="text" name="email" id="email"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'Nombre completo' %}</label>
|
||||
<input type="text" name="shipping_address_full_name" id="shipping_address_full_name"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'Dirección' %}</label>
|
||||
<input type="text" name="shipping_address" id="shipping_address"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'Localidad' %}
|
||||
</label>
|
||||
<input type="text" name="shipping_address_town" id="shipping_address_town"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'Código postal' %}
|
||||
</label>
|
||||
<input type="text" name="shipping_address_zip" id="shipping_address_zip"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'Provincia' %}
|
||||
</label>
|
||||
<input type="text" name="shipping_address_state" id="shipping_address_state"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'País' %}
|
||||
</label>
|
||||
<input type="text" name="shipping_address_country" id="shipping_address_country"
|
||||
class="input"
|
||||
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">
|
||||
{% 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">
|
||||
<div class="sm:col-span-2">
|
||||
<label for="billing_address_full_name"
|
||||
class="block mb-2 text-sm font-medium ">
|
||||
{% translate 'Nombre completo' %}</label>
|
||||
<input type="text" name="billing_address_full_name" id="billing_address_full_name"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'Dirección' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address" id="billing_address"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'Localidad' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address_town" id="billing_address_town"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'Código postal' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address_zip" id="billing_address_zip"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'Provincia' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address_state" id="billing_address_state"
|
||||
class="input"
|
||||
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 ">
|
||||
{% translate 'País' %}
|
||||
</label>
|
||||
<input type="text" name="billing_address_country" id="billing_address_country"
|
||||
class="input"
|
||||
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">
|
||||
{% translate 'Opciones de envío' %}
|
||||
</h2>
|
||||
<article class="rounded-lg">
|
||||
|
||||
{% 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=" ">
|
||||
{{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
|
||||
</label>
|
||||
{% if not forloop.last %}
|
||||
</div>
|
||||
<hr class="h-px mx-4"/>
|
||||
{% 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 p-4 shadow-sm sm:p-6">
|
||||
<p class="text-xl font-semibold ">
|
||||
{% 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>
|
||||
|
||||
<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>
|
||||
|
||||
<button
|
||||
class="flex w-full items-center justify-center rounded-lg px-5 py-2.5 text-sm font-medium text-white hover: focus:outline-none focus:ring-4 focus:ring-primary-300 : :ring-primary-800 cursor-pointer">
|
||||
{% 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 ">
|
||||
{% translate 'Seguir comprando' %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@@ -16,30 +16,30 @@
|
||||
>
|
||||
<div>
|
||||
{% if cart.items.count == 0 %}
|
||||
<h2 class="text-sm font-medium text-gray-900 dark:text-white">No hay nada en el carrito</h2>
|
||||
<h2 class="text-sm font-medium ">No hay nada en el carrito</h2>
|
||||
{% endif %}
|
||||
|
||||
{% for cart_item in cart.items.all %}
|
||||
<div>
|
||||
<a href="{% url 'web:product_detail' pk=cart_item.product.pk slug=cart_item.product.slug %}"
|
||||
class="text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">
|
||||
class="text-sm font-semibold leading-none hover:underline">
|
||||
{{ cart_item.product.name }}
|
||||
</a>
|
||||
|
||||
<div class="flex items-center justify-between gap-6">
|
||||
<p
|
||||
class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||
class="mt-0.5 truncate text-sm font-normal ">
|
||||
{{ cart_item.product.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 text-gray-500 dark:text-gray-400 mr-2">
|
||||
<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 dark:text-red-500 dark:hover:text-red-600 cursor-pointer"
|
||||
class="text-red-600 hover:text-red-700 :text-red-600 cursor-pointer"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<span class="sr-only">{% translate 'Quitar' %}</span>
|
||||
@@ -48,21 +48,21 @@
|
||||
</form>
|
||||
|
||||
<div id="tooltipRemoveItem1a" role="tooltip"
|
||||
class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium
|
||||
text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
|
||||
class="tooltip invisible absolute z-10 inline-block rounded-lg px-3 py-2 text-sm font-medium
|
||||
text-white opacity-0 shadow-sm transition-opacity duration-300 "
|
||||
>
|
||||
{% translate 'Quitar del carrito' %}
|
||||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="h-px mx-4 my-2 bg-gray-200 border-0 dark:bg-gray-700" />
|
||||
<hr class="h-px mx-4 my-2 " />
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if cart.items.count > 0 %}
|
||||
<a href="{% url 'web:cart_detail' %}"
|
||||
class="button-primary"
|
||||
class="btn btn-primary"
|
||||
role="button"> {% translate 'Ver carrito' %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% for field in form %}
|
||||
<div class="mb-4">
|
||||
<label for="{{ field.id_for_label }}"
|
||||
class="inline-block text-sm font-medium text-gray-900 dark:text-white ml-2">
|
||||
class="inline-block text-sm font-medium ml-2">
|
||||
{{ field.label }}
|
||||
</label>
|
||||
{{ field }}
|
||||
@@ -13,17 +13,17 @@
|
||||
{% endfor %}
|
||||
|
||||
{% for k, error in form.errors.items %}
|
||||
<span class="flex justify-center mb-2 text-sm font-medium text-red-900 dark:text-red-400">{{ error }}</span>
|
||||
<span class="flex justify-center mb-2 text-sm font-medium text-red-900 ">{{ error }}</span>
|
||||
{% endfor %}
|
||||
|
||||
{% if success_message %}
|
||||
<span class="flex justify-center mb-2 text-sm font-medium text-red-900 dark:text-red-400">{{ success_message }}</span>
|
||||
<span class="flex justify-center mb-2 text-sm font-medium text-red-900 ">{{ success_message }}</span>
|
||||
{% endif %}
|
||||
|
||||
<footer class="flex justify-end">
|
||||
<button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
|
||||
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
|
||||
dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer"
|
||||
<button class="text-white hover: focus:ring-4 focus:outline-none
|
||||
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center
|
||||
: :ring-primary-800 cursor-pointer"
|
||||
>
|
||||
{{ save_button_text }}
|
||||
</button>
|
||||
|
||||
@@ -1,102 +1,26 @@
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
<nav class="navbar-bg">
|
||||
<!-- Left side -->
|
||||
<div class="navbar-content">
|
||||
<div class="navbar-align">
|
||||
<nav class="navbar bg-base-100 shadow-sm">
|
||||
<div class="flex-1">
|
||||
|
||||
<!-- Title -->
|
||||
<div class="navbar-title">
|
||||
<div class="shrink-0">
|
||||
<a class="flex flex-row items-center" href="{% url 'web:index' %}">
|
||||
<img class="w-8 h-8 mr-2" src="{{ logo }}" alt="{{ web_title }} logo">
|
||||
<h1 class="navbar-web-title">{{ web_title }}</h1>
|
||||
</a>
|
||||
</div>
|
||||
<a href="{% url 'web:index' %}" class="flex text-xl">
|
||||
<img class="mr-4" src="{{ logo }}" alt="{{ web_title }} logo">
|
||||
{{ web_title }}
|
||||
</a>
|
||||
|
||||
<!-- Categories -->
|
||||
<ul class="navbar-categories">
|
||||
<li>
|
||||
<a href="{% url 'web:index' %}" title=""
|
||||
class="navbar-category-link">
|
||||
{% translate 'Inicio' %}
|
||||
</a>
|
||||
</li>
|
||||
{% for category in navbar_categories %}
|
||||
<li class="shrink-0">
|
||||
<a href="{% url 'web:category_view' slug=category.slug %}" title=""
|
||||
class="navbar-category-link">
|
||||
{{ category.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="relative flex items-center lg:space-x-2">
|
||||
<div class="flex gap-2">
|
||||
<input type="text" placeholder="{% trans 'Buscar...' %}" class="input input-bordered w-24 md:w-auto"/>
|
||||
|
||||
{% include 'components/theme-switch.html' %}
|
||||
<!-- Show/Hide cart -->
|
||||
<div id="navbar-cart-dropdown" hx-get="{% url 'web:cart_dropdown' %}"
|
||||
hx-trigger="load, updated-cart from:body"></div>
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
<!-- Show/Hide user account dropdown -->
|
||||
<button
|
||||
hx-on:click="htmx.toggleClass(htmx.find('#userDropdown1'), 'hidden'); htmx.addClass(htmx.find('#myCartDropdown1'), 'hidden')"
|
||||
id="userDropdownButton1"
|
||||
data-dropdown-toggle="userDropdown1" type="button"
|
||||
aria-label="show menu"
|
||||
class="icon-button">
|
||||
{% include 'components/icons/user.svg' %}
|
||||
<span class="hidden sm:flex">
|
||||
{% translate 'Mi cuenta' %}
|
||||
</span>
|
||||
{% include 'components/icons/dropdown.svg' %}
|
||||
</button>
|
||||
|
||||
<!-- User account dropdown -->
|
||||
<div id="userDropdown1"
|
||||
class="absolute top-12 hidden z-12 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">
|
||||
{% include 'components/users/user_dropdown.html' %}
|
||||
</div>
|
||||
{% else %}
|
||||
<a href="{% url 'web:login' %}"
|
||||
class="link-button">
|
||||
{% translate 'Inicia sesión' %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<!-- Show/Hide menu items -->
|
||||
<button hx-on:click="htmx.toggleClass(htmx.find('#ecommerce-navbar-menu-1'), 'hidden')" type="button"
|
||||
data-collapse-toggle="ecommerce-navbar-menu-1" aria-controls="ecommerce-navbar-menu-1"
|
||||
aria-expanded="false"
|
||||
aria-label="show menu"
|
||||
class="icon-button lg:hidden">
|
||||
<span class="sr-only">
|
||||
{% translate 'Abrir menú' %}
|
||||
</span>
|
||||
{% include 'components/icons/burger.svg' %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ecommerce-navbar-menu-1"
|
||||
class="navbar-dropdown-menu hidden">
|
||||
<ul class="navbar-dropdown-menu-list">
|
||||
<li>
|
||||
<a href="{% url 'web:index' %}"
|
||||
class="navbar-dropdown-menu-title">{% translate 'Inicio' %}</a>
|
||||
</li>
|
||||
|
||||
{% for category in navbar_categories %}
|
||||
<li>
|
||||
<a href="{% url 'web:category_view' slug=category.slug %}"
|
||||
class="navbar-dropdown-menu-title">{{ category.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% include 'components/generic/theme-switch.html' %}
|
||||
{% if user.is_authenticated %}
|
||||
{% include 'components/generic/user_dropdown.html' %}
|
||||
{% else %}
|
||||
<a href="{% url 'users:login' %}"
|
||||
class="link-button flex items-center">
|
||||
{% translate 'Inicia sesión' %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% load i18n %}
|
||||
<div role="status">
|
||||
<svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-primary-600"
|
||||
<svg aria-hidden="true" class="w-8 h-8 animate-spin fill-primary-600"
|
||||
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@
|
||||
id="theme-toggle"
|
||||
type="button"
|
||||
aria-label="switchtheme"
|
||||
class="icon-button">
|
||||
class="btn btn-circle">
|
||||
{% include 'components/icons/moon.svg' %}
|
||||
{% include 'components/icons/sun.svg' %}
|
||||
</button>
|
||||
@@ -1,8 +1,8 @@
|
||||
<div id="toast-default"
|
||||
class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
class="flex items-center w-full max-w-xs p-4 rounded-lg shadow "
|
||||
role="alert"
|
||||
>
|
||||
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
|
||||
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 rounded-lg ">
|
||||
{% block icon %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -11,9 +11,9 @@
|
||||
{% block toast_text %}{% endblock %}
|
||||
</div>
|
||||
<button type="button"
|
||||
class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2
|
||||
focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8
|
||||
dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 cursor-pointer"
|
||||
class="ms-auto -mx-1.5 -my-1.5 hover: rounded-lg focus:ring-2
|
||||
focus:ring-gray-300 p-1.5 hover: inline-flex items-center justify-center h-8 w-8
|
||||
:text-white : cursor-pointer"
|
||||
data-dismiss-target="#toast-default" aria-label="Close"
|
||||
hx-on:click="htmx.toggleClass(htmx.find('#toast-default'), 'hidden')"
|
||||
>
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
{% load i18n %}
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-circle avatar">
|
||||
<div class="w-10 flex rounded-full justify-center items-center">
|
||||
{{ request.user.first_name.0 | upper }}{{ request.user.last_name.0 | upper }}
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
tabindex="-1"
|
||||
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
|
||||
<li>
|
||||
<a class="justify-between" href="{% url 'users:my_account' %}">
|
||||
{% trans 'Mi cuenta' %}
|
||||
</a>
|
||||
</li>
|
||||
<li><a>{% trans 'Ajustes' %}</a></li>
|
||||
<li><a href="{% url 'users:logout' %}">{% trans 'Cerrar sesión' %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,12 +1,12 @@
|
||||
{% load i18n %}
|
||||
<article>
|
||||
<div
|
||||
class="card">
|
||||
<div class="h-56 w-full bg-gray-200 dark:bg-gray-950">
|
||||
>
|
||||
<div class="h-56 w-full ">
|
||||
<a href="{% url 'web:product_detail' pk=product.pk slug=product.slug %}">
|
||||
<img class="mx-auto h-full dark:hidden" src="{{ product.images.all.0.m.url }}"
|
||||
<img class="mx-auto h-full " src="{{ product.images.all.0.m.url }}"
|
||||
alt="{{ product.name }}"/>
|
||||
<img class="mx-auto hidden h-full dark:block" src="{{ product.images.all.0.m_dark.url }}"
|
||||
<img class="mx-auto hidden h-full " src="{{ product.images.all.0.m_dark.url }}"
|
||||
alt="{{ product.name }}"/>
|
||||
</a>
|
||||
</div>
|
||||
@@ -24,8 +24,8 @@
|
||||
<!-- {% include 'components/icons/star.svg' %}-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <p class="text-sm font-medium text-gray-900 dark:text-white">5.0</p>-->
|
||||
<!-- <p class="text-sm font-medium text-gray-500 dark:text-gray-400">(455)</p>-->
|
||||
<!-- <p class="text-sm font-medium ">5.0</p>-->
|
||||
<!-- <p class="text-sm font-medium ">(455)</p>-->
|
||||
<!-- </div>-->
|
||||
<div class="mt-4 flex gap-4">
|
||||
<p class="txt-2xl">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% load i18n %}
|
||||
<section class="bg-gray-50 dark:bg-gray-900 flex items-center my-4">
|
||||
<section class=" flex items-center my-4">
|
||||
<div class="max-w-screen-xl px-4 mx-auto lg:px-12 w-full">
|
||||
<div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
|
||||
<div class="relative shadow-md sm:rounded-lg">
|
||||
<div class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
|
||||
<div class="w-full md:w-full">
|
||||
<form class="flex items-center"
|
||||
@@ -11,19 +11,27 @@
|
||||
hx-swap="innerHTML"
|
||||
hx-push="true"
|
||||
>
|
||||
<label for="simple-search" class="sr-only">{% translate 'Buscar' %}</label>
|
||||
<div class="relative w-full">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
{% include 'components/icons/search.svg' %}
|
||||
</div>
|
||||
<label for="simple-search" class="input w-full">
|
||||
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
stroke-width="2.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.3-4.3"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
type="search"
|
||||
name="name"
|
||||
id="simple-search"
|
||||
class="search-input"
|
||||
placeholder="{% translate 'Buscar' %}"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
</label>
|
||||
|
||||
{% if filter_by_category %}
|
||||
<input type="hidden" name="category" value="{{ category.id }}">
|
||||
{% endif %}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% for field in form %}
|
||||
<div class="mb-4">
|
||||
<label for="{{ field.id_for_label }}"
|
||||
class="inline-block text-sm font-medium text-gray-900 dark:text-white ml-2">
|
||||
class="inline-block text-sm font-medium ml-2">
|
||||
{{ field.label }}
|
||||
</label>
|
||||
{{ field }}
|
||||
@@ -13,12 +13,12 @@
|
||||
{% endfor %}
|
||||
|
||||
{% for k, error in form.errors.items %}
|
||||
<span class="flex justify-center mb-2 text-sm font-medium text-red-900 dark:text-red-400">{{ error }}</span>
|
||||
<span class="flex justify-center mb-2 text-sm font-medium text-red-900 ">{{ error }}</span>
|
||||
{% endfor %}
|
||||
|
||||
<button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
|
||||
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
|
||||
dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer"
|
||||
<button class="text-white hover: focus:ring-4 focus:outline-none
|
||||
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center
|
||||
: :ring-primary-800 cursor-pointer"
|
||||
>
|
||||
{% translate 'Guardar' %}
|
||||
</button>
|
||||
|
||||
@@ -12,71 +12,65 @@
|
||||
<div class="mb-4 grid gap-4 sm:grid-cols-2 sm:gap-8 lg:gap-16">
|
||||
<div class="space-y-4">
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">
|
||||
<dt class="font-semibold ">
|
||||
<label for="address_full_name">
|
||||
{% translate 'Nombre completo' %}
|
||||
</label>
|
||||
</dt>
|
||||
<dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
|
||||
<input class="input-text"
|
||||
id="address_full_name" name="full_name" type="text" value="{{ address.full_name }}">
|
||||
<dd class="flex items-center gap-1 ">
|
||||
<input class="input" id="address_full_name" name="full_name" type="text" value="{{ address.full_name }}">
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">
|
||||
<dt class="font-semibold ">
|
||||
<label for="address">
|
||||
{% translate 'Dirección' %}
|
||||
</label>
|
||||
</dt>
|
||||
<dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
|
||||
<input class="input-text"
|
||||
id="address" name="address" type="text" value="{{ address.address }}">
|
||||
<dd class="flex items-center gap-1 ">
|
||||
<input class="input" id="address" name="address" type="text" value="{{ address.address }}">
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">
|
||||
<dt class="font-semibold ">
|
||||
<label for="address_zip">
|
||||
{% translate 'Código postal' %}
|
||||
</label>
|
||||
</dt>
|
||||
<dd class="text-gray-500 dark:text-gray-400">
|
||||
<input class="input-text"
|
||||
id="address_zip" name="address_zip" type="text" value="{{ address.address_zip }}">
|
||||
<dd class=" ">
|
||||
<input class="input" id="address_zip" name="address_zip" type="text" value="{{ address.address_zip }}">
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">
|
||||
<dt class="font-semibold ">
|
||||
<label for="address_phone">
|
||||
{% translate 'Teléfono' %}
|
||||
</label>
|
||||
</dt>
|
||||
<dd class="text-gray-500 dark:text-gray-400">
|
||||
<input class="input-text"
|
||||
id="address_phone" name="address_phone" type="text" value="{{ address.address_phone }}">
|
||||
<dd class=" ">
|
||||
<input class="input" id="address_phone" name="address_phone" type="text" value="{{ address.address_phone }}">
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">
|
||||
<dt class="font-semibold ">
|
||||
<label for="address_town">
|
||||
{% translate 'Localidad' %}
|
||||
</label>
|
||||
</dt>
|
||||
<dd class="text-gray-500 dark:text-gray-400">
|
||||
<input class="input-text"
|
||||
id="address_town" name="address_town" type="text" value="{{ address.address_town }}">
|
||||
<dd class=" ">
|
||||
<input class="input" id="address_town" name="address_town" type="text" value="{{ address.address_town }}">
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">
|
||||
<dt class="font-semibold ">
|
||||
<label for="address_state">
|
||||
{% translate 'Provincia' %}
|
||||
</label>
|
||||
</dt>
|
||||
<dd class="text-gray-500 dark:text-gray-400">
|
||||
<input class="input-text"
|
||||
id="address_state" name="address_state" type="text" value="{{ address.address_state }}">
|
||||
<dd class=" ">
|
||||
<input class="input" id="address_state" name="address_state" type="text" value="{{ address.address_state }}">
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
@@ -84,9 +78,9 @@
|
||||
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
|
||||
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
|
||||
dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-pointer"
|
||||
<button class="text-white hover: focus:ring-4 focus:outline-none
|
||||
focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center
|
||||
: :ring-primary-800 cursor-pointer"
|
||||
>
|
||||
{% translate 'Guardar' %}
|
||||
</button>
|
||||
@@ -98,34 +92,34 @@
|
||||
<div class="mb-4 grid gap-4 sm:grid-cols-2 sm:gap-8 lg:gap-16">
|
||||
<div class="space-y-4">
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</dt>
|
||||
<dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
|
||||
<dt class="font-semibold ">{% translate 'Nombre completo' %}</dt>
|
||||
<dd class="flex items-center gap-1 ">
|
||||
{{ address.full_name }}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Dirección' %}</dt>
|
||||
<dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
|
||||
<dt class="font-semibold ">{% translate 'Dirección' %}</dt>
|
||||
<dd class="flex items-center gap-1 ">
|
||||
{{ address.address }}
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Código postal' %}</dt>
|
||||
<dd class="text-gray-500 dark:text-gray-400">{{ address.address_zip }}</dd>
|
||||
<dt class="font-semibold ">{% translate 'Código postal' %}</dt>
|
||||
<dd class=" ">{{ address.address_zip }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Teléfono' %}</dt>
|
||||
<dd class="text-gray-500 dark:text-gray-400">{{ address.address_phone }}</dd>
|
||||
<dt class="font-semibold ">{% translate 'Teléfono' %}</dt>
|
||||
<dd class=" ">{{ address.address_phone }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Localidad' %}</dt>
|
||||
<dd class="text-gray-500 dark:text-gray-400">{{ address.address_town }}</dd>
|
||||
<dt class="font-semibold ">{% translate 'Localidad' %}</dt>
|
||||
<dd class=" ">{{ address.address_town }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Provincia' %}</dt>
|
||||
<dd class="text-gray-500 dark:text-gray-400">{{ address.address_state }}</dd>
|
||||
<dt class="font-semibold ">{% translate 'Provincia' %}</dt>
|
||||
<dd class=" ">{{ address.address_state }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,9 +127,9 @@
|
||||
<button hx-on:click="htmx.toggleClass(htmx.find('#edit_address_{{ address.pk }}'), 'hidden'); htmx.toggleClass(htmx.find('#details_address_{{ address.pk }}'), 'hidden')"
|
||||
type="button"
|
||||
data-modal-target="accountInformationModal2" data-modal-toggle="accountInformationModal2"
|
||||
class="inline-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 sm:w-auto cursor-pointer"
|
||||
class="inline-flex w-full items-center justify-center rounded-lg px-5 py-2.5 text-sm
|
||||
font-medium text-white hover: focus:outline-none focus:ring-4 focus:ring-primary-300
|
||||
: :ring-primary-800 sm:w-auto cursor-pointer"
|
||||
>
|
||||
{% include 'components/icons/edit.svg' %}
|
||||
{% translate 'Editar datos' %}
|
||||
@@ -143,6 +137,6 @@
|
||||
</div>
|
||||
</div>
|
||||
{% if not forloop.last %}
|
||||
<hr class="h-px my-2 bg-gray-200 border-0 dark:bg-gray-700">
|
||||
<hr class="h-px my-2 ">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
{% load i18n %}
|
||||
<ul class="p-2 text-start text-sm font-medium text-gray-900 dark:text-white">
|
||||
<ul class="p-2 text-start text-sm font-medium ">
|
||||
<li>
|
||||
<a href="{% url 'web:my_account' %}" title=""
|
||||
class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
|
||||
<a href="{% url 'users:my_account' %}" title=""
|
||||
class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover: :">
|
||||
{% translate 'Mi cuenta' %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'web:orders' %}" title=""
|
||||
class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
|
||||
class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover: :">
|
||||
{% translate 'Mis pedidos' %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'web:wishlist' %}" title=""
|
||||
class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
|
||||
class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover: :">
|
||||
{% translate 'Lista de deseados' %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="p-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
<a href="{% url 'web:logout' %}" title=""
|
||||
class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">
|
||||
<div class="p-2 text-sm font-medium ">
|
||||
<a href="{% url 'users:logout' %}" title=""
|
||||
class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover: :">
|
||||
{% translate 'Cerrar sesión' %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user