Содержание

Содержание
Предисловие
Пример использования
Cart API
Заключение
Ресурсы

Предисловие

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

Пример использования

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

Cart API

Сначала давайте разберёмся, что такое Cart API.

API корзины позволяет расширению пользовательского интерфейса взаимодействовать с содержимым корзины POS, включая скидки в корзине, позиции и клиентов. Этот API включает в себя множество функций для добавления и удаления содержимого корзины, а также объект, на который можно подписаться, который позволяет расширению пользовательского интерфейса получать обновления корзины.

Добавление товара

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

Пример отправляемого объекта

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

Отправляемый объект

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

items: [ 
 { 
  id: 36110175633573, 
    quantity: 2 
  } 
]

Пример fetch запроса

Пример того, как можно сделать fetch запрос. Это не самая сложная версия такого запроса, но и не самая простая.

script.js

js

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 }}">

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

Ресурсы