Лучший способ изменить CSS на основе значения в Shopify?

Question

Я создаю выбор образцов цвета для своих продуктов в Shopify. Образец отображается только в том случае, если имя варианта равно «Цвет». Это нормально и работает как следует.

Мне просто интересно, есть ли лучший способ назначить образец цвета вместо ручного ввода шестнадцатеричных кодов для каждого названия цвета.

На данный момент в моем файле product-template.liquid есть следующий код.

 <label for="ProductSelect-option-{{ option.name }}-{{ value | escape }}" id="swatch-{{ value }}"{% unless variant_label_state %} class="disabled"{% endunless %}/>

Таким образом, если значение цвета установлено на Red, тогда выходной идентификатор будет красным Swatch. Теперь мой вопрос заключается в том, что в CSS я думал только о том, чтобы набрать вручную:

#swatch-Red { background-color: red; } 

но я должен был бы сделать это для МНОГО цветов. Кто-нибудь может придумать более эффективный способ сделать это? Еще одна вещь, о которой следует помнить, это то, что у меня есть цвета, называемые «Gunmetal» и «Pewter». Это темные и светлые оттенки серого, и, очевидно, эти цвета не распознаются в CSS.

Любые предложения приветствуются!

Answer 1

Здесь есть несколько вариантов.

1) Плохая, которую используют многие премиальные темы

Используйте изображения для цветов, которые соответствуют названию варианта. Например, красный, и у вас будет изображение с именем red.jpg в папке с активами.

Мне не очень нравится это решение, так как вам требуется, чтобы клиент загружал изображение для каждого цвета, и вы заполняете папку ресурсов большим количеством изображений.

Плюсы:

• Вы можете добавить несколько цветов

Минусы:

• вы требуете администратора, чтобы войти в редактор кода для загрузки изображения
• Вы должны создать изображение для каждого цвета
• вы загромождаете папку с изображениями
• Администратор должен вызывать изображения определенным образом

2) Не очень хорошее решение, но лучше, чем 1)

Создайте навигацию, в которой вы можете установить название цвета в качестве заголовка ссылки и шестнадцатеричное значение в качестве URL ссылки.

Таким образом, с небольшим количеством жидкости вы сможете установить цвет для образца.

Плюсы:

• Вы можете добавить несколько цветов
• вы храните папку с активами в чистоте
• вы не создаете новые изображения для каждого цвета
• администратору не нужно изменять редактор тем

Минусы:

• вы потребовали от администратора ввести шестнадцатеричное значение вручную

3) Лучший подход

Создать раздел с блоками.

Каждый блок будет иметь поле color и поле text. Текстовое поле будет заполнителем для имени цвета.

Поэтому, когда вы зацикливаете свои варианты, вы берете значение цветового поля и применяете его к образцу.

Плюсы:

• красивый и динамичный способ создания дополнительных цветов
• хороший способ выбрать определенный цвет
• вы не создаете новые изображения
• вы не загромождаете папку с активами
• вам не требуется администратор для входа в редактор

Минусы:

• когда слишком много цветов, трудно найти правильный