feat: added carousel

README.md

@@ -37,10 +37,10 @@ Con este usuario tendremos control total de la aplicación desde el [admin de Dj
 python manage.py createsuperuser
 ```
 
-### Tailwind
+### Arrancar Tailwind
 
 ```bash
-python manage.py tailwind start
+tailwindcss -w -i theme/static/css/main.css -o theme/static/css/styles.css
 ```
 
 ### Tareas de Celery

theme/templates/theme/base.html

@@ -12,6 +12,22 @@
   <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
   <script src="https://unpkg.com/htmx.org@2.0.3"></script>
 
+  <!-- Shoelace -->
+  <link
+    rel="stylesheet"
+    media="(prefers-color-scheme:light)"
+    href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19.1/cdn/themes/light.css"
+  />
+  <link
+    rel="stylesheet"
+    media="(prefers-color-scheme:dark)"
+    href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19.1/cdn/themes/dark.css"
+    onload="document.documentElement.classList.add('sl-theme-dark');"
+  />
+  <script type="module"
+          src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19.1/cdn/shoelace-autoloader.js"></script>
+
+
   <link rel="stylesheet" href="{% static 'css/styles.css' %}">
   {% block extra_js %}
   {% endblock %}

web/templates/web/product_detail.html

@@ -10,14 +10,21 @@
     <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=""/>
+
+          <sl-carousel pagination navigation mouse-dragging style="--aspect-ratio: 1/1;">
+            {% for image in product.images.all %}
+              <sl-carousel-item>
+                <img
+                  alt="{{ product.name }}"
+                  src="{{ image.file.url }}"
+                />
+              </sl-carousel-item>
+            {% endfor %}
+          </sl-carousel>
         </div>
 
         <div class="my-4 sm:m-8 lg:m-0">
-          <h1
-            class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white"
-          >
+          <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
             {{ product.name }}
           </h1>
           <div class="my-4 sm:items-center sm:gap-4 sm:flex">
@@ -27,6 +34,8 @@
               {{ product.price.price_with_tax }} €
             </p>
 
+            <sl-rating label="Rating" readonly value="3"></sl-rating>
+
             <!--
             <div class="flex items-center gap-2 mt-2 sm:mt-0">
               <div class="flex items-center gap-1">
@@ -55,8 +64,9 @@
           <div class="my-4 sm:gap-4 items-center flex sm:m-8">
 
             {% if user.is_authenticated %}
-            <div class="mr-2" hx-get="{% url 'web:wishlist_button' pk=product.pk %}" hx-trigger="load, updated-wishlist">
-            </div>
+              <div class="mr-2" hx-get="{% url 'web:wishlist_button' pk=product.pk %}"
+                   hx-trigger="load, updated-wishlist">
+              </div>
             {% endif %}
 
             {% include 'components/cart/add_to_cart.html' %}