🗺️ Урок 4. Поиск торговых точек и контроль менеджеров через 2ГИС

Иконка: 🗺️
Для кого: Менеджеры отдела продаж
Цель: Находить потенциальных покупателей (торговые точки) по всей РФ, используя API 2ГИС, и фиксировать результат.

4.1. Получение API-ключа 2ГИС

1. Зарегистрироваться на dev.2gis.ru.

2. Создать проект → получить ключ (API key).
   Бесплатный тариф: 10 000 запросов/сутки — хватит на ~200 поисковых сессий менеджера.
   При активной работе 5 менеджеров (50 000 запросов/день) перейти на платный тариф «Бизнес» (~5 000 ₽/мес).

4.2. Работа менеджера на скрытой странице /manager-panel

На этой странице размещена форма поиска. Код для вставки (через редактор блоков или через PHP в файле page-manager-panel.php):

<h2>Поиск торговых точек через 2ГИС</h2>
<input type="text" id="city" placeholder="Город" value="Москва">
<input type="text" id="query" placeholder="Что ищем? (магазин, оптовая база, рынок)">
<button onclick="search2gis()">Найти</button>
<div id="results"></div>

<script>
const apiKey = 'ВАШ_КЛЮЧ_2ГИС';
async function search2gis() {
    const city = document.getElementById('city').value;
    const query = document.getElementById('query').value;
    const url = `https://catalog.api.2gis.com/3.0/items?q=${query}&region=${city}&key=${apiKey}&fields=items.point,items.contact_groups,items.org`;
    const resp = await fetch(url);
    const data = await resp.json();
    let html = '';
    for (let item of data.result.items) {
        html += `<div class="point-card">
            <strong>${item.name}</strong><br>
            Адрес: ${item.address_name}<br>
            Телефон: ${item.contact_groups?.[0]?.contacts?.[0]?.value || 'нет'}<br>
            <button onclick="addToCRM('${item.name}', '${item.address_name}')">Добавить в CRM</button>
        </div>`;
    }
    document.getElementById('results').innerHTML = html;
}

function addToCRM(name, address) {
    // Отправка AJAX в WordPress для сохранения в кастомный тип записи «Торговая точка»
    fetch('/wp-json/ecoset/v1/add_outlet', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name, address, manager: current_user_login})
    });
}
</script>

4.3. Контроль действий менеджеров (для руководителя)

• Каждое нажатие «Добавить в CRM» сохраняется в БД WordPress в отдельной таблице ecoset_crm_log с полями: manager, point_name, address, timestamp.

• Страница отчёта для руководителя: /manager-report — выводит таблицу «Кто сколько точек нашёл за сегодня/неделю».

4.4. Что делать, если 2ГИС не находит точку в маленьком городе?

Использовать резервный источник: API Яндекс.Карт (поиск организаций через Geocoder) или Google Places API.
Настроить fallback: если ответ 2ГИС пустой, автоматически выполнить такой же запрос к Яндекс.Картам (ключ получить в кабинете Яндекс.Облака).

Ваш HTML-код уже работает с Яндекс.Картами JavaScript API и в бесплатной версии выполняет следующие действия:

• Показывает интерактивную карту с элементами управления (масштаб, тип карты).

• Отображает собственные метки (Placemark) для складов и перевозчиков с заданными координатами.

• Ищет организации через геокодер (вкладка «Поиск») по текстовому запросу и городу, фильтрует по радиусу.

• Строит автомобильные маршруты между тремя точками: склад → перевозчик → адрес доставки, с расчётом времени и расстояния.

• Показывает карточки в правой панели, клик по которым центрирует карту и открывает балун.

🆓 Бесплатные лимиты и возможности

Яндекс предоставляет JavaScript API бесплатно, но с суточными ограничениями на серверные операции (геокодирование и маршрутизация):

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

📍 Как наносить адреса складов на карту

Сейчас адреса складов жёстко прописаны в массиве stores внутри скрипта. Каждый склад содержит уже готовые координаты (lat, lon) и текстовый адрес. Это рабочий, но статичный способ.
Вот как можно добавлять новые склады разными методами.

1. Добавление вручную (редактирование кода)

Просто дополните массив stores новым объектом:

const stores = [
    // ...существующие записи...
    { id: 7, name: "Новый склад", address: "г. Ессентуки, ул. Новая, 10", lat: 44.045, lon: 42.860, phone: "+7 (999) 111-22-33", hours: "9–18" }
];

Координаты можно узнать, кликнув правой кнопкой по точке на Яндекс.Картах и выбрав «Копировать координаты».

2. Геокодирование адреса (превратить адрес в координаты)

Если у вас есть текстовый адрес, а координаты неизвестны, можно написать функцию, которая по нажатию кнопки сама поставит метку:

async function addStoreByAddress(address, name) {
    const res = await ymaps.geocode(address, { results: 1 });
    const obj = res.geoObjects.get(0);
    if (obj) {
        const coords = obj.geometry.getCoordinates();
        const newStore = {
            id: stores.length + 1,
            name: name,
            address: address,
            lat: coords[0],
            lon: coords[1],
            phone: "",
            hours: ""
        };
        stores.push(newStore);
        // Добавляем метку на карту
        const placemark = new ymaps.Placemark(coords, {
            balloonContent: `<strong>${name}</strong><br/>${address}`,
        }, { preset: "islands#greenWarehouseIcon" });
        myMap.geoObjects.add(placemark);
        currentPlacemarks.stores.push(placemark);
        // Обновить список во вкладке «Склады» при необходимости
    }
}

Этот метод использует лимит геокодера (1 запрос на адрес).

3. Загрузка из внешнего источника (файл, сервер, WordPress)

Более гибко — хранить список складов в JSON-файле или в настройках WordPress. При загрузке страницы вы можете запрашивать данные через fetch:

fetch('/wp-content/uploads/sklady.json')
    .then(r => r.json())
    .then(data => {
        stores = data;
        addStoreAndCarrierPlacemarks();
    });

Тогда любой менеджер сможет редактировать JSON-файл (или через админку WordPress) без правки HTML.

4. Использовать существующую вкладку «Поиск»

Вы уже умеете искать организации вокруг города. Можно добавить кнопку «Добавить в мои склады» рядом с каждой найденной точкой. По клику координаты и адрес будут сохраняться в массив stores (или отправляться на сервер). Это превратит поиск в инструмент для пополнения базы складов.

⚠️ Важное примечание по ключу

В коде указан ключ fd5fc2e2-aa35-42ab-8ca9-92e561ee8553. Ранее вы говорили, что у него ограничение по HTTP Referer для доменов semeynyy-domostroy.ru и его поддоменов. Если вы откроете эту страницу на ecoset‑kmv.ru, карта не загрузится — будет ошибка доступа. Убедитесь, что либо:

• используете ключ без ограничений (первый ключ) для этого домена,

• или добавили ecoset-kmv.ru в список разрешённых Referer для ключа fd5fc2e2....

Иначе менеджеры на основном сайте не увидят карту.

📈 Что ещё можно добавить в бесплатной версии

• Кластеризация меток (если складов станет много) — через Clusterer.

• Пользовательские балуны с кнопками «Заказать доставку» или «Показать товары».

• Поиск ближайшего склада к клиенту — по геолокации браузера.

• Сохранение истории маршрутов в localStorage.

Если понадобится внедрить любое из этих улучшений, я готов помочь с кодом