{% if product.image %}
- 
+
{% endif %}
@@ -129,14 +142,30 @@ function selectColor(productId, colorId, colorName, element) {
// Add selected class to clicked color
element.classList.add('selected');
- // Update product image based on selected color
- const productImage = document.getElementById(`product-image-${productId}`);
+ // Update product images based on selected color
+ const slider = document.getElementById(`slider-${productId}`);
+ if (slider) {
+ const colorImages = element.getAttribute('data-color-images').split(',');
+ const slidesContainer = slider.querySelector('.slides');
- if (productImage) {
- const colorImage = element.getAttribute('data-color-image');
- if (colorImage) {
- productImage.src = colorImage;
- }
+ // Clear existing slides
+ slidesContainer.innerHTML = '';
+
+ // Add new slides
+ colorImages.forEach((imageUrl, index) => {
+ const img = document.createElement('img');
+ img.src = imageUrl;
+ img.alt = colorName;
+ img.className = `product-image ${index === 0 ? 'active' : ''}`;
+ img.id = `product-image-${productId}-${index}`;
+ slidesContainer.appendChild(img);
+ });
+
+ // Update navigation buttons visibility
+ const navButtons = slider.querySelectorAll('.prev, .next');
+ navButtons.forEach(button => {
+ button.style.display = colorImages.length > 1 ? 'block' : 'none';
+ });
}
}
@@ -212,4 +241,21 @@ function addToCartAjax(productId) {
}, 3000);
});
}
+
+function changeSlide(productId, direction) {
+ const slides = document.querySelectorAll(`#slider-${productId} .product-image`);
+ let activeIndex = Array.from(slides).findIndex(slide => slide.classList.contains('active'));
+
+ // Remove active class from current slide
+ slides[activeIndex].classList.remove('active');
+
+ // Calculate new index
+ activeIndex = activeIndex + direction;
+ if (activeIndex >= slides.length) activeIndex = 0;
+ if (activeIndex < 0) activeIndex = slides.length - 1;
+
+ // Add active class to new slide
+ slides[activeIndex].classList.add('active');
+}
+
diff --git a/shop/templatetags/shop_extras.py b/shop/templatetags/shop_extras.py
index c6f6406..704d9d1 100644
--- a/shop/templatetags/shop_extras.py
+++ b/shop/templatetags/shop_extras.py
@@ -2,69 +2,66 @@ from django import template
import os
register = template.Library()
+from django.conf import settings
-@register.filter
-def color_image_url(product_image, color_name):
+@register.simple_tag
+def color_images_url(default_image, color_name, sku):
"""
- Returns color-specific image URL with any supported extension.
- Falls back to the original image if no color variant exists.
+ Returns color-specific image URLs from the color-specific folder structure.
+ 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
- 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
+ # List of supported image extensions
supported_extensions = ['.png.avif', '.jpg', '.jpeg', '.png', '.gif', '.webp', '.avif']
- # Check for the color image with original extension first
- color_filename = f"{suffix}_{base_name}{original_ext}"
- color_image = os.path.join(directory, color_filename)
-
- # Extract the path after /static/
- static_prefix = '/static/'
- if color_image.startswith(static_prefix):
- rel_path = color_image[len(static_prefix):]
- else:
- rel_path = color_image.lstrip('/')
-
- # Check if file with original extension exists
- from django.conf import settings
- app_static_path = os.path.join(settings.BASE_DIR, 'shop', 'static', rel_path)
-
- if os.path.exists(app_static_path):
- return color_image
-
- # If not found with original extension, try other extensions
- for ext in supported_extensions:
- if ext == original_ext:
- continue # Skip the original extension as we already checked it
-
- color_filename = f"{suffix}_{base_name}{ext}"
- color_image = os.path.join(directory, color_filename)
-
- if color_image.startswith(static_prefix):
- rel_path = color_image[len(static_prefix):]
- else:
- rel_path = color_image.lstrip('/')
-
- app_static_path = os.path.join(settings.BASE_DIR, 'shop', 'static', rel_path)
-
- if os.path.exists(app_static_path):
- return color_image
-
- # If no color variant is found with any extension, return the original image
- return product_image
-
-def generate_color_suffix(color_name):
+ # Base path for products
+ base_path = f'/static/shop/images/products/{sku}/'
+ physical_base_path = os.path.join(settings.BASE_DIR, 'shop', 'static', 'shop', 'images', 'products', sku)
+
+ if color_name:
+ # Generate color folder name (sanitize the color name)
+ color_folder = generate_color_folder_name(color_name)
+
+ # Check color-specific folder
+ color_path = os.path.join(physical_base_path, color_folder)
+ if os.path.exists(color_path):
+ # Get all images from color folder
+ files = [f for f in os.listdir(color_path)
+ if any(f.lower().endswith(ext) for ext in supported_extensions)]
+
+ if files:
+ # Sort files by specific prefix rules
+ files.sort(key=lambda x: (
+ 1 if '-B_' in x else
+ 2 if '-S_' in x else
+ 0
+ ))
+ return [f'{base_path}{color_folder}/{file}' for file in files]
+
+ # If no color-specific image found, look for default image in product folder
+ if os.path.exists(physical_base_path):
+ files = [f for f in os.listdir(physical_base_path)
+ if os.path.isfile(os.path.join(physical_base_path, f)) and
+ any(f.lower().endswith(ext) for ext in supported_extensions)]
+ if files:
+ files.sort(key=lambda x: (
+ 1 if '-B_' in x else
+ 2 if '-S_' in x else
+ 0
+ ))
+ return [f'{base_path}{file}' for file in files]
+
+ # If nothing found, return list with default image
+ return [default_image]
+
+def generate_color_folder_name(color_name):
"""
- Generates a URL-friendly suffix from a color name
- Example: "Noir / Gris Foncé Chiné" becomes "noir_gris_fonce_chine"
+ Generates a folder-friendly name from a color name
+ Example: "Noir / Gris Foncé Chiné" becomes "noir-gris-fonce-chine"
"""
import unicodedata
import re
@@ -73,10 +70,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
- value = re.sub(r'[/\s]+', '_', value)
+ # Replace slashes and spaces with hyphens
+ value = re.sub(r'[/\s]+', '-', value)
- # Remove any remaining non-alphanumeric characters
- value = re.sub(r'[^\w_]', '', value)
+ # Remove any remaining non-alphanumeric characters except hyphens
+ value = re.sub(r'[^\w-]', '', value)
return value
+ {% color_images_url product.image product.colors.all.0.name product.sku as images %}
+
{% else %}
+ {% for image_url in images %}
+ 
+ {% endfor %}
+
+ {% if images|length > 1 %}
+
+
+ {% endif %}
+ No Image Available
{% endif %}
@@ -28,17 +39,19 @@
{% for color in product.colors.all %}
+ {% color_images_url product.image color.name product.sku as color_images %}
+ data-color-images="{{ color_images|join:',' }}"
+ onclick="selectColor('{{ product.id }}', '{{ color.id }}', '{{ color.name }}', this)">
+
{% endfor %}