Как создать каталог на WooCommerce. Выводим все данные на карту OpenStreetMap



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

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

В этом видео, мы выведем все данные о домах на общую карту OpenStreetMap.

Выводить мы будем не все товары (дома), а только те, у которых есть поле Leaflet Map Field (location).

Скачать архив темы с изменениями отсюда

01:09 В начале мы удалим заголовок Магазин с главной страницы товаров

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

Также мы добавим в него код, отвечающий за поддержку данных плагина интернет-магазина WooCommerce в нашем шаблоне.

04:46 Теперь создаем новый файл шаблона страницы page-osmmap.php на основе кода из файла page.php родительской темы Astra.

06:55 Создаем новую страницу «Дома на карте OpenStreetMap» и выбираем для неё наш шаблон OpenStreetMap New.

07:52 Выводим данные о всех товарах (домах) на нашу новую страницу.

10:56 Выводим только те данные, у которых есть поле Leaflet Map Field (location).

14:10 Организуем вывод карты OpenStreetMap с метками.

19:31 В балун, открывающийся при клике на метке, добавляем данные о расстоянии в км. от МКАД и цене.

26:10 Далее для ускорения загрузки карты, подключаем скрипт кластеризации Marker Clustering plugin for Leaflet https://github.com/Leaflet/Leaflet.markercluster

43:18 Выводим в балуне другие дополнительные параметры (площадь дома, площадь участка, этажность).

45:50 Выводим в балуне название категории товара (направление).

Посмотрите результат работы «Дома на карте OpenStreetMap»

В следующем видео мы выведем все остальные товары (дома) из каталога на Яндекс карту.

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