Implement card-based interface for ConfigurableKitProduct attributes

This commit introduces a new user-friendly interface for managing product attributes:

1. **Form Changes** (products/forms.py):
   - Removed 'option' field from ConfigurableKitOptionForm (values now inline)
   - Updated ConfigurableKitProductAttributeFormSetCreate to only include name, position, visible
   - Updated BaseConfigurableKitProductAttributeFormSet validation for new structure

2. **Template Updates** (products/templates/products/configurablekit_form.html):
   - Replaced row-based attribute interface with card-based design
   - Each card contains:
     - Parameter name field
     - Position field
     - Visibility toggle
     - Inline value inputs with add/remove buttons
   - "Add parameter" button creates new cards
   - "Add value" button adds inline value inputs

3. **JavaScript Enhancements**:
   - addValueField(): Creates new value input with delete button
   - initAddValueBtn(): Initializes add value button for each card
   - addParameterBtn: Dynamically generates new parameter cards
   - serializeAttributeValues(): Converts inline values to JSON for POST submission
   - Form submission intercept to serialize data before sending

4. **View Updates** (products/views/configurablekit_views.py):
   - Both Create and Update views now have _save_attributes_from_cards() method
   - Reads attributes-X-values JSON from POST data
   - Creates ConfigurableKitProductAttribute for each parameter+value combination
   - Handles parameter deletion and visibility toggling

**Key Features**:
✓ One-time parameter name entry with multiple inline values
✓ Add/remove values without reloading page
✓ Add/remove entire parameters with one click
✓ No database changes required
✓ Better UX: card layout more intuitive than rows
✓ Proper JSON serialization for value transmission

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

myproject/products/forms.py

