Как создать каталог на WooCommerce. Добавляем карты OpenStreetMap с помощью JS библиотеки Leaflet



Продолжаем работу над нашим каталогом домов из бруса в Подмосковье, с использованием плагина интернет-магазина WooCommerce.

Начало смотрите видео Как создать каталог на WooCommerce

Продолжение в видео Как создать каталог на WooCommerce продолжение

Вместо Яндекс карты, в записях каталога (товарах) можно использовать карту OpenStreetMap

А для удобного взаимодействия с ней, я буду использовать Leaflet — открытую JavaScript-библиотеку для интерактивных карт.

Для этого мы должны установить дополнение в виде специального поля для плагина Advanced Custom Fields — Advanced Custom Fields: Leaflet Map Field

Устанавливаем дополнительное поле Leaflet Map Field.

И настраиваем его в плагине Advanced Custom Fields в разделе Группы полей, для нашей группы Характеристики домов WooCommerce

Теперь при добавлении или редактировании нового товара (записи каталога домов), появилось новое поле с картой OpenStreetMap.

Добавляем новый объект или редактируем уже существующий.

После этого необходимо организовать вывод карты на странице с описанием дома.

Для этого редактируем файл шаблона functions.php и проверяем результат.

Пример страницы с картой OpenStreetMap

В следующем видео, мы выведем все дома с полем Leaflet Map на общую карту

Оставьте комментарий