Как реализовать выбор склада самовывоза в карточке товара из МойСклад

Интеграция интернет-магазина с системой учёта «МойСклад» (МойСклад) позволяет автоматически подгружать остатки товаров на разных складах. Чтобы покупатель мог выбрать только тот склад, где товар есть в наличии, необходимо настроить выпадающий список в карточке товара. В этой статье разберём пошаговую реализацию с использованием API МойСклад и клиентского JavaScript.

Принцип работы выбора склада самовывоза

Покупатель видит в карточке товара выпадающий список (select) с названиями складов. Доступны для выбора только те склады, на которых количество товара больше нуля. После выбора склада информация передаётся в корзину и далее в оформление заказа как пункт самовывоза.

Шаг 1. Получение данных о складах и остатках через API МойСклад

Для получения списка складов используйте запрос к эндпоинту /api/remap/1.2/entity/store. Ответ содержит массив складов с их идентификаторами (id) и названиями (name).

Для получения остатков конкретного товара по складам используйте запрос к /api/remap/1.2/entity/assortment/{productId}/stock. В ответе будет массив stockByStore, где для каждого склада указано количество (quantity).

Шаг 2. Формирование выпадающего списка на стороне клиента

После загрузки страницы карточки товара выполните AJAX-запрос к вашему серверному скрипту (прокси), который объединяет данные о складах и остатках. Пример структуры ответа:

{
  "stores": [
    {"id": "store1", "name": "Склад на Ленина", "quantity": 5},
    {"id": "store2", "name": "Склад на Гагарина", "quantity": 0}
  ]
}

Затем динамически создайте элементы <option> для каждого склада, устанавливая атрибут disabled для складов с quantity = 0. Пример на JavaScript:

const select = document.getElementById('store-select');
stores.forEach(store => {
  const option = document.createElement('option');
  option.value = store.id;
  option.text = store.name;
  if (store.quantity === 0) {
    option.disabled = true;
  }
  select.appendChild(option);
});

Это гарантирует, что покупатель сможет выбрать только склад с наличием товара.

Шаг 3. Передача выбранного склада в корзину и оформление заказа

При изменении значения в выпадающем списке (событие change) сохраняйте выбранный ID склада в скрытое поле формы или в localStorage. При добавлении товара в корзину отправляйте этот ID вместе с остальными данными (количество, товарный ID).

На стороне сервера (например, PHP или Node.js) при создании заказа передайте выбранный склад как пункт самовывоза. В МойСклад это можно сделать через поле shipmentStore в объекте заказа (order) при использовании API.

Часто задаваемые вопросы (FAQ)

Как обновлять остатки в реальном времени?

Настройте периодический опрос API МойСклад (например, каждые 5 минут) или используйте вебхуки для получения уведомлений об изменении остатков. Обновляйте данные на странице без перезагрузки через setInterval или WebSocket.

Что делать, если товар есть на нескольких складах?

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

Как скрыть склады с нулевым остатком полностью?

Вместо атрибута disabled просто не добавляйте option для складов с quantity = 0. Список будет содержать только доступные варианты.

Как передать выбранный склад в CRM или 1С?

При создании заказа через API МойСклад укажите ID склада в поле store для каждой позиции товара. Это обеспечит корректное списание остатков.

Можно ли использовать готовые плагины для CMS?

Да, для популярных CMS (WordPress, OpenCart, 1С-Битрикс) существуют готовые модули интеграции с МойСклад, которые уже включают функционал выбора склада. Однако для нестандартных требований лучше написать собственную реализацию через API.