Лучший способ изменить CSS на основе значения в Shopify?
Я создаю набор образцов цвета для своих продуктов в Shopify. Образец отображается только в том случае, если имя варианта равно «Цвет». Это нормально и работает должным образом.
Мне просто интересно, есть ли лучший способ назначить цвет образца, чем вручную вводить шестнадцатеричные коды для каждого имени цвета.
На данный момент в моем файле product-template.liquid есть следующий код.
<label for = "ProductSelect-option-{{ option.name }}-{{ value | escape }}" id = "swatch-{{ value }}"{% unless variant_label_state %} class = "disabled"{% endunless %}/>
Таким образом, если значение цвета установлено на красный, то вывод идентификатора будет красным. Теперь мой вопрос в том, что в CSS единственный способ, о котором я думал в настоящее время, - это ввод вручную:
#swatch-Red { background-color: red; }
но мне пришлось бы сделать это для МНОГО цветов. Кто-нибудь может придумать более эффективный способ сделать это? Еще нужно иметь в виду, что у меня есть цвета, называемые «Gunmetal» и «Pewter». Это темные и светло-серые цвета, и очевидно, что эти цвета не распознаются в CSS.
Любые предложения приветствуются!
Ответы 1
Здесь есть несколько вариантов.
1) Плохая, которую используют многие премиальные темы
Используйте изображения для цветов, которые соответствуют названию варианта. Так, например, красный, и у вас будет изображение с именем red.jpg в папке с активами.
Мне не очень нравится это решение, так как вам требуется, чтобы клиент загружал изображение для каждого цвета, а вы заполняете папку с ресурсами большим количеством изображений.
Плюсы:
- вы можете добавить несколько цветов
Минусы:
- вам требуется, чтобы администратор зашел в редактор кода, чтобы загрузить изображение
- вы должны создать изображение для каждого цвета
- вы загромождаете папку с активами изображениями
- администратор должен вызывать изображения определенным образом
2) Не отличное решение, но лучше 1)
Создайте навигацию, в которой вы можете установить имя цвета в качестве заголовка ссылки и шестнадцатеричное значение в качестве URL-адреса ссылки.
Таким образом, с помощью небольшого количества жидкости вы сможете установить цвет образца.
Плюсы:
- вы можете добавить несколько цветов
- вы держите свою папку с активами в чистоте
- вы не создаете новые изображения для каждого цвета
- администратору не нужно изменять редактор темы
Минусы:
- вы потребовали, чтобы администратор ввел шестнадцатеричное значение вручную
3) Лучший подход
Создайте раздел с блоками.
Каждый блок будет иметь поле color и поле text. Текстовое поле будет заполнителем для названия цвета.
Поэтому, когда вы зацикливаете свои варианты, вы берете значение поля цвета и применяете его к образцу.
Плюсы:
- красивый и динамичный способ создания дополнительных цветов
- хороший способ выбрать определенный цвет
- вы не создаете новые образы
- вы не загромождаете папку с активами
- вам не требуется, чтобы администратор заходил в редактор
Минусы:
- когда цветов слишком много, трудно найти правильный
Вы назначаете цвет каждому названию цвета, например, White будет #ffffff, и этот цвет будет использоваться для КАЖДОГО варианта с этим цветом. Разделы на внутренних страницах сохраняют свои параметры, поэтому при добавлении цвета на страницу одного продукта этот параметр будет сохранен для каждого продукта. Таким образом, вы добавляете блок для каждого варианта цвета, и у вас будет доступ к этой информации на каждой странице продукта.
Спасибо, Дрип. Имеет смысл использовать секцию с блоками. Я не могу понять, как это будет работать с продуктом, потому что, если это блок, разве вам не придется назначать цвета каждому продукту? Или я здесь немного дурак? На данный момент, пока я не знаю, как реализовать с блоками, я вручную ввел каждый шестнадцатеричный код для каждого цвета, который мы продаем. Был очень ручной, но он работает. Было бы хорошо использовать блоки, как вы сказали, просто хотите понять, как это будет работать в этом сценарии?