Варианты доступа для каждого элемента корзины Shopify

Во-первых, мне всегда нравится публиковать исполняемые примеры, но, поскольку это смесь js и рендеринга жидкости на стороне сервера на shopify, я не могу получить работающий пример.

В shopify вы можете получить доступ к объекту product вот так {{ product }} из шаблона продукта.

Объект корзины имеет свойство items, которое представляет собой массив всех товаров в корзине. Каждый объект item в корзине отличается от объекта product. Объект product имеет список вариантов, а объект корзины item — нет.

Цель этого состоит в том, чтобы иметь возможность редактировать размер товара в корзине.

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

Причина, по которой это сложно, заключается в том, что когда вы получаете ответ на выборку объекта корзины, вы получаете product_id для каждого item в корзине. Однако вы не можете получить объект продукта, если вы не находитесь на странице продукта.

Просто, чтобы помочь визуализировать тележку, это что-то вроде этого:

{
  items: [
    {
      handle: 'product-handle',
      product_id: 123,
      variant_title: 'product variant'
    }
  ]
}

что нужно сделать, так это:

{
  items: [
    {
      handle: 'product-handle',
      product_id: 123,
      /**
       * to get this you need first access to the product object from the product 
       * template. You could convert the product to json with a filter
       * e.g. const product = {{ product | json }} but you don't have the 
       * opportunity to be on the product template each time you edit a cart item
      */
      variants: [
        { color: 'white', size: 's' },
        { color: 'white', size: 'm' }
      ]
    }
  ]
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
183
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если у вас есть идентификатор или дескриптор продукта, вы можете вызвать в Shopify, чтобы получить дополнительную информацию о продукте, например обо всех назначенных ему вариантах и, следовательно, обо всех параметрах. Таким образом, чтобы перейти к другому варианту, вам нужно удалить идентификатор варианта из корзины и добавить другой, тот, который вы хотите. Вы можете использовать вызовы StorefrontAPI для получения информации о продукте. Как правило, продавец делает то, что вам нужно.

Прямо сейчас мне нужно использовать стандартный способ, но я согласен, что API витрины упростит этот путь. Есть ли способ получить информацию о продукте без API витрины? Корзина позволяет отправить запрос на выборку, у меня весь продукт преобразован в js, но ТОЛЬКО в шаблоне продукта. Если бы я знал это, когда только начинал, я бы начал с чистого API магазина и никогда не беспокоился о жидкости.

dbzx10299 01.11.2022 20:48

Когда вы рендерите корзину, вы также можете рендерить любой JS-код, который вам нужен, представляя продукты в корзине. Таким образом, вам не нужно делать никаких вызовов API, если вы знали, что хотите предлагать варианты переключения в самой корзине. Так почти никто не делает, но это не значит, что вы не можете.

David Lazar 01.11.2022 23:23
Ответ принят как подходящий

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

Из шаблона корзины, cart.liquid

const cart = (() => {
  const cart = {{ cart | json }}
  const items = []
  let variants

  {% for item in cart.items %}
    item = {{ item | json }}
    variants = []

    {% for variant in item.product.variants %}
      variant = {{ variant | json }}
      variants.push(variant)
    {% endfor %}

    item.variants = variants
    items.push(item)
  {% endfor %}
  cart.items = items

  return cart
})();

Теперь для каждого свойства товара в корзине у вас есть варианты.

Другие вопросы по теме

Похожие вопросы

Почему моя переменная хранилища не загружается при монтировании моего функционального компонента?
Отображение массива строк и назначение их на вход
Как заставить диаграмму js отображать значения в реальном времени?
Срез или подстрока в поисковом запросе mongoose, чтобы он соответствовал заданному параметру, возвращаемому пустым
TypeScript: как добавить несколько элементов в массив с одинаковыми значениями
Слишком много повторных рендеров. react ограничивает количество рендеров, чтобы предотвратить бесконечный цикл, даже если функции в порядке
Сеанс AWS/Учетные данные/Аутентификация
Как выбрать div с именем класса, которое заканчивается определенной строкой, и сохранить текстовое содержимое?
Устаревший Gradle в React Native
Не удалось выполнить установку npm, показывая ошибку «Неопределенная переменная standalone_static_library в binding.gyp» и ошибку node-sass chokidar