Как добавить несколько товаров в Shopify корзину одним кликом?

Предисловие

Недавно я писал конфигуратор в Shopify и решил поделиться тем, как добавить несколько товаров в Шопифай корзину. Я находил не так много материалов по этому вопросу, тем более на русском языке.

Прикрепляю скринкаст того, что можно сделать при помощи этого. Но применений довольно много, не только конфигуратор. В скринкасте я добавил 6 товаров по одному клику на «Add to cart» кнопку. Но до лимита в количестве добавляемых товаров я не дошёл, может их и нет.

Cart API

Чтобы добавить в корзину несколько товаров, вам необходимо отправить в Cart API объект items с идентификатором(id) продукта и количеством(quantities) товара. На скриншоте ниже я добавляю один товар по клику.

Но обязательно отправляйте идентификатор продукта вместо идентификатора варианта, если у вашего продукта есть варианты, иначе будет ошибка.

Так должен выглядеть отправляемый объект:

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 = "/cart";     });   });

Заключение

Будьте внимательны когда перед вами встанет эта задача, там довольно много подводных камней. Например, если у товара нет вариантов, то ID в value нужно передавать вот так:

{{ product.selected_or_first_available_variant.id }}

Полный код передаваемого инпута будет выглядеть так:

 <input class="visually-hidden" type="radio" name="product" value={{ product.selected_or_first_available_variant.id }}>

Но если варианты есть, то уже так:

{{ product.id }}

Полный код похож на предыдущий input, просто value другое:

 <input class="visually-hidden" type="radio" name="product" value={{ product.id }}">

Вот такой небольшой трюк, который вы теперь знаете. И ещё теперь вы умеете добавлять в корзину несколько товаров. Хорошей разработки!