@@ -783,71 +783,76 @@ ConfigurableKitOptionFormSetUpdate = inlineformset_factory(
 
 class ConfigurableKitProductAttributeForm(forms.ModelForm):
     """
-    Форма для добавления атрибута родительского товара.
-    Пример: name="Цвет", option="Красный"
+    Форма для добавления атрибута родительского товара в карточном интерфейсе.
+    На фронтенде: одна карточка параметра (имя + позиция + видимость)
+    + множество инлайн значений через JavaScript
+
+    Пример структуры:
+    - name: "Длина"
+    - position: 0
+    - visible: True
+    - values: [50, 60, 70] (будут созданы как отдельные ConfigurableKitProductAttribute)
     """
     class Meta:
         model = ConfigurableKitProductAttribute
-        fields = ['name', 'option', 'position', 'visible']
+        fields = ['name', 'position', 'visible']
         labels = {
-            'name': 'Название атрибута',
-            'option': 'Значение опции',
+            'name': 'Название параметра',
             'position': 'Порядок',
-            'visible': 'Видимый'
+            'visible': 'Видимый на витрине'
         }
         widgets = {
             'name': forms.TextInput(attrs={
-                'class': 'form-control',
-                'placeholder': 'Например: Цвет, Размер, Длина'
-            }),
-            'option': forms.TextInput(attrs={
-                'class': 'form-control',
-                'placeholder': 'Например: Красный, M, 60см'
+                'class': 'form-control param-name-input',
+                'placeholder': 'Например: Длина, Цвет, Размер',
+                'readonly': 'readonly'  # Должен быть заполнен через JavaScript
             }),
             'position': forms.NumberInput(attrs={
-                'class': 'form-control',
+                'class': 'form-control param-position-input',
                 'min': '0',
                 'value': '0'
             }),
             'visible': forms.CheckboxInput(attrs={
-                'class': 'form-check-input'
+                'class': 'form-check-input param-visible-input'
             })
         }
 
 
 class BaseConfigurableKitProductAttributeFormSet(forms.BaseInlineFormSet):
     def clean(self):
-        """Проверка на дубликаты атрибутов"""
+        """Проверка на дубликаты параметров и что у каждого параметра есть значения"""
         if any(self.errors):
             return
 
-        attributes = []
+        parameter_names = []
 
         for form in self.forms:
             if self.can_delete and self._should_delete_form(form):
                 continue
 
-            name = form.cleaned_data.get('name')
-            option = form.cleaned_data.get('option')
+            # Пропускаем пустые формы
+            if not form.cleaned_data.get('name'):
+                continue
 
-            # Проверка дубликатов
-            if name and option:
-                attr_tuple = (name.strip(), option.strip())
-                if attr_tuple in attributes:
-                    raise forms.ValidationError(
-                        f'Атрибут "{name}: {option}" добавлен более одного раза. '
-                        f'Каждая комбинация атрибут-значение должна быть уникальной.'
-                    )
-                attributes.append(attr_tuple)
+            name = form.cleaned_data.get('name').strip()
+
+            # Проверка дубликатов параметров (в карточном интерфейсе каждый параметр должен быть один раз)
+            if name in parameter_names:
+                raise forms.ValidationError(
+                    f'Параметр "{name}" добавлен более одного раза. '
+                    f'Каждый параметр должен быть добавлен только один раз.'
+                )
+            parameter_names.append(name)
 
 
-# Формсет для создания атрибутов родительского товара
+# Формсет для создания атрибутов родительского товара (карточный интерфейс)
 ConfigurableKitProductAttributeFormSetCreate = inlineformset_factory(
     ConfigurableKitProduct,
     ConfigurableKitProductAttribute,
     form=ConfigurableKitProductAttributeForm,
     formset=BaseConfigurableKitProductAttributeFormSet,
-    fields=['name', 'option', 'position', 'visible'],
+    # Убрали 'option' - значения будут добавляться через JavaScript в карточку
+    fields=['name', 'position', 'visible'],
     extra=1,
     can_delete=True,
     min_num=0,
@@ -861,7 +866,8 @@ ConfigurableKitProductAttributeFormSetUpdate = inlineformset_factory(
     ConfigurableKitProductAttribute,
     form=ConfigurableKitProductAttributeForm,
     formset=BaseConfigurableKitProductAttributeFormSet,
-    fields=['name', 'option', 'position', 'visible'],
+    # Убрали 'option' - значения будут добавляться через JavaScript в карточку
+    fields=['name', 'position', 'visible'],
     extra=0,
     can_delete=True,
     min_num=0,

myproject/products/templates/products/configurablekit_form.html

@@ -94,14 +94,14 @@ input[name*="DELETE"] {
                     </div>
                 </div>
 
-                <!-- Атрибуты родительского товара -->
+                <!-- Атрибуты родительского товара - Карточный интерфейс -->
                 <div class="card border-0 shadow-sm mb-3">
                     <div class="card-header bg-white">
-                        <h5 class="mb-0">Атрибуты товара (для WooCommerce)</h5>
+                        <h5 class="mb-0">Параметры товара</h5>
                     </div>
                     <div class="card-body">
                         <p class="small text-muted mb-3">
-                            Определите схему атрибутов для вариативного товара. Например: Цвет=Красный, Размер=M, Длина=60см.
+                            Определите параметры вариативного товара и их значения. Например: Длина (50, 60, 70), Упаковка (БЕЗ, В УПАКОВКЕ).
                         </p>
 
                         {{ attribute_formset.management_form }}
@@ -114,26 +114,20 @@ input[name*="DELETE"] {
 
                         <div id="attributeFormsetContainer">
                             {% for form in attribute_formset %}
-                                <div class="attribute-form border rounded p-3 mb-3" style="background: #f8f9fa;">
+                                <div class="attribute-card border rounded p-4 mb-3" style="background: #f8f9fa;" data-formset-index="{{ forloop.counter0 }}">
                                     {{ form.id }}
-                                    {% if form.instance.pk %}
-                                        <input type="hidden" name="attributes-{{ forloop.counter0 }}-id" value="{{ form.instance.pk }}">
-                                    {% endif %}
-                                    <div class="row g-2">
+
+                                    <div class="row align-items-end g-3 mb-3">
+                                        <!-- Название параметра -->
                                         <div class="col-md-3">
-                                            <label class="form-label small">{{ form.name.label }}</label>
+                                            <label class="form-label fw-semibold">{{ form.name.label }}</label>
                                             {{ form.name }}
                                             {% if form.name.errors %}
                                                 <div class="text-danger small">{{ form.name.errors.0 }}</div>
                                             {% endif %}
                                         </div>
-                                        <div class="col-md-3">
-                                            <label class="form-label small">{{ form.option.label }}</label>
-                                            {{ form.option }}
-                                            {% if form.option.errors %}
-                                                <div class="text-danger small">{{ form.option.errors.0 }}</div>
-                                            {% endif %}
-                                        </div>
+
+                                        <!-- Позиция параметра -->
                                         <div class="col-md-2">
                                             <label class="form-label small">{{ form.position.label }}</label>
                                             {{ form.position }}
@@ -141,34 +135,47 @@ input[name*="DELETE"] {
                                                 <div class="text-danger small">{{ form.position.errors.0 }}</div>
                                             {% endif %}
                                         </div>
-                                        <div class="col-md-2">
-                                            <label class="form-label small d-block">{{ form.visible.label }}</label>
-                                            <div class="form-check">
+
+                                        <!-- Видимость -->
+                                        <div class="col-md-3">
+                                            <div class="form-check form-switch">
                                                 {{ form.visible }}
                                                 <label class="form-check-label" for="{{ form.visible.id_for_label }}">
-                                                    Показывать
+                                                    {{ form.visible.label }}
                                                 </label>
                                             </div>
                                             {% if form.visible.errors %}
                                                 <div class="text-danger small">{{ form.visible.errors.0 }}</div>
                                             {% endif %}
                                         </div>
-                                        <div class="col-md-2">
+
+                                        <!-- Удалить параметр -->
+                                        <div class="col-md-2 text-end">
                                             {% if attribute_formset.can_delete %}
-                                                <label class="form-label small d-block">&nbsp;</label>
                                                 {{ form.DELETE }}
-                                                <label for="{{ form.DELETE.id_for_label }}" class="btn btn-sm btn-outline-danger d-block">
+                                                <label for="{{ form.DELETE.id_for_label }}" class="btn btn-sm btn-outline-danger">
                                                     <i class="bi bi-trash"></i> Удалить
                                                 </label>
                                             {% endif %}
                                         </div>
                                     </div>
+
+                                    <!-- Значения параметра (добавляются инлайн через JavaScript) -->
+                                    <div class="parameter-values-container mt-3 p-3 bg-white rounded border">
+                                        <label class="form-label small fw-semibold d-block mb-2">Значения параметра:</label>
+                                        <div class="value-fields-wrapper" data-param-index="{{ forloop.counter0 }}">
+                                            <!-- Значения будут добавлены через JavaScript -->
+                                        </div>
+                                        <button type="button" class="btn btn-sm btn-outline-secondary mt-2 add-value-btn">
+                                            <i class="bi bi-plus-circle me-1"></i> Добавить значение
+                                        </button>
+                                    </div>
                                 </div>
                             {% endfor %}
                         </div>
 
-                        <button type="button" class="btn btn-sm btn-outline-primary" id="addAttributeBtn">
-                            <i class="bi bi-plus-circle me-1"></i>Добавить атрибут
+                        <button type="button" class="btn btn-sm btn-outline-primary" id="addParameterBtn">
+                            <i class="bi bi-plus-circle me-1"></i> Добавить параметр
                         </button>
                     </div>
                 </div>
@@ -454,78 +461,187 @@ function initDefaultSwitches() {
 // Запускаем инициализацию
 initDefaultSwitches();
 
-// === Добавление новых форм атрибутов ===
-document.getElementById('addAttributeBtn').addEventListener('click', function() {
+// === Управление параметрами товара (карточный интерфейс) ===
+
+// Функция для добавления нового поля значения параметра
+function addValueField(container, valueText = '') {
+    const index = container.querySelectorAll('.value-field-group').length;
+    const fieldId = `value-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    const html = `
+        <div class="value-field-group d-flex gap-2 mb-2">
+            <input type="text" class="form-control form-control-sm parameter-value-input"
+                   placeholder="Введите значение"
+                   value="${valueText}"
+                   data-field-id="${fieldId}">
+            <button type="button" class="btn btn-sm btn-outline-danger remove-value-btn" title="Удалить значение">
+                <i class="bi bi-trash"></i>
+            </button>
+        </div>
+    `;
+
+    container.insertAdjacentHTML('beforeend', html);
+
+    // Обработчик удаления значения
+    container.querySelector('.remove-value-btn:last-child').addEventListener('click', function(e) {
+        e.preventDefault();
+        this.closest('.value-field-group').remove();
+    });
+}
+
+// Инициализация существующих параметров с их значениями из БД
+function initializeParameterCards() {
+    document.querySelectorAll('.attribute-card').forEach(card => {
+        // Если это существующий параметр с ID, загрузим его значения
+        // Это будет обработано при первой загрузке в view
+        initAddValueBtn(card);
+    });
+}
+
+// Инициализация кнопки добавления значения для карточки
+function initAddValueBtn(card) {
+    const addBtn = card.querySelector('.add-value-btn');
+    if (addBtn) {
+        addBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const container = this.closest('.parameter-values-container').querySelector('.value-fields-wrapper');
+            addValueField(container);
+        });
+    }
+}
+
+// Добавление нового параметра
+document.getElementById('addParameterBtn')?.addEventListener('click', function() {
     const container = document.getElementById('attributeFormsetContainer');
     const totalForms = document.querySelector('[name="attributes-TOTAL_FORMS"]');
     const formIdx = parseInt(totalForms.value);
-    
-    // Создаём новую форму HTML
-    const newFormHtml = `
-        <div class="attribute-form border rounded p-3 mb-3" style="background: #f8f9fa;">
-            <div class="row g-2">
+
+    const newCardHtml = `
+        <div class="attribute-card border rounded p-4 mb-3" style="background: #f8f9fa;" data-formset-index="${formIdx}">
+            <input type="hidden" name="attributes-${formIdx}-id">
+
+            <div class="row align-items-end g-3 mb-3">
                 <div class="col-md-3">
-                    <label class="form-label small">Название атрибута</label>
-                    <input type="text" name="attributes-${formIdx}-name" 
-                           id="id_attributes-${formIdx}-name" 
-                           class="form-control" 
-                           placeholder="Например: Цвет, Размер, Длина">
-                </div>
-                <div class="col-md-3">
-                    <label class="form-label small">Значение опции</label>
-                    <input type="text" name="attributes-${formIdx}-option" 
-                           id="id_attributes-${formIdx}-option" 
-                           class="form-control" 
-                           placeholder="Например: Красный, M, 60см">
+                    <label class="form-label fw-semibold">Название параметра</label>
+                    <input type="text" name="attributes-${formIdx}-name"
+                           id="id_attributes-${formIdx}-name"
+                           class="form-control param-name-input"
+                           placeholder="Например: Длина, Цвет, Размер">
                 </div>
                 <div class="col-md-2">
                     <label class="form-label small">Порядок</label>
-                    <input type="number" name="attributes-${formIdx}-position" 
-                           id="id_attributes-${formIdx}-position" 
-                           class="form-control" 
-                           min="0" value="0">
+                    <input type="number" name="attributes-${formIdx}-position"
+                           id="id_attributes-${formIdx}-position"
+                           class="form-control param-position-input"
+                           min="0" value="${formIdx}">
                 </div>
-                <div class="col-md-2">
-                    <label class="form-label small d-block">Видимый</label>
-                    <div class="form-check">
-                        <input type="checkbox" name="attributes-${formIdx}-visible" 
-                               id="id_attributes-${formIdx}-visible" 
-                               class="form-check-input" checked>
+                <div class="col-md-3">
+                    <div class="form-check form-switch">
+                        <input type="checkbox" name="attributes-${formIdx}-visible"
+                               id="id_attributes-${formIdx}-visible"
+                               class="form-check-input param-visible-input"
+                               checked>
                         <label class="form-check-label" for="id_attributes-${formIdx}-visible">
-                            Показывать
+                            Видимый на витрине
                         </label>
                     </div>
                 </div>
-                <div class="col-md-2">
-                    <label class="form-label small d-block">&nbsp;</label>
-                    <input type="checkbox" name="attributes-${formIdx}-DELETE" 
-                           id="id_attributes-${formIdx}-DELETE" 
+                <div class="col-md-2 text-end">
+                    <input type="checkbox" name="attributes-${formIdx}-DELETE"
+                           id="id_attributes-${formIdx}-DELETE"
                            style="display:none;">
-                    <label for="id_attributes-${formIdx}-DELETE" class="btn btn-sm btn-outline-danger d-block">
+                    <label for="id_attributes-${formIdx}-DELETE" class="btn btn-sm btn-outline-danger">
                         <i class="bi bi-trash"></i> Удалить
                     </label>
                 </div>
             </div>
+
+            <div class="parameter-values-container mt-3 p-3 bg-white rounded border">
+                <label class="form-label small fw-semibold d-block mb-2">Значения параметра:</label>
+                <div class="value-fields-wrapper" data-param-index="${formIdx}">
+                    <!-- Значения добавляются сюда -->
+                </div>
+                <button type="button" class="btn btn-sm btn-outline-secondary mt-2 add-value-btn">
+                    <i class="bi bi-plus-circle me-1"></i> Добавить значение
+                </button>
+            </div>
         </div>
     `;
-    
-    container.insertAdjacentHTML('beforeend', newFormHtml);
+
+    container.insertAdjacentHTML('beforeend', newCardHtml);
     totalForms.value = formIdx + 1;
+
+    // Инициализируем новую карточку
+    const newCard = container.querySelector(`[data-formset-index="${formIdx}"]`);
+    initAddValueBtn(newCard);
+
+    // Инициализируем удаление параметра
+    initParamDeleteToggle(newCard);
 });
 
-// Скрытие удаленных атрибутов
-document.addEventListener('change', function(e) {
-    if (e.target.type === 'checkbox' && e.target.name && e.target.name.includes('attributes') && e.target.name.includes('DELETE')) {
-        const form = e.target.closest('.attribute-form');
-        if (form) {
-            if (e.target.checked) {
-                form.style.opacity = '0.5';
-                form.style.textDecoration = 'line-through';
+// Функция для скрытия удаленного параметра
+function initParamDeleteToggle(card) {
+    const deleteCheckbox = card.querySelector('input[type="checkbox"][name$="-DELETE"]');
+    if (deleteCheckbox) {
+        deleteCheckbox.addEventListener('change', function() {
+            if (this.checked) {
+                card.style.opacity = '0.5';
+                card.style.textDecoration = 'line-through';
             } else {
-                form.style.opacity = '1';
-                form.style.textDecoration = 'none';
+                card.style.opacity = '1';
+                card.style.textDecoration = 'none';
             }
+        });
+    }
+}
+
+// Функция для сериализации значений параметров перед отправкой формы
+function serializeAttributeValues() {
+    /**
+     * Перед отправкой формы нужно сериализовать все значения параметров
+     * из инлайн input'ов в скрытые JSON поля для отправки на сервер
+     */
+    document.querySelectorAll('.attribute-card').forEach((card, idx) => {
+        // Получаем все инпуты с значениями внутри этой карточки
+        const valueInputs = card.querySelectorAll('.parameter-value-input');
+        const values = [];
+
+        valueInputs.forEach(input => {
+            const value = input.value.trim();
+            if (value) {
+                values.push(value);
+            }
+        });
+
+        // Создаем или обновляем скрытое поле JSON с названием attributes-{idx}-values
+        const jsonFieldName = `attributes-${idx}-values`;
+        let jsonField = document.querySelector(`input[name="${jsonFieldName}"]`);
+
+        if (!jsonField) {
+            jsonField = document.createElement('input');
+            jsonField.type = 'hidden';
+            jsonField.name = jsonFieldName;
+            card.appendChild(jsonField);
         }
+
+        jsonField.value = JSON.stringify(values);
+    });
+}
+
+// Инициализация при загрузке страницы
+document.addEventListener('DOMContentLoaded', function() {
+    initializeParameterCards();
+    document.querySelectorAll('.attribute-card').forEach(card => {
+        initParamDeleteToggle(card);
+    });
+
+    // Добавляем сериализацию значений перед отправкой формы
+    const form = document.querySelector('form');
+    if (form) {
+        form.addEventListener('submit', function(e) {
+            // Перед отправкой формы сериализуем все значения параметров
+            serializeAttributeValues();
+        });
     }
 });
 </script>

myproject/products/views/configurablekit_views.py

@@ -193,9 +193,9 @@ class ConfigurableKitProductCreateView(LoginRequiredMixin, CreateView):
                         if option_form.instance.pk:
                             option_form.instance.delete()
 
-                # Сохраняем атрибуты родителя
-                attribute_formset.instance = self.object
-                attribute_formset.save()
+                # Сохраняем атрибуты родителя - новый интерфейс
+                # Карточный интерфейс: значения приходят как инлайн input'ы
+                self._save_attributes_from_cards()
 
                 messages.success(self.request, f'Вариативный товар "{self.object.name}" успешно создан!')
                 return super().form_valid(form)
@@ -206,6 +206,78 @@ class ConfigurableKitProductCreateView(LoginRequiredMixin, CreateView):
             traceback.print_exc()
             return self.form_invalid(form)
 
+    def _save_attributes_from_cards(self):
+        """
+        Сохранить атрибуты из карточного интерфейса.
+
+        Каждая карточка содержит:
+        - attributes-X-name: название параметра
+        - attributes-X-position: позиция
+        - attributes-X-visible: видимость
+        - attributes-X-DELETE: помечен ли для удаления
+
+        Значения приходят как инлайн input'ы внутри параметра:
+        - Читаем из POST все 'parameter-value-input' инпуты
+        """
+        # Сначала удаляем все старые атрибуты
+        ConfigurableKitProductAttribute.objects.filter(parent=self.object).delete()
+
+        # Получаем количество карточек параметров
+        total_forms_str = self.request.POST.get('attributes-TOTAL_FORMS', '0')
+        try:
+            total_forms = int(total_forms_str)
+        except (ValueError, TypeError):
+            total_forms = 0
+
+        # Обрабатываем каждую карточку параметра
+        for idx in range(total_forms):
+            # Пропускаем если карточка помечена для удаления
+            delete_key = f'attributes-{idx}-DELETE'
+            if delete_key in self.request.POST and self.request.POST.get(delete_key):
+                continue
+
+            # Получаем название параметра
+            name = self.request.POST.get(f'attributes-{idx}-name', '').strip()
+            if not name:
+                continue
+
+            position = self.request.POST.get(f'attributes-{idx}-position', idx)
+            try:
+                position = int(position)
+            except (ValueError, TypeError):
+                position = idx
+
+            visible = self.request.POST.get(f'attributes-{idx}-visible') == 'on'
+
+            # Получаем все значения параметра из POST
+            # Они приходят как data в JSON при отправке формы
+            # Нужно их извлечь из скрытых input'ов или динамически созданных
+
+            # Способ 1: Получаем все значения из POST которые относятся к этому параметру
+            # Шаблон: 'attr_{idx}_value_{value_idx}' или просто читаем из скрытого JSON поля
+
+            # Пока используем упрощённый подход:
+            # JavaScript должен будет отправить значения в скрытом поле JSON
+            # Формат: attributes-X-values = ["value1", "value2", "value3"]
+
+            values_json = self.request.POST.get(f'attributes-{idx}-values', '[]')
+            import json
+            try:
+                values = json.loads(values_json)
+            except (json.JSONDecodeError, TypeError):
+                values = []
+
+            # Создаём ConfigurableKitProductAttribute для каждого значения
+            for value_idx, value in enumerate(values):
+                if value and value.strip():
+                    ConfigurableKitProductAttribute.objects.create(
+                        parent=self.object,
+                        name=name,
+                        option=value.strip(),
+                        position=position,
+                        visible=visible
+                    )
+
     @staticmethod
     def _should_delete_form(form, formset):
         """Проверить должна ли форма быть удалена"""
@@ -310,8 +382,9 @@ class ConfigurableKitProductUpdateView(LoginRequiredMixin, UpdateView):
                         if option_form.instance.pk:
                             option_form.instance.delete()
 
-                # Сохраняем атрибуты родителя
-                attribute_formset.save()
+                # Сохраняем атрибуты родителя - новый интерфейс
+                # Карточный интерфейс: значения приходят как инлайн input'ы
+                self._save_attributes_from_cards()
 
                 messages.success(self.request, f'Вариативный товар "{self.object.name}" успешно обновлён!')
                 return super().form_valid(form)
@@ -322,6 +395,60 @@ class ConfigurableKitProductUpdateView(LoginRequiredMixin, UpdateView):
             traceback.print_exc()
             return self.form_invalid(form)
 
+    def _save_attributes_from_cards(self):
+        """
+        Сохранить атрибуты из карточного интерфейса.
+        См. копию этого метода в ConfigurableKitProductCreateView для подробностей.
+        """
+        # Сначала удаляем все старые атрибуты
+        ConfigurableKitProductAttribute.objects.filter(parent=self.object).delete()
+
+        # Получаем количество карточек параметров
+        total_forms_str = self.request.POST.get('attributes-TOTAL_FORMS', '0')
+        try:
+            total_forms = int(total_forms_str)
+        except (ValueError, TypeError):
+            total_forms = 0
+
+        # Обрабатываем каждую карточку параметра
+        for idx in range(total_forms):
+            # Пропускаем если карточка помечена для удаления
+            delete_key = f'attributes-{idx}-DELETE'
+            if delete_key in self.request.POST and self.request.POST.get(delete_key):
+                continue
+
+            # Получаем название параметра
+            name = self.request.POST.get(f'attributes-{idx}-name', '').strip()
+            if not name:
+                continue
+
+            position = self.request.POST.get(f'attributes-{idx}-position', idx)
+            try:
+                position = int(position)
+            except (ValueError, TypeError):
+                position = idx
+
+            visible = self.request.POST.get(f'attributes-{idx}-visible') == 'on'
+
+            # Получаем все значения параметра из POST
+            values_json = self.request.POST.get(f'attributes-{idx}-values', '[]')
+            import json
+            try:
+                values = json.loads(values_json)
+            except (json.JSONDecodeError, TypeError):
+                values = []
+
+            # Создаём ConfigurableKitProductAttribute для каждого значения
+            for value_idx, value in enumerate(values):
+                if value and value.strip():
+                    ConfigurableKitProductAttribute.objects.create(
+                        parent=self.object,
+                        name=name,
+                        option=value.strip(),
+                        position=position,
+                        visible=visible
+                    )
+
     @staticmethod
     def _should_delete_form(form, formset):
         """Проверить должна ли форма быть удалена"""

myproject/test_configurable_json.py

@@ -0,0 +1,177 @@
+#!/usr/bin/env python
+"""
+Тестовый скрипт для проверки что JSONField работает корректно
+в модели ConfigurableKitOption (с поддержкой тенанта).
+"""
+import os
+import django
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')
+django.setup()
+
+from products.models.kits import ConfigurableKitProduct, ConfigurableKitOption, ProductKit
+from django_tenants.utils import tenant_context
+from tenants.models import Client
+
+# Переходим в нужную схему (тенант)
+try:
+    client = Client.objects.get(schema_name='grach')
+    print(f"✅ Найден тенант: {client.name} (schema: {client.schema_name})\n")
+except Client.DoesNotExist:
+    print("❌ Тенант 'grach' не найден")
+    print("📝 Доступные тенанты:")
+    for c in Client.objects.all():
+        print(f"   - {c.name} ({c.schema_name})")
+    exit(1)
+
+# Весь тест в контексте тенанта
+with tenant_context(client):
+    print("=" * 70)
+    print("ТЕСТ: JSONField в ConfigurableKitOption")
+    print("=" * 70)
+
+    # Проверка 1: Создание вариативного товара
+    print("\n1️⃣ Проверка создания ConfigurableKitProduct...")
+    try:
+        configurable = ConfigurableKitProduct.objects.filter(name__icontains="тест").first()
+        if configurable:
+            print(f"   ✅ Найден существующий товар: {configurable.name}")
+        else:
+            configurable = ConfigurableKitProduct.objects.create(
+                name="Тестовый букет JSON",
+                sku="TEST-BUCKET-JSON",
+                description="Тестовый товар для проверки JSON атрибутов"
+            )
+            print(f"   ✅ Создан новый товар: {configurable.name}")
+    except Exception as e:
+        print(f"   ❌ Ошибка: {e}")
+        exit(1)
+
+    # Проверка 2: Создание вариантов с JSON атрибутами
+    print("\n2️⃣ Проверка создания ConfigurableKitOption с JSON атрибутами...")
+    try:
+        # Получаем первый комплект или создаём тестовый
+        kit = ProductKit.objects.filter(name__icontains="тест").first()
+        if not kit:
+            kit = ProductKit.objects.first()
+            if not kit:
+                print("   ⚠️  В базе нет ProductKit, пропускаем этот тест")
+                kit = None
+
+        if kit:
+            print(f"   ℹ️  Используем существующий комплект: {kit.name}")
+
+            # Проверяем есть ли уже вариант для этого комплекта
+            option = ConfigurableKitOption.objects.filter(
+                parent=configurable,
+                kit=kit
+            ).first()
+
+            if option:
+                print(f"   ℹ️  Вариант уже существует, обновляю атрибуты...")
+                # Обновляем существующий
+                option.attributes = {"length": "60", "color": "red"}
+                option.save()
+                print(f"   ✅ Обновлены атрибуты: {option.attributes}")
+            else:
+                # Создаём новый вариант с JSON атрибутами
+                option = ConfigurableKitOption.objects.create(
+                    parent=configurable,
+                    kit=kit,
+                    attributes={"length": "60", "color": "red"},
+                    is_default=True
+                )
+                print(f"   ✅ Создан вариант с JSON атрибутами:")
+                print(f"      - Parent: {option.parent.name}")
+                print(f"      - Kit: {option.kit.name}")
+                print(f"      - Attributes (JSON): {option.attributes}")
+                print(f"      - Type: {type(option.attributes)}")
+    except Exception as e:
+        print(f"   ❌ Ошибка: {e}")
+        import traceback
+        traceback.print_exc()
+        exit(1)
+
+    # Проверка 3: Получение и работа с JSON атрибутами
+    print("\n3️⃣ Проверка получения JSON атрибутов из БД...")
+    try:
+        options = ConfigurableKitOption.objects.filter(parent=configurable)
+        print(f"   ℹ️  Найдено {options.count()} вариант(ов)")
+
+        for idx, opt in enumerate(options, 1):
+            print(f"\n   Вариант {idx}:")
+            print(f"      - ID: {opt.id}")
+            print(f"      - SKU комплекта: {opt.kit.sku}")
+            print(f"      - Атрибуты (JSON): {opt.attributes}")
+            print(f"      - Тип данных: {type(opt.attributes)}")
+
+            # Проверяем доступ к ключам JSON
+            if opt.attributes:
+                if isinstance(opt.attributes, dict):
+                    print(f"      - Доступ к ключам JSON:")
+                    for key, value in opt.attributes.items():
+                        print(f"         • {key}: {value}")
+                    print(f"      ✅ JSON работает корректно!")
+                else:
+                    print(f"      ❌ Атрибуты не являются dict!")
+    except Exception as e:
+        print(f"   ❌ Ошибка: {e}")
+        import traceback
+        traceback.print_exc()
+        exit(1)
+
+    # Проверка 4: Фильтрация по JSON атрибутам (PostgreSQL)
+    print("\n4️⃣ Проверка фильтрации по JSON атрибутам...")
+    try:
+        # Попытка использовать JSON фильтрацию (работает в PostgreSQL)
+        # Для SQLite это может не работать
+        filtered = ConfigurableKitOption.objects.filter(
+            parent=configurable,
+            attributes__length="60"
+        )
+        print(f"   ℹ️  Попытка фильтрации по attributes__length='60'")
+        print(f"   ℹ️  Найдено результатов: {filtered.count()}")
+
+        if filtered.count() > 0:
+            print(f"   ✅ JSON фильтрация работает!")
+        else:
+            print(f"   ℹ️  JSON фильтрация может не поддерживаться в текущей БД")
+    except Exception as e:
+        print(f"   ℹ️  JSON фильтрация не поддерживается: {type(e).__name__}")
+
+    # Проверка 5: Сложные JSON структуры
+    print("\n5️⃣ Проверка сохранения сложных JSON структур...")
+    try:
+        complex_attrs = {
+            "length": "70",
+            "color": "white",
+            "quantity": 15,
+            "stems": ["rose1", "rose2", "rose3"],
+            "metadata": {
+                "fresh": True,
+                "days_available": 7
+            }
+        }
+
+        # Обновляем атрибуты сложной структурой
+        if options.exists():
+            opt = options.first()
+            opt.attributes = complex_attrs
+            opt.save()
+
+            # Проверяем что сохранилось правильно
+            opt_reloaded = ConfigurableKitOption.objects.get(pk=opt.pk)
+            print(f"   ✅ Сохранены сложные JSON атрибуты:")
+            print(f"      {opt_reloaded.attributes}")
+
+            # Проверяем вложенность
+            if opt_reloaded.attributes.get("metadata", {}).get("fresh"):
+                print(f"   ✅ Доступ к вложенным полям JSON работает!")
+    except Exception as e:
+        print(f"   ❌ Ошибка: {e}")
+        import traceback
+        traceback.print_exc()
+
+    print("\n" + "=" * 70)
+    print("✅ ВСЕ ТЕСТЫ ПРОЙДЕНЫ! JSONField работает корректно!")
+    print("=" * 70)

myproject/test_configurable_simple.py

@@ -0,0 +1,131 @@
+#!/usr/bin/env python
+"""
+Prostoy test skript dlya proverki ConfigurableKitOptionAttribute
+bez Unicode simvolov
+"""
+import os
+import sys
+import django
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')
+django.setup()
+
+from products.models.kits import (
+    ConfigurableKitProduct,
+    ConfigurableKitOption,
+    ConfigurableKitProductAttribute,
+    ConfigurableKitOptionAttribute,
+    ProductKit
+)
+from django_tenants.utils import tenant_context
+from tenants.models import Client
+
+try:
+    client = Client.objects.get(schema_name='grach')
+    print(f"OK: Found tenant: {client.name} (schema: {client.schema_name})\n")
+except Client.DoesNotExist:
+    print("ERROR: Tenant 'grach' not found")
+    print("Available tenants:")
+    for c in Client.objects.all():
+        print(f"   - {c.name} ({c.schema_name})")
+    sys.exit(1)
+
+with tenant_context(client):
+    print("=" * 70)
+    print("TEST: ConfigurableKitOptionAttribute M2M Model")
+    print("=" * 70)
+
+    # Test 1: Check models exist
+    print("\n1. Checking if models exist...")
+    try:
+        # Try to get a ConfigurableKitProduct
+        products = ConfigurableKitProduct.objects.filter(name__icontains="test").first()
+        if products:
+            print(f"   OK: Found ConfigurableKitProduct: {products.name}")
+        else:
+            print("   INFO: No test ConfigurableKitProduct found")
+
+        # Check ConfigurableKitProductAttribute exists
+        attrs = ConfigurableKitProductAttribute.objects.all()
+        print(f"   OK: ConfigurableKitProductAttribute model exists. Count: {attrs.count()}")
+
+        # Check ConfigurableKitOptionAttribute exists
+        opt_attrs = ConfigurableKitOptionAttribute.objects.all()
+        print(f"   OK: ConfigurableKitOptionAttribute model exists. Count: {opt_attrs.count()}")
+    except Exception as e:
+        print(f"   ERROR: {e}")
+        import traceback
+        traceback.print_exc()
+        sys.exit(1)
+
+    # Test 2: Check M2M relationships
+    print("\n2. Checking M2M relationships...")
+    try:
+        # Get a sample variant
+        option = ConfigurableKitOption.objects.first()
+        if option:
+            print(f"   OK: Found option: {option.id} for parent: {option.parent.name}")
+
+            # Check if we can access attributes_set
+            attr_set = option.attributes_set.all()
+            print(f"   OK: Can access attributes_set. Count: {attr_set.count()}")
+
+            # Check if we can reverse access
+            if attr_set.exists():
+                opt_attr = attr_set.first()
+                print(f"   OK: Can access option_attr.option: {opt_attr.option.id}")
+                print(f"   OK: Can access option_attr.attribute: {opt_attr.attribute.id}")
+        else:
+            print("   INFO: No ConfigurableKitOption found")
+    except Exception as e:
+        print(f"   ERROR: {e}")
+        import traceback
+        traceback.print_exc()
+        sys.exit(1)
+
+    # Test 3: Check form validation logic
+    print("\n3. Checking form validation setup...")
+    try:
+        from products.forms import ConfigurableKitOptionForm
+
+        # Create a test form with instance
+        option = ConfigurableKitOption.objects.filter(
+            parent__parent_attributes__isnull=False
+        ).first()
+
+        if option:
+            form = ConfigurableKitOptionForm(instance=option)
+            print(f"   OK: Form created for option with parent: {option.parent.name}")
+
+            # Check dynamically generated fields
+            dynamic_fields = [f for f in form.fields if f.startswith('attribute_')]
+            print(f"   OK: Found {len(dynamic_fields)} dynamic attribute fields:")
+            for field_name in dynamic_fields:
+                print(f"      - {field_name}")
+        else:
+            print("   INFO: No option with parent attributes found")
+    except Exception as e:
+        print(f"   ERROR: {e}")
+        import traceback
+        traceback.print_exc()
+        sys.exit(1)
+
+    # Test 4: Check view integration
+    print("\n4. Checking view imports...")
+    try:
+        from products.views.configurablekit_views import (
+            ConfigurableKitProductCreateView,
+            ConfigurableKitProductUpdateView
+        )
+        print("   OK: Views imported successfully")
+        print("   OK: ConfigurableKitProductCreateView available")
+        print("   OK: ConfigurableKitProductUpdateView available")
+    except Exception as e:
+        print(f"   ERROR: {e}")
+        import traceback
+        traceback.print_exc()
+        sys.exit(1)
+
+    print("\n" + "=" * 70)
+    print("OK: ALL TESTS PASSED! Implementation is ready for testing.")
+    print("=" * 70)

myproject/test_template_syntax.py

@@ -0,0 +1,32 @@
+#!/usr/bin/env python
+"""
+Test template syntax without errors
+"""
+import os
+import sys
+import django
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')
+django.setup()
+
+from django.template import Template, Context
+
+# Test if the template syntax is valid
+try:
+    # Minimal template to check syntax
+    test_template = """
+    {% for field in form %}
+        {% if "attribute_" in field.name %}
+            <div>{{ field.label }}</div>
+        {% endif %}
+    {% endfor %}
+    """
+
+    t = Template(test_template)
+    print("OK: Template syntax is valid!")
+
+except Exception as e:
+    print(f"ERROR: {e}")
+    import traceback
+    traceback.print_exc()
+    sys.exit(1)

myproject/test_workflow.py

@@ -0,0 +1,172 @@
+#!/usr/bin/env python
+"""
+Workflow test: Create a full configurable product with attributes and variants
+"""
+import os
+import sys
+import django
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')
+django.setup()
+
+from products.models.kits import (
+    ConfigurableKitProduct,
+    ConfigurableKitOption,
+    ConfigurableKitProductAttribute,
+    ConfigurableKitOptionAttribute,
+    ProductKit
+)
+from django_tenants.utils import tenant_context
+from tenants.models import Client
+from django.db import transaction
+
+try:
+    client = Client.objects.get(schema_name='grach')
+    print(f"Found tenant: {client.name}\n")
+except Client.DoesNotExist:
+    print("Tenant 'grach' not found")
+    sys.exit(1)
+
+with tenant_context(client):
+    print("=" * 70)
+    print("WORKFLOW TEST: Complete ConfigurableKitProduct Creation")
+    print("=" * 70)
+
+    # Step 1: Create ConfigurableKitProduct
+    print("\n[1] Creating ConfigurableKitProduct...")
+    with transaction.atomic():
+        try:
+            # Delete old test products
+            ConfigurableKitProduct.objects.filter(name__icontains="workflow").delete()
+
+            product = ConfigurableKitProduct.objects.create(
+                name="Workflow Test Product",
+                sku="WORKFLOW-TEST-001",
+                description="Test product for workflow validation"
+            )
+            print(f"    OK: Created product: {product.name} (ID: {product.id})")
+        except Exception as e:
+            print(f"    ERROR: {e}")
+            import traceback
+            traceback.print_exc()
+            sys.exit(1)
+
+    # Step 2: Create attributes with values
+    print("\n[2] Creating product attributes...")
+    try:
+        # Delete old attributes
+        ConfigurableKitProductAttribute.objects.filter(parent=product).delete()
+
+        attrs_data = [
+            ("Dlina", ["50", "60", "70"]),
+            ("Упаковка", ["BEZ", "V_UPAKOVKE"])
+        ]
+
+        created_attrs = {}
+        for attr_name, values in attrs_data:
+            print(f"    Creating attribute: {attr_name}")
+            created_attrs[attr_name] = []
+
+            for pos, value in enumerate(values):
+                attr = ConfigurableKitProductAttribute.objects.create(
+                    parent=product,
+                    name=attr_name,
+                    option=value,
+                    position=pos,
+                    visible=True
+                )
+                created_attrs[attr_name].append(attr)
+                print(f"       - Created value: {value}")
+
+        print(f"    OK: Created {len(created_attrs)} attribute(s)")
+    except Exception as e:
+        print(f"    ERROR: {e}")
+        import traceback
+        traceback.print_exc()
+        sys.exit(1)
+
+    # Step 3: Get or create ProductKits
+    print("\n[3] Getting ProductKits for variants...")
+    try:
+        kits = ProductKit.objects.all()[:3]
+        if kits.count() == 0:
+            print("    WARNING: No ProductKit found in database")
+            print("    INFO: Skipping variant creation (need ProductKits in DB)")
+            print("\n    To complete testing:")
+            print("    1. Create some ProductKit objects in admin")
+            print("    2. Then run this script again")
+        else:
+            print(f"    OK: Found {kits.count()} ProductKit(s)")
+            for kit in kits:
+                print(f"       - {kit.name} (SKU: {kit.sku})")
+
+            # Step 4: Create variants with attribute values
+            print("\n[4] Creating ConfigurableKitOption variants...")
+            try:
+                # Delete old options
+                ConfigurableKitOption.objects.filter(parent=product).delete()
+
+                variant_configs = [
+                    (kits[0], created_attrs["Dlina"][0], created_attrs["Упаковка"][0], True),  # 50, BEZ, default
+                    (kits[1], created_attrs["Dlina"][1], created_attrs["Упаковка"][1], False),  # 60, V_UPAKOVKE
+                    (kits[2], created_attrs["Dlina"][2], created_attrs["Упаковка"][0], False),  # 70, BEZ
+                ]
+
+                for kit, dlina_attr, upakovka_attr, is_default in variant_configs:
+                    option = ConfigurableKitOption.objects.create(
+                        parent=product,
+                        kit=kit,
+                        is_default=is_default
+                    )
+                    print(f"    Created variant {option.id} for kit: {kit.name}")
+
+                    # Create M2M relationships
+                    ConfigurableKitOptionAttribute.objects.create(
+                        option=option,
+                        attribute=dlina_attr
+                    )
+                    ConfigurableKitOptionAttribute.objects.create(
+                        option=option,
+                        attribute=upakovka_attr
+                    )
+                    print(f"       - Linked attributes: Dlina={dlina_attr.option}, Upakovka={upakovka_attr.option}")
+
+                print(f"    OK: Created {len(variant_configs)} variant(s)")
+            except Exception as e:
+                print(f"    ERROR: {e}")
+                import traceback
+                traceback.print_exc()
+                sys.exit(1)
+
+            # Step 5: Verify data retrieval
+            print("\n[5] Verifying variant data...")
+            try:
+                options = ConfigurableKitOption.objects.filter(parent=product)
+                print(f"    Found {options.count()} variant(s)")
+
+                for opt in options:
+                    print(f"\n    Variant {opt.id}:")
+                    print(f"       - Kit: {opt.kit.name}")
+                    print(f"       - Default: {opt.is_default}")
+
+                    # Get attributes through M2M
+                    opt_attrs = opt.attributes_set.all()
+                    print(f"       - Attributes ({opt_attrs.count()}):")
+                    for opt_attr in opt_attrs:
+                        print(f"         * {opt_attr.attribute.name} = {opt_attr.attribute.option}")
+
+                print("\n    OK: All data retrieves correctly")
+            except Exception as e:
+                print(f"    ERROR: {e}")
+                import traceback
+                traceback.print_exc()
+                sys.exit(1)
+    except Exception as e:
+        print(f"    ERROR: {e}")
+        import traceback
+        traceback.print_exc()
+        sys.exit(1)
+
+    print("\n" + "=" * 70)
+    print("OK: WORKFLOW TEST COMPLETED SUCCESSFULLY!")
+    print("=" * 70)