fix: pagination

web/templates/web/index.html

@@ -13,21 +13,12 @@
       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>
+        <section id="products">
+
+        </section>
+
         <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 'web:list_products' %}{% querystring request.GET %}{% querystring page=9 %}"
-                  hx-trigger="click"
-                  hx-target="#products"
-                  hx-swap="beforeend"
-          >
-            {% translate 'Mostrar mas' %}
-          </button>
+
         </div>
       </div>
     </section>

web/templates/web/list_products.html

@@ -1,7 +1,38 @@
 {% load i18n %}
 {% load static %}
-{% for product in products %}
-  <li>
-    {% include 'components/product_card.html' %}
-  </li>
-{% endfor %}
+<ul class="mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4">
+  {% for product in page %}
+    <li>
+      {% include 'components/product_card.html' %}
+    </li>
+  {% endfor %}
+</ul>
+
+{% if has_previous_page %}
+<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 'web:list_products' %}{% querystring page=page.previous_page_number %}"
+  hx-trigger="click"
+  hx-target="#products"
+  hx-swap="innerHTML"
+>
+  {% translate 'Anterior' %}
+</button>
+{% endif %}
+{% if has_next_page %}
+<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 'web:list_products' %}{% querystring page=page.next_page_number %}"
+  hx-trigger="click"
+  hx-target="#products"
+  hx-swap="innerHTML"
+>
+  {% translate 'Siguiente' %}
+</button>
+{% endif %}