feat: cart detail
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
{% load i18n %}
|
||||
<section class="bg-white py-4 antialiased dark:bg-gray-900 md:py-16">
|
||||
<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>
|
||||
|
||||
<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 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0">
|
||||
<a href="#" class="shrink-0 md:order-1">
|
||||
<img class="h-20 w-20 dark:hidden" src="{{ item.product.images.all|first }}"
|
||||
alt="{{ item.product.name }}"/>
|
||||
<img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all|first }}"
|
||||
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="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 class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
|
||||
<a href="#"
|
||||
class="text-base font-medium text-gray-900 hover:underline dark:text-white">{{ item.product.name }}</a>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<button type="button"
|
||||
class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-900 hover:underline dark:text-gray-400 dark:hover:text-white">
|
||||
{% include 'components/icons/like.svg' %}
|
||||
{% translate 'Añadir a favoritos' %}
|
||||
</button>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if items.count == 0 %}
|
||||
<span class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||||
{% translate 'No hay nada en el carrito...' %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<form action="">
|
||||
<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 'Ir a pagar' %}
|
||||
</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#}
|
||||
{# 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>
|
||||
</section>
|
||||
@@ -70,8 +70,8 @@
|
||||
|
||||
{% if cart.items.count > 0 %}
|
||||
<a href="{% url 'web:cart_detail' %}"
|
||||
class="mb-2 me-2 inline-flex w-full items-center justify-center rounded-lg bg-gray-700 px-5 py-2.5 text-sm
|
||||
font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300
|
||||
class="mb-2 me-2 inline-flex w-full items-center justify-center rounded-lg bg-gray-200 px-5 py-2.5 text-sm
|
||||
font-medium dark:text-white hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300
|
||||
dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800"
|
||||
role="button"> {% translate 'Ver carrito' %}
|
||||
</a>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
<svg class="me-1.5 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M6 18 17.94 6M18 18 6.06 6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 288 B |
@@ -5,7 +5,7 @@
|
||||
<section class="bg-gray-50 dark:bg-gray-900">
|
||||
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
|
||||
|
||||
<a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
|
||||
<a href="{% url 'web:index' %}" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
|
||||
<img class="w-8 h-8 mr-2" src="{% get_logo_image %}" alt="logo">
|
||||
{{ title }}
|
||||
</a>
|
||||
|
||||
@@ -3,26 +3,5 @@
|
||||
|
||||
{% block main %}
|
||||
{% include 'components/generic/navbar.html' %}
|
||||
<section class="p-16 mx-auto justify-between mb-4 grid gap-4 sm:grid-cols-1 md:mb-8 lg:grid-cols-2 xl:grid-cols-2">
|
||||
<section class="p-2 border border-gray-100 dark:border-gray-600 rounded-l">
|
||||
<ul>
|
||||
{% for item in items %}
|
||||
<li class="p-4">
|
||||
<a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
|
||||
class="text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white">
|
||||
<img class="mx-auto h-24 w-auto dark:hidden" src="{{ item.product.images.all|first }}"
|
||||
alt="{{ product.name }}"/>
|
||||
<img class="mx-auto hidden h-24 w-auto dark:block" src="{{ item.product.images.all|first }}"
|
||||
alt="{{ product.name }}"/>
|
||||
|
||||
{{ item.product.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
<section class="p-2 border border-gray-100 dark:border-gray-600 rounded-l">
|
||||
|
||||
</section>
|
||||
</section>
|
||||
{% endblock %}
|
||||
<section hx-get="{% url 'web:cart' %}" hx-trigger="load, updated-cart"></section>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user