feat: added seo template and prioduct.slug

shop/templates/components/product_card.html

@@ -2,7 +2,7 @@
   <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="#">
+      <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 }}"
@@ -11,7 +11,7 @@
     </div>
     <div class="pt-6">
 
-      <a href="{% url 'shop:product_detail' pk=product.pk %}"
+      <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">

shop/templates/components/products/list_filters.html

@@ -8,6 +8,7 @@
                 hx-target="#products"
                 hx-trigger="keyup changed delay:500ms"
                 hx-swap="innerHTML"
+                hx-push="true"
           >
             <label for="simple-search" class="sr-only">Buscar</label>
             <div class="relative w-full">

shop/templates/shop/index.html

@@ -1,32 +1,34 @@
 {% extends 'theme/base.html' %}
-
-{% load static %}
+{% load static i18n %}
 
 {% block 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">
+    <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>
-      <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>
+    </section>
   </div>
 {% endblock %}

shop/templates/shop/list_products.html

@@ -1,5 +1,7 @@
 {% load i18n %}
 {% load static %}
 {% for product in products %}
-  {% include 'components/product_card.html' %}
+  <li>
+    {% include 'components/product_card.html' %}
+  </li>
 {% endfor %}