feat: debounce name search added

shop/filters.py

@@ -5,6 +5,9 @@ from shop.models import Product
 
 
 class ProductFilter(django_filters.FilterSet):
+    name = django_filters.CharFilter(
+        field_name="name", lookup_expr="icontains", label=_("Nombre")
+    )
     tags = django_filters.BaseInFilter(field_name="tags", label=_("Etiquetas"))
 
     class Meta:

shop/templates/components/products/list_filters.html

@@ -0,0 +1,34 @@
+<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"
+          >
+            <label for="simple-search" class="sr-only">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="Buscar"
+                autocomplete="off">
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

shop/templates/shop/index.html

@@ -3,7 +3,30 @@
 {% load static %}
 
 {% block main %}
-  <main class="bg-gray-50 dark:bg-gray-900" hx-get="{% url 'shop:list_products' %}" hx-trigger="load">
-
-  </main>
+  <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>
+      <div id="products" class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
+      </div>
+      <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"
+        >
+          Mostrar mas
+        </button>
+      </div>
+    </div>
+  </section>
+  </div>
 {% endblock %}

shop/templates/shop/list_products.html

@@ -1,21 +1,5 @@
-{% extends 'theme/base.html' %}
-
+{% load i18n %}
 {% load static %}
-
-{% block main %}
-  <section class="py-8 antialiased md:py-12">
-    <section class="bg-gray-50 py-8 antialiased dark:bg-gray-900 md:py-12">
-      <div class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
-        {% for product in products %}
-          {% include 'components/product_card.html' %}
-        {% endfor %}
-        <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">
-            Show more
-          </button>
-        </div>
-      </div>
-    </section>
-  </section>
-{% endblock %}
+{% for product in products %}
+  {% include 'components/product_card.html' %}
+{% endfor %}