fix: extracted all web related stuff to a new app
This commit is contained in:
@@ -1,35 +0,0 @@
|
||||
{% load i18n %}
|
||||
|
||||
<div class="grid grid-cols-2">
|
||||
<div>
|
||||
<a href="#" class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline">Apple iPhone 15</a>
|
||||
<p class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">$599</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-6">
|
||||
<p class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">Qty: 1</p>
|
||||
|
||||
<button data-tooltip-target="tooltipRemoveItem1a" type="button"
|
||||
class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600">
|
||||
<span class="sr-only"> Remove </span>
|
||||
<svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd"
|
||||
d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm7.7-3.7a1 1 0 0 0-1.4 1.4l2.3 2.3-2.3 2.3a1 1 0 1 0 1.4 1.4l2.3-2.3 2.3 2.3a1 1 0 0 0 1.4-1.4L13.4 12l2.3-2.3a1 1 0 0 0-1.4-1.4L12 10.6 9.7 8.3Z"
|
||||
clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
<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">
|
||||
Remove item
|
||||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" title=""
|
||||
class="mb-2 me-2 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"
|
||||
role="button"> {% translate 'Ir a pagar' %}
|
||||
</a>
|
||||
@@ -1,142 +0,0 @@
|
||||
{% load i18n %}
|
||||
<nav class="bg-white dark:bg-gray-800 antialiased">
|
||||
<!-- Left side -->
|
||||
<div class="max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
|
||||
<!-- Title -->
|
||||
<div class="flex items-center space-x-8">
|
||||
<div class="shrink-0">
|
||||
<a href="{% url 'shop:index' %}">
|
||||
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Shoppy</h1>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Categories -->
|
||||
<ul class="hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center">
|
||||
<li>
|
||||
<a href="{% url 'shop:index' %}" title=""
|
||||
class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
|
||||
{% translate 'Inicio' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="shrink-0">
|
||||
<a href="{% url 'shop:index' %}" title=""
|
||||
class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
|
||||
{% translate 'Más vendidos' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="shrink-0">
|
||||
<a href="{% url 'shop:index' %}" title=""
|
||||
class="flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
|
||||
{% translate 'Ideas de regalo' %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="shrink-0">
|
||||
<a href="{% url 'shop:index' %}" title=""
|
||||
class="text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500">
|
||||
{% translate 'Ofertas del día' %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="relative flex items-center lg:space-x-2">
|
||||
|
||||
{% include 'components/theme-switch.html' %}
|
||||
<!-- Show/Hide cart -->
|
||||
<button hx-on:click="htmx.toggleClass(htmx.find('#myCartDropdown1'), 'hidden'); htmx.addClass(htmx.find('#userDropdown1'), 'hidden')"
|
||||
id="myCartDropdownButton1"
|
||||
data-dropdown-toggle="myCartDropdown1" type="button"
|
||||
class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
|
||||
<span class="sr-only">
|
||||
{% translate 'Carrito' %}
|
||||
</span>
|
||||
<svg class="w-5 h-5 lg:me-1" 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="M5 4h1.5L9 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-8.5-3h9.25L19 7H7.312"/>
|
||||
</svg>
|
||||
<span class="sm:flex">{% translate 'Carrito' %}</span>
|
||||
<svg class="hidden sm:flex w-4 h-4 text-gray-900 dark:text-white ms-1" 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="m19 9-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Cart -->
|
||||
<div id="myCartDropdown1"
|
||||
class="absolute top-10 hidden 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">
|
||||
{% include 'components/cart/cart_dropdown.html' %}
|
||||
</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"
|
||||
class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">
|
||||
<svg class="w-5 h-5 me-1" 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-width="2"
|
||||
d="M7 17v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3Zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
|
||||
</svg>
|
||||
{% translate 'Mi cuenta' %}
|
||||
<svg class="w-4 h-4 text-gray-900 dark:text-white ms-1" 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="m19 9-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- User account dropdown -->
|
||||
<div id="userDropdown1"
|
||||
class="absolute top-10 hidden 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">
|
||||
{% include 'components/users/user_dropdown.html' %}
|
||||
</div>
|
||||
{% else %}
|
||||
<a href="{% url 'users:login' %}" class="inline-flex items-center rounded-lg justify-center p-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white">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"
|
||||
class="inline-flex lg:hidden items-center justify-center hover:bg-gray-100 rounded-md dark:hover:bg-gray-700 p-2 text-gray-900 dark:text-white">
|
||||
<span class="sr-only">
|
||||
Open Menu
|
||||
</span>
|
||||
<svg class="w-5 h-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-width="2" d="M5 7h14M5 12h14M5 17h14"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ecommerce-navbar-menu-1"
|
||||
class="bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3 hidden px-4 mt-4">
|
||||
<ul class="text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3">
|
||||
<li>
|
||||
<a href="{% url 'shop:index' %}" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Inicio' %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'shop:index' %}" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Más vendidos' %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'shop:index' %}" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ideas de regalo' %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'shop:index' %}" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Juegos' %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'shop:index' %}" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Electrónica' %}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'shop:index' %}" class="hover:text-primary-700 dark:hover:text-primary-500">{% translate 'Ofertas del día' %}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,70 +0,0 @@
|
||||
{% load i18n %}
|
||||
<article>
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
|
||||
<div class="h-56 w-full">
|
||||
<a href="{% url 'shop:product_detail' pk=product.pk slug=product.slug %}">
|
||||
<img class="mx-auto h-full dark:hidden" src="{{ product.images.all|first }}"
|
||||
alt="{{ product.name }}"/>
|
||||
<img class="mx-auto hidden h-full dark:block" src="{{ product.images.all|first }}"
|
||||
alt="{{ product.name }}"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pt-6">
|
||||
|
||||
<a href="{% url 'shop:product_detail' pk=product.pk slug=product.slug %}"
|
||||
class="text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white">{{ product.name }}</a>
|
||||
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<div class="flex items-center">
|
||||
<svg class="h-4 w-4 text-yellow-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M13.8 4.2a2 2 0 0 0-3.6 0L8.4 8.4l-4.6.3a2 2 0 0 0-1.1 3.5l3.5 3-1 4.4c-.5 1.7 1.4 3 2.9 2.1l3.9-2.3 3.9 2.3c1.5 1 3.4-.4 3-2.1l-1-4.4 3.4-3a2 2 0 0 0-1.1-3.5l-4.6-.3-1.8-4.2Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="h-4 w-4 text-yellow-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M13.8 4.2a2 2 0 0 0-3.6 0L8.4 8.4l-4.6.3a2 2 0 0 0-1.1 3.5l3.5 3-1 4.4c-.5 1.7 1.4 3 2.9 2.1l3.9-2.3 3.9 2.3c1.5 1 3.4-.4 3-2.1l-1-4.4 3.4-3a2 2 0 0 0-1.1-3.5l-4.6-.3-1.8-4.2Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="h-4 w-4 text-yellow-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M13.8 4.2a2 2 0 0 0-3.6 0L8.4 8.4l-4.6.3a2 2 0 0 0-1.1 3.5l3.5 3-1 4.4c-.5 1.7 1.4 3 2.9 2.1l3.9-2.3 3.9 2.3c1.5 1 3.4-.4 3-2.1l-1-4.4 3.4-3a2 2 0 0 0-1.1-3.5l-4.6-.3-1.8-4.2Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="h-4 w-4 text-yellow-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M13.8 4.2a2 2 0 0 0-3.6 0L8.4 8.4l-4.6.3a2 2 0 0 0-1.1 3.5l3.5 3-1 4.4c-.5 1.7 1.4 3 2.9 2.1l3.9-2.3 3.9 2.3c1.5 1 3.4-.4 3-2.1l-1-4.4 3.4-3a2 2 0 0 0-1.1-3.5l-4.6-.3-1.8-4.2Z"/>
|
||||
</svg>
|
||||
|
||||
<svg class="h-4 w-4 text-yellow-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M13.8 4.2a2 2 0 0 0-3.6 0L8.4 8.4l-4.6.3a2 2 0 0 0-1.1 3.5l3.5 3-1 4.4c-.5 1.7 1.4 3 2.9 2.1l3.9-2.3 3.9 2.3c1.5 1 3.4-.4 3-2.1l-1-4.4 3.4-3a2 2 0 0 0-1.1-3.5l-4.6-.3-1.8-4.2Z"/>
|
||||
</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>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center justify-between gap-4">
|
||||
<p
|
||||
class="text-2xl font-extrabold leading-tight text-gray-900 dark:text-white">{{ product.price.price_with_tax }}€</p>
|
||||
|
||||
<button type="button"
|
||||
class="inline-flex items-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">
|
||||
<svg class="-ms-2 me-2 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="M4 4h1.5L8 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm.75-3H7.5M11 7H6.312M17 4v6m-3-3h6"/>
|
||||
</svg>
|
||||
{% translate 'Añadir al carrito' %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@@ -1,36 +0,0 @@
|
||||
{% load i18n %}
|
||||
<section class="bg-gray-50 dark:bg-gray-900 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="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"
|
||||
hx-get="{% url 'shop:list_products' %}"
|
||||
hx-target="#products"
|
||||
hx-trigger="keyup changed delay:500ms"
|
||||
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">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
|
||||
viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||
clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 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 'Buscar' %}"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,46 +0,0 @@
|
||||
{% load i18n %}
|
||||
<ul class="p-2 text-start text-sm font-medium text-gray-900 dark:text-white">
|
||||
<li>
|
||||
<a href="#" 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">
|
||||
{% translate 'Mi cuenta' %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" 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">
|
||||
{% translate 'Mis pedidos' %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" 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">
|
||||
{% translate 'Ajustes' %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" 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">
|
||||
{% translate 'Lista de deseados' %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" 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">
|
||||
{% translate 'Direcciones de envío' %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" 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">
|
||||
{% translate 'Métodos de pago' %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="p-2 text-sm font-medium text-gray-900 dark:text-white">
|
||||
<a href="{% url 'users: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">
|
||||
{% translate 'Cerrar sesión' %}
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,35 +0,0 @@
|
||||
{% extends 'theme/base.html' %}
|
||||
{% load static i18n %}
|
||||
|
||||
{% block main %}
|
||||
{% include 'components/generic/navbar.html' %}
|
||||
<div>
|
||||
{% include 'components/products/list_filters.html' %}
|
||||
<section
|
||||
class="p-8"
|
||||
hx-get="{% url 'shop:list_products' %}{% querystring request.GET %}"
|
||||
hx-trigger="load"
|
||||
hx-target="#products"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<div>
|
||||
<ul id="products" class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
|
||||
</ul>
|
||||
<div class="w-full text-center">
|
||||
<button type="button"
|
||||
class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
|
||||
hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
|
||||
focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
|
||||
dark:hover:text-white dark:focus:ring-gray-700"
|
||||
hx-get="{% url 'shop:list_products' %}{% querystring request.GET %}{% querystring page=9 %}"
|
||||
hx-trigger="click"
|
||||
hx-target="#products"
|
||||
hx-swap="beforeend"
|
||||
>
|
||||
{% translate 'Mostrar mas' %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,7 +0,0 @@
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
{% for product in products %}
|
||||
<li>
|
||||
{% include 'components/product_card.html' %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
@@ -1,176 +0,0 @@
|
||||
{% extends 'theme/base.html' %}
|
||||
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block main %}
|
||||
{% include 'components/generic/navbar.html' %}
|
||||
|
||||
<section class="min-w-full py-8 bg-white md:py-16 dark:bg-gray-900 antialiased">
|
||||
<div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
|
||||
<div class="lg:grid lg:grid-cols-2 lg:gap-8 xl:gap-16">
|
||||
<div class="shrink-0 max-w-md lg:max-w-lg mx-auto">
|
||||
<img class="w-full dark:hidden" src="{{ product.images.all|first }}" alt=""/>
|
||||
<img class="w-full hidden dark:block" src="{{ product.images.all|first }}" alt=""/>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 sm:mt-8 lg:mt-0">
|
||||
<h1
|
||||
class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white"
|
||||
>
|
||||
{{ product.name }}
|
||||
</h1>
|
||||
<div class="mt-4 sm:items-center sm:gap-4 sm:flex">
|
||||
<p
|
||||
class="text-2xl font-extrabold text-gray-900 sm:text-3xl dark:text-white"
|
||||
>
|
||||
{{ product.price.price_with_tax }} €
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-2 mt-2 sm:mt-0">
|
||||
<div class="flex items-center gap-1">
|
||||
<svg
|
||||
class="w-4 h-4 text-yellow-300"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="w-4 h-4 text-yellow-300"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="w-4 h-4 text-yellow-300"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="w-4 h-4 text-yellow-300"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
class="w-4 h-4 text-yellow-300"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-medium leading-none text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
(5.0)
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm font-medium leading-none text-gray-900 underline hover:no-underline dark:text-white"
|
||||
>
|
||||
345 Reviews
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 sm:gap-4 sm:items-center sm:flex sm:mt-8">
|
||||
<a
|
||||
href="#"
|
||||
title=""
|
||||
class="flex items-center justify-center py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 -ms-2 me-2"
|
||||
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="M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z"
|
||||
/>
|
||||
</svg>
|
||||
{% translate 'Añadir a lista de deseados' %}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
title=""
|
||||
class="text-white mt-4 sm:mt-0 bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800 flex items-center justify-center"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 -ms-2 me-2"
|
||||
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="M4 4h1.5L8 16m0 0h8m-8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm.75-3H7.5M11 7H6.312M17 4v6m-3-3h6"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{% translate 'Añadir al carrito' %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr class="my-6 md:my-8 border-gray-200 dark:border-gray-800"/>
|
||||
|
||||
<p class="mb-6 text-gray-500 dark:text-gray-400">
|
||||
{{ product.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@@ -9,5 +9,5 @@ class TestWebComponents(TestCase, CreateProductsMixin):
|
||||
self.product = self.create_product()
|
||||
|
||||
def test_list_products_component(self):
|
||||
response = self.client.get(reverse("shop:list_products"))
|
||||
response = self.client.get(reverse("web:list_products"))
|
||||
assert response.status_code == 200
|
||||
|
||||
@@ -9,13 +9,13 @@ class TestIndex(TestCase, CreateProductsMixin):
|
||||
self.product = self.create_product()
|
||||
|
||||
def test_index_view(self):
|
||||
response = self.client.get(reverse("shop:index"))
|
||||
response = self.client.get(reverse("web:index"))
|
||||
assert response.status_code == 200
|
||||
|
||||
def test_product_detail_view(self):
|
||||
response = self.client.get(
|
||||
reverse(
|
||||
"shop:product_detail",
|
||||
"web:product_detail",
|
||||
kwargs={"pk": self.product.pk, "slug": self.product.slug},
|
||||
)
|
||||
)
|
||||
|
||||
+1
-7
@@ -1,12 +1,6 @@
|
||||
from django.urls import path
|
||||
|
||||
from shop.views import index, list_products, product_detail
|
||||
|
||||
app_name = "shop"
|
||||
|
||||
|
||||
urlpatterns = [
|
||||
path("", index, name="index"),
|
||||
path("products/<int:pk>/<str:slug>/", product_detail, name="product_detail"),
|
||||
path("shop/components/products/", list_products, name="list_products"),
|
||||
]
|
||||
urlpatterns = []
|
||||
|
||||
+3
-3
@@ -7,7 +7,7 @@ from shop.models import Product
|
||||
|
||||
|
||||
class IndexView(TemplateView):
|
||||
template_name = "shop/index.html"
|
||||
template_name = "web/index.html"
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
return {
|
||||
@@ -16,7 +16,7 @@ class IndexView(TemplateView):
|
||||
|
||||
|
||||
class ListProducts(TemplateView, FilteredQuerysetMixin, PaginatedQuerysetMixin):
|
||||
template_name = "shop/list_products.html"
|
||||
template_name = "web/list_products.html"
|
||||
queryset = Product.objects.all()
|
||||
filter_class = ProductFilter
|
||||
|
||||
@@ -30,7 +30,7 @@ class ListProducts(TemplateView, FilteredQuerysetMixin, PaginatedQuerysetMixin):
|
||||
|
||||
|
||||
class ProductDetail(TemplateView):
|
||||
template_name = "shop/product_detail.html"
|
||||
template_name = "web/product_detail.html"
|
||||
|
||||
def get_context_data(self, pk, slug, **kwargs):
|
||||
product = get_object_or_404(Product, pk=pk)
|
||||
|
||||
Reference in New Issue
Block a user