Shopify Вариант Цена теперь отображается правильно

Question

Кажется, это так просто, но по какой-то причине я не вижу леса за деревьями. Итак, у меня есть текущая ситуация в Снимок экрана 1, где я установил три различных варианта для продукта. Размеры продуктов указаны как ML ... но по какой-то причине на кнопке отображаются все 3 варианта вместо того, который выбран.

Код, который я использую, чтобы вытащить это в настоящее время:

{% if current_variant.available %}
    <button type="submit" name="add" class="border--none">
        <span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
            add to bag &nbsp; | &nbsp; 

        <strong>
          {% for variant in product.variants %}

            {{ variant.price | money_without_trailing_zeros }}

          {% endfor %}


          </strong>

      </span>

    </button>
{% else %}

Answer 1

То, что вы пытаетесь достичь, невозможно только с помощью жидкости. Liquid это просто язык шаблонов, который отображается на стороне сервера. Он не обновляется на стороне клиента.

Вы хотите отобразить цену в кнопке только для выбранного варианта, но Liquid не имеет информации об этом на стороне сервера, и вы просто l oop просматриваете цены всех доступные варианты. Следовательно, вы видите все цены в своей кнопке.

Чтобы исправить это, используйте первую доступную или выбранную альтернативную цену, используя Liquid, и обновите остаток, используя JavaScript на стороне клиента.

Возвращает объект варианта выбранного в данный момент варианта, если в URL имеется действительный параметр запроса? Если выбранного варианта нет, возвращается первый доступный вариант.

При этом ваш код будет выглядеть как

  <button type="submit" name="add" class="border--none">
    <span class="display--block padding--1 palette--background-color--green palette--color--white text-transform--uppercase letter-spacing--2px font-size--15px palette--color--white">
      add to bag &nbsp; | &nbsp; 
      <strong>
        {{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}
      </strong>
    </span>
  </button>

Затем измените цену с помощью JavaScript при изменении варианта , это зависит от вашей темы.

Дополнительная информация о Выбранный или первый доступный вариант