Используя в моей теме вариант.inventory_policy продуктов. js .liquid файл - PullRequest
Новая
       41

Используя в моей теме вариант.inventory_policy продуктов. js .liquid файл

0 голосов
/ 12 марта 2020

Я хочу использовать variant.inventory_policy продуктов в моем файле theme.js.liquid, в пределах 

productPage: function (options) {

}

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

Все, что я пробовал, в результате дает 'undefined'. Я думаю, мне нужно как-то передать его из функции продукта в качестве селектора или что-то? Я просто запутался, как это сделать точно ... Кто-нибудь может помочь, пожалуйста?

Спасибо

1 Ответ

0 голосов
/ 12 марта 2020

Вы правы относительно той части, в которой вам необходимо как-то передать эту информацию. Информация о варианте не доступна автоматически в JavaScript. Для решения этой проблемы существует 3 подхода.

  1. Создание глобального JS объекта
  2. Отображение данных внутри HTML с помощью Liquid
  3. Использование Shopify AJAX API

Для первого подхода просто добавьте приведенный ниже код в ваш product.liquid и получите доступ к информации через typesInfo объект в JavaScript. 

<script>
let variantsInfo = {
    {%- for variant in product.variants -%}     
        {{variant.id}} : "{{ variant.inventory_policy}}",
    {%- endfor -%}
}
</script>

Для второго подхода визуализировать данные внутри некоторого HTML div и скрыть их с помощью CSS. Затем, при загрузке страницы, получите эту информацию в JavaScript, указав соответствующий селектор CSS для скрытого div и сделайте что-нибудь в соответствии с вашими требованиями.

Другое возможное решение - использовать Shopify AJAX API , При событии загрузки страницы сгенерируйте AJAX вызов для выбора продукта по дескриптору продукта. В возвращенном ответе будут все данные вариантов, которые также будут содержать ваш обязательный атрибут inventory_policy . Затем вы можете использовать его для отображения любой информации, которую вы хотите. Пример AJAX звонка будет выглядеть как 

jQuery.getJSON('/products/red-rain-coat.js', function(product) {
  console.log(product);
} );

Подробнее о Shopify AJAX API и получении продуктов через AJAX.

...