feat: enable color selection for cart items and enhance UI integration

- Added `selected_color` field to `CartItem` model with migration
- Updated color swatch behavior on product detail page with selection logic and disabled button handling
- Improved cart templates to display selected color alongside item details
- Modified `add_item_to_cart` service and `add` view to handle color selection
- Enhanced styles for active swatches and cart item color display

templates/catalog/detail.html

@@ -64,6 +64,7 @@
                             class="product-summary__swatch"
                             style="background: {{ color.hex_code }};"
                             title="{{ color.name }}"
+                            data-color-id="{{ color.id }}"
                         ></span>
                     {% endfor %}
                 </div>
@@ -84,6 +85,7 @@
                         {% csrf_token %}
                         <input type="hidden" name="item_id" value="{{ item.id }}">
                         <input type="hidden" name="next" value="{{ request.get_full_path }}">
+                        <input type="hidden" name="color_id" id="selected-color-id" value="">
                         <button class="product-summary__button product-summary__button--primary" type="submit" {% if not item.is_available %}disabled{% endif %}>
                             В корзину
                         </button>
@@ -109,6 +111,25 @@
 <script>
     document.addEventListener('DOMContentLoaded', function () {
         Fancybox.bind('[data-fancybox="product-gallery"]');
+
+        (function () {
+            var swatches = document.querySelectorAll('.product-summary__swatch[data-color-id]');
+            var colorInput = document.getElementById('selected-color-id');
+            var cartBtn = document.querySelector('.product-summary__button--primary[type="submit"]');
+
+            if (!swatches.length || !colorInput) { return; }
+
+            if (cartBtn) { cartBtn.disabled = true; }
+
+            swatches.forEach(function (swatch) {
+                swatch.addEventListener('click', function () {
+                    swatches.forEach(function (s) { s.classList.remove('product-summary__swatch--active'); });
+                    this.classList.add('product-summary__swatch--active');
+                    colorInput.value = this.dataset.colorId || '';
+                    if (cartBtn) { cartBtn.disabled = false; }
+                });
+            });
+        }());
     });
 </script>
 {% endblock %}

templates/orders/cart.html

@@ -34,6 +34,9 @@
 
                                     <div class="cart-item__info">
                                         <a class="cart-item__title" href="{% url 'detail' item.category.slug item.slug %}">{{ item.name }}</a>
+                                        {% if cart_item.selected_color %}
+                                            <span class="cart-item__color">({{ cart_item.selected_color.name }})</span>
+                                        {% endif %}
                                         <p class="cart-item__price">{{ item.price }} руб.</p>
 
                                         <div class="cart-item__controls">