Во-первых, мне всегда нравится публиковать исполняемые примеры, но, поскольку это смесь 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' }
]
}
]
}
Если у вас есть идентификатор или дескриптор продукта, вы можете вызвать в Shopify, чтобы получить дополнительную информацию о продукте, например обо всех назначенных ему вариантах и, следовательно, обо всех параметрах. Таким образом, чтобы перейти к другому варианту, вам нужно удалить идентификатор варианта из корзины и добавить другой, тот, который вы хотите. Вы можете использовать вызовы StorefrontAPI для получения информации о продукте. Как правило, продавец делает то, что вам нужно.
Когда вы рендерите корзину, вы также можете рендерить любой JS-код, который вам нужен, представляя продукты в корзине. Таким образом, вам не нужно делать никаких вызовов API, если вы знали, что хотите предлагать варианты переключения в самой корзине. Так почти никто не делает, но это не значит, что вы не можете.
После борьбы с этим весь день я, наконец, получил это. Для всех, кто когда-либо сталкивался с этим, вам нужно сделать что-то вроде этого.
Из шаблона корзины, 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
})();
Теперь для каждого свойства товара в корзине у вас есть варианты.
Прямо сейчас мне нужно использовать стандартный способ, но я согласен, что API витрины упростит этот путь. Есть ли способ получить информацию о продукте без API витрины? Корзина позволяет отправить запрос на выборку, у меня весь продукт преобразован в js, но ТОЛЬКО в шаблоне продукта. Если бы я знал это, когда только начинал, я бы начал с чистого API магазина и никогда не беспокоился о жидкости.