В product_detail.html:
{% расширяет 'partials/base.html'%} {%загрузка статики%} {% блокирует контент %} /* Базовое оформление */ HTML, тело { высота: 100%; ширина: 100%; маржа: 0; семейство шрифтов: «Робото», без засечек; } .контейнербокс { максимальная ширина: 1200 пикселей; маржа: 0 авто; отступ: 15 пикселей; дисплей: гибкий; } /* Столбцы */ .левая колонка { ширина: 65%; положение: относительное; } .правая колонка { ширина: 35%; поле сверху: 60 пикселей; } /* Левый столбец */ .левая колонка img { ширина: 70%; позиция: абсолютная; слева: 0; верх: 0; непрозрачность: 0; переход: все 0,3 секунды легкости; } .left-column img.active { непрозрачность: 1; } /* Правый столбец */ /* Описание продукта */ .Описание продукта { нижняя граница: сплошная 1 пиксель #E1E8EE; поле внизу: 20 пикселей; } .product-description интервал { размер шрифта: 12 пикселей; цвет: #358ED7; межбуквенный интервал: 1 пиксель; преобразование текста: верхний регистр; текстовое оформление: нет; } .product-description h1 { вес шрифта: 300; размер шрифта: 52px; цвет: #43484D; межбуквенный интервал: -2px; } .product-description p { размер шрифта: 16 пикселей; вес шрифта: 300; цвет: #86939E; высота строки: 24 пикселей; } /* Конфигурация продукта */ .продукт-цветовой диапазон, .cable-config интервал { размер шрифта: 14 пикселей; вес шрифта: 400; цвет: #86939E; поле внизу: 20 пикселей; отображение: встроенный блок; } /* Цвет продукта */ .product-color { поле внизу: 30 пикселей; } .color-выберите div { отображение: встроенный блок; } .color-choose input[type="radio"] { дисплей: нет; } .color-choose input[type="radio"] + диапазон меток { отображение: встроенный блок; ширина: 40 пикселей; высота: 40 пикселей; поле: -1px 4px 0 0; вертикальное выравнивание: по середине; курсор: указатель; радиус границы: 50%; } .color-choose input[type="radio"] + диапазон меток { граница: сплошная 2 пикселя #FFFFFF; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33); } .color-choose input[type="radio"]#red + диапазон меток { цвет фона: #C91524; } .color-choose input[type="radio"]#blue + диапазон меток { цвет фона: #314780; } .color-choose input[type="radio"]#black + диапазон меток { цвет фона: #323232; } .color-choose input[type="radio"]:checked + диапазон меток { фоновое изображение: URL (изображения/check-icn.svg); фоновый повтор: без повтора; фоновая позиция: центр; } /* Конфигурация кабеля */ .size-выберите { поле внизу: 20 пикселей; } .size-кнопка выбора { граница: сплошная 2 пикселя #E1E8EE; радиус границы: 6 пикселей; отступ: 13 пикселей 20 пикселей; размер шрифта: 14 пикселей; цвет: #5E6977; цвет фона: #fff; курсор: указатель; переход: все 0,5 с; } .кнопка выбора размера: наведите курсор, Кнопка выбора размера: активна, Кнопка .size-choose: фокус { граница: 2 пикселя, сплошная #86939E; контур: нет; } .size-конфигурация { нижняя граница: сплошная 1 пиксель #E1E8EE; поле внизу: 20 пикселей; } .size-config а { цвет: #358ED7; текстовое оформление: нет; размер шрифта: 12 пикселей; положение: относительное; поле: 10 пикселей 0; отображение: встроенный блок; } .size-config a:before { содержание: "?"; высота: 15 пикселей; ширина: 15 пикселей; радиус границы: 50%; граница: 2 пикселя сплошной rgba(53, 142, 215, 0,5); отображение: встроенный блок; выравнивание текста: по центру; высота строки: 16 пикселей; непрозрачность: 0,5; поле справа: 5 пикселей; } /* Цена продукта */ /*.цена продукта { дисплей: гибкий; выровнять-элементы: по центру; } .продукт-цена интервала { размер шрифта: 26 пикселей; вес шрифта: 300; цвет: #43474D; поле справа: 20 пикселей; }*/ .cart-btn { отображение: встроенный блок; цвет фона: #FFB6C1; радиус границы: 6 пикселей; размер шрифта: 16 пикселей; цвет: #FFFFFF; текстовое оформление: нет; отступ: 12 пикселей 30 пикселей; переход: все 0,5 с; } .cart-btn:hover { цвет фона: #ff0000; } .buynow-btn { отображение: встроенный блок; цвет фона: #FFB6C1; радиус границы: 6 пикселей; размер шрифта: 16 пикселей; цвет: #FFFFFF; текстовое оформление: нет; отступ: 12 пикселей 30 пикселей; переход: все 0,5 с; } .buynow-btn:hover { цвет фона: #ff0000; } /* Адаптивный */ @media (максимальная ширина: 940 пикселей) { .контейнер { гибкое направление: столбец; поле сверху: 60 пикселей; } .левый столбец, .правая колонка { ширина: 100%; } .левая колонка img { ширина: 300 пикселей; правильно: 0; верх: -65 пикселей; слева: начальный; } } @media (максимальная ширина: 535 пикселей) { .левая колонка img { ширина: 220 пикселей; верх: -85 пикселей; } } .цена продукта { дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; выравнивание текста: по центру; } .цена { размер шрифта: 24 пикселей; начертание шрифта: жирный; цвет: #333; /* Цвет цены */ поле внизу: 5 пикселей; } дель { цвет: #999; /* Цвет старой цены */ размер шрифта: 18 пикселей; } {% для p в p_image %}
{% конец для %}
{{p.vendor}} {{p.title}}
{{p.description}}
Цвет {% для c в цветах %} {% конец для %} {% для s в размерах %} Размеры {{s.name}} {% конец для %} Как настроить наушники
Новая цена: {{p.price}}
Старая цена: {{p.old_price}} Добавить в корзину Купить сейчас $(документ).ready(функция() { $('.color-choose input').on('click', function() { var ProductColor = $(this).attr('data-image'); $('.active').removeClass('активный'); $('.left-column img[data-image = ' + productColor + ']').addClass('active'); $(this).addClass('активный'); }); }); {% контента в конце блока %}
Я создал эту html-страницу с подробными сведениями о продукте, где я создал флажок (радио), но когда я нажимаю на флажки, он не работает В оригинальном шаблоне все работает отлично. Мои представления и модель также работают отлично.
Чтобы подробно рассмотреть мою проблему, перейдите по ссылке:
Вы можете видеть на видео, что когда я добавляю новый цвет в продукты, он работает (я имею в виду, что раньше на странице было четыре цвета, после добавления одного стало пять цветов), но когда я нажимаю на цвета, это происходит не меняя изображения.
Хотя я загрузил более одного изображения, вы можете увидеть его в видео ниже, перейдя по ссылке:
У меня также есть еще один вопрос: возможно ли это в css
.color-choose input[type="radio"]#red + диапазон меток { цвет фона: #C91524; } вместо #red, могу ли я поместить цвета, которые я создал, в панель администратора
