update shop

shop/templates/shop/product_item.html

@@ -3,7 +3,7 @@
     <div class="bubble">
         {% if product.image %}
         <img id="product-image-{{ product.id }}"
-             src="{{ product.image|color_image_url:product.colors.all.0.name }}"
+            src="{% color_image_url product.image product.colors.all.0.name product.sku %}"
              alt="{{ product.title }}"
              class="product-image">
         {% else %}
@@ -37,7 +37,7 @@
                              title="{{ color.name }}"
                              data-color-id="{{ color.id }}"
                              data-color-name="{{ color.name }}"
-                             data-color-image="{{ product.image|color_image_url:color.name }}"
+                             data-color-image="{% color_image_url product.image color.name product.sku %}"
                              onclick="selectColor('{{ product.id }}', '{{ color.id }}', '{{ color.name }}', this)"></div>
                         {% endfor %}
                     </div>

shop/templatetags/shop_extras.py

@@ -2,69 +2,64 @@ from django import template
 import os
 
 register = template.Library()
+from django.conf import settings
 
-@register.filter
+@register.simple_tag
-def color_image_url(product_image, color_name):
+def color_image_url(default_image, color_name, sku):
     """
-    Returns color-specific image URL with any supported extension.
+    Returns color-specific image URL from the color-specific folder structure.
-    Falls back to the original image if no color variant exists.
+    Structure expected:
+    static/shop/images/products/
+        ├── {sku}/
+        │   ├── default.jpg  (or any supported extension)
+        │   └── {color_name}/
+        │       └── image.jpg (or any supported extension)
     """
-    if not product_image or not color_name:
-        return product_image
 
-    # Generate color suffix
+    # List of supported image extensions
-    suffix = generate_color_suffix(color_name)
-
-    # Split path
-    directory, filename = os.path.split(product_image)
-    base_name, original_ext = os.path.splitext(filename)
-
-    # List of supported image extensions to check
     supported_extensions = ['.png.avif', '.jpg', '.jpeg', '.png', '.gif', '.webp', '.avif']
 
-    # Check for the color image with original extension first
+    # Base path for products
-    color_filename = f"{suffix}_{base_name}{original_ext}"
+    base_path = f'/static/shop/images/products/{sku}/'
-    color_image = os.path.join(directory, color_filename)
+    physical_base_path = os.path.join(settings.BASE_DIR, 'shop', 'static', 'shop', 'images', 'products', sku)
-
+
-    # Extract the path after /static/
+    if color_name:
-    static_prefix = '/static/'
+        # Generate color folder name (sanitize the color name)
-    if color_image.startswith(static_prefix):
+        color_folder = generate_color_folder_name(color_name)
-        rel_path = color_image[len(static_prefix):]
+
-    else:
+        # Check color-specific folder
-        rel_path = color_image.lstrip('/')
+        color_path = os.path.join(physical_base_path, color_folder)
-
+        if os.path.exists(color_path):
-    # Check if file with original extension exists
+            # Get first image from color folder
-    from django.conf import settings
+            files = [f for f in os.listdir(color_path)
-    app_static_path = os.path.join(settings.BASE_DIR, 'shop', 'static', rel_path)
+                     if any(f.lower().endswith(ext) for ext in supported_extensions)]
-
+
-    if os.path.exists(app_static_path):
+            if files:
-        return color_image
+                # Sort files to ensure consistent selection
-
+                files.sort(key=lambda x: (
-    # If not found with original extension, try other extensions
+                    1 if '-B_' in x else
-    for ext in supported_extensions:
+                    2 if '-S_' in x else
-        if ext == original_ext:
+                    0
-            continue  # Skip the original extension as we already checked it
+                ))
-
+
-        color_filename = f"{suffix}_{base_name}{ext}"
+                # Get the first image
-        color_image = os.path.join(directory, color_filename)
+                first_file = files[0]
-
+                return f'{base_path}{color_folder}/{first_file}'
-        if color_image.startswith(static_prefix):
+
-            rel_path = color_image[len(static_prefix):]
+    # If no color-specific image found, look for default image in product folder
-        else:
+    if os.path.exists(physical_base_path):
-            rel_path = color_image.lstrip('/')
+        for file in os.listdir(physical_base_path):
-
+            if any(file.lower().endswith(ext) for ext in supported_extensions):
-        app_static_path = os.path.join(settings.BASE_DIR, 'shop', 'static', rel_path)
+                if os.path.isfile(os.path.join(physical_base_path, file)):  # Make sure it's a file, not a directory
-
+                    return f'{base_path}{file}'
-        if os.path.exists(app_static_path):
+
-            return color_image
+    # If nothing found, return the default image from the database
-
+    return default_image
-    # If no color variant is found with any extension, return the original image
+
-    return product_image
+def generate_color_folder_name(color_name):
-
-def generate_color_suffix(color_name):
     """
-    Generates a URL-friendly suffix from a color name
+    Generates a folder-friendly name from a color name
-    Example: "Noir / Gris Foncé Chiné" becomes "noir_gris_fonce_chine"
+    Example: "Noir / Gris Foncé Chiné" becomes "noir-gris-fonce-chine"
     """
     import unicodedata
     import re
@@ -73,10 +68,10 @@ def generate_color_suffix(color_name):
     value = color_name.lower()
     value = unicodedata.normalize('NFKD', value).encode('ascii', 'ignore').decode('ascii')
 
-    # Replace slashes and spaces with underscores
+    # Replace slashes and spaces with hyphens
-    value = re.sub(r'[/\s]+', '_', value)
+    value = re.sub(r'[/\s]+', '-', value)
 
-    # Remove any remaining non-alphanumeric characters
+    # Remove any remaining non-alphanumeric characters except hyphens
-    value = re.sub(r'[^\w_]', '', value)
+    value = re.sub(r'[^\w-]', '', value)
 
     return value