Shopify - обновить div с метаполем продукта при изменении варианта

Question

Я пытаюсь написать простой код, который вводит строку из метаполя варианта Shopify в div.

Проблема в том, что я знаю, как вызывать данные в жидкости, но я не могу назвать данные в формате JS. Каждый раз, когда я пытаюсь вставить данные в код через жидкость, они не возвращаются.

Вот код:

$('.single-option-selector').on('change', function(){
  let shipping_speed = {{ product.selected_or_first_available_variant.metafields.availability.type }}
  $('div.product-availability strong').html(shipping_speed);
});

Как преобразовать переменную жидкости в строку, которую можно использовать в файле JS?

Answer 1

У вас здесь происходит небольшое недоразумение. Я объясню это вам, и вы можете настроить свой код по мере необходимости.

Важный факт Жидкость наносится один раз. Shopify превращает всю жидкость в гигантскую HTML-строку, выгружает ее, и браузер отображает ее. Это не динамично.

Итак, давайте теперь предположим, что у вас есть ресурс Metafield, который вы прикрепили к каждому варианту. Поскольку вы не выгружаете их во время рендеринга, у вас нет шансов показать свои варианты ресурсов Metafield, когда клиент меняет вариант. Ваша единственная надежда - сбросить один, выбранный по умолчанию или первый вариант. Не достаточно хорош.

Итак, секрет для вас - создать простую структуру данных. Перебери свои варианты. Для каждого сохраните идентификатор варианта со значением метаполя. Теперь у вас есть хорошая ссылка на каждое значение, и у вас есть все это во время визуализации Liquid.

Итак, теперь в вашем Javascript слушателе изменений вариантов, когда меняется вариант, изучите уже созданную структуру данных, ища соответствующий идентификатор варианта. Когда вы найдете его, визуализируйте текст, который вы сохранили из метаполя.

Бинго. Ты гений. Веселитесь.