Блог

Главная - Вопросы по программированию - Есть ли способ получить наложение изображения поверх выбранного переключателя в Shopify (Liquid)?

Есть ли способ получить наложение изображения поверх выбранного переключателя в Shopify (Liquid)?

#shopify #liquid

#Shopify #liquid

Вопрос:

Клиент хочет, чтобы я наложил изображение на выбранную радиокнопку, чтобы, например, при выборе размера Small вместо выделенной кнопки изображение отображалось на своем месте. Смотрите изображение ниже. Дайте мне знать!! пытался разобраться в этом около 5 дней!! Спасибо. введите описание изображения здесь

Ответ №1:

Похоже, что для этого просто потребуется немного продуманной структуры HTML / CSS.

Например:

 .product-option{
  position: relative;
  display: inline-block;
}

.product-option__input{
  display: none;
}


.product-option__label{
  padding: 0.25em 1.5em;
  display: inline-block;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 4px;
}

.product-option__input:checked ~ .product-option__label{
  /* Some nice styles to highlight the selected option? */
  background-image: url('/some-nice-background.png');
  color: transparent; /* If you want to make the text go away for some reason? */
  border-color: darkgreen;
  /* Etc. */
}

.product-option__input:checked  ~ .product-option__label:after{
  /* Maybe we want something that we can position independently? */
  position: absolute;
  content: '';
  border: 2px solid green;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: linear-gradient(-0.125turn, green, lightgreen);
}    
 <!--
In Liquid, this HTML would be generated with a forloop similar to the following:

{% for option in product.options_with_values %}
  <div class="product-option-wrapper">
  {% for value in option.values %}
    {% assign unique_option_id = 'option_' | append: product.id | append: '-' | append:  option.position | append: '-' | append: forloop.index %}
    
    <div class="product-option>
      <input class="product-option__input" id="{{ unique_option_id }}" name="{{ option.name }}" value="{{ value | escape }}" {% if value == option.selectd_value %}checked{% endif %} />
      <label class="product-option__label" for="{{ unique_option_id }}">
        <span class="product-option__text">{{ value }}</span>
      </label>
    </div>
    
  {% endfor %}
  </div>
{% endfor %}
-->

<div class="product-option">
  <input class="product-option__input" id="option1-small" type="radio" name="option1" value="small"/>
  <label class="product-option__label" for="option1-small">
    <span class="product-option__text">Small</span>
  </label>
</div>
<div class="product-option">
  <input class="product-option__input" id="option1-med" type="radio" name="option1" value="med"/>
  <label class="product-option__label" for="option1-med">
    <span class="product-option__text">Med</span>
  </label>
</div>
<div class="product-option">
  <input class="product-option__input" id="option1-lg" type="radio" name="option1" value="lg"/>
  <label class="product-option__label" for="option1-lg">
    <span class="product-option__text">Large</span>
  </label>
</div>
<!-- etc -->

Надеюсь, этого будет достаточно, чтобы вы начали и дали волю своему воображению во всех интересных вещах, которые вы можете сделать, используя всего лишь несколько простых HTML / CSS, работающих вместе 🙂