Как добавить несколько товаров в Shopify корзину одним кликом? / Хабр
Недавно я писал конфигуратор в Shopify и решил поделиться тем, как добавить несколько товаров в Шопифай корзину. Я находил не так много материалов по этому вопросу, тем более на русском языке.
Прикрепляю скринкаст того, что можно сделать при помощи этого. Но применений довольно много, не только конфигуратор. В скринкасте я добавил 6 товаров по одному клику на “Add to cart” кнопку. Но до лимита в количестве добавляемых товаров я не дошёл, может их и нет.
Cart API
Чтобы добавить в корзину несколько товаров, вам необходимо отправить в Cart API объект items с идентификатором(id) продукта и количеством(quantities) товара. На скриншоте ниже я добавляю один товар по клику.
Подготовка items объекта для API
Но обязательно отправляйте идентификатор продукта вместо идентификатора варианта, если у вашего продукта есть варианты, иначе будет ошибка.
Так должен выглядеть отправляемый объект:
items: [
{
id: 36110175633573,
quantity: 2
}
]
Пример того, как можно сделать fetch запрос. Это не самая сложная версия такого запроса, но и не самая простая.
document.querySelectorAll(“form.configurator-form”).forEach((form) => {
form.addEventListener(“submit”, async (e) => {
e.preventDefault();
// Показываем спиннер загрузки
const loadingOverlays = document.querySelectorAll(“.loading-overlay”);
loadingOverlays.forEach((overlay) => overlay.classList.remove(“hidden”));
// Собираем данные товаров
const productData = selectedProducts.map((product) => ({
id: product.id,
quantity: 1,
variantId:
product.variantId && product.variantId !== product.id
? parseInt(product.variantId)
: undefined,
}));
const requestBody = {
items: productData,
};
// Добавляем товары в корзину
await fetch(`${window.Shopify.routes.root}cart/add.js`, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify(requestBody),
});
// Обновляем корзину
const res = await fetch(“/cart.json”);
const cart = await res.json();
// Обновляем число на корзине
document.querySelectorAll(“.cart-count-bubble”).forEach((el) => {
el.textContent = cart.item_count;
});
// Перенаправляем пользователя на страницу корзины
window.location.href = “https://habr.com/cart”;
});
});Заключение
Будьте внимательны когда перед вами встанет эта задача, там довольно много подводных камней. Например, если у товара нет вариантов, то ID в value нужно передавать вот так:
{{ product.selected_or_first_available_variant.id }}
Полный код передаваемого инпута будет выглядеть так:
Но если варианты есть, то уже так:
{{ product.id }}
Полный код похож на предыдущий input, просто value другое:
Вот такой небольшой трюк, который вы теперь знаете. И ещё теперь вы умеете добавлять в корзину несколько товаров. Хорошей разработки!
