Виджет карты для Shopify

Почему секция темы лучше приложения Shopify

Большинство «приложений с картой» требуют установки, доступа к данным вашего магазина и месячной платы — и всё это ради одного iframe. Вот честная альтернатива: один файл Liquid, который живёт в вашей собственной теме. Он не запрашивает никаких прав к магазину, не добавляет скриптов на страницы, никуда ничего не отправляет и ничего не стоит. Единственные внешние запросы ваших посетителей — это изолированный iframe карты с whatismylocation.ai и его плитки OpenStreetMap. Никаких cookie Google, никакого груза из баннеров согласия. А если сервис вдруг окажется недоступен, iframe просто ничего не покажет и не сломает страницу. Удалите файл секции — и от неё не останется ни следа.

Скачать whatismylocation-shopify-sections.zip — обе секции плюс README, всего несколько килобайт. Дальше следуйте шагам установки ниже.

Установка примерно за две минуты

Две части: один раз вставить файл, а потом пользоваться им как любой встроенной секцией.

Вставьте файл: админка Shopify ▸ Интернет-магазин ▸ Темы ▸ ⋯ ▸ Изменить код. В левой панели в разделе Sections нажмите Добавить новую секцию, назовите её whatismylocation-map, удалите содержимое-заготовку и вставьте всё содержимое файла whatismylocation-map.liquid — блок {% schema %} внизу как раз и создаёт панель настроек, поэтому он должен попасть в файл. Сохраните.

Пользуйтесь: откройте редактор темы (Настроить), перейдите на страницу контактов (или на любую другую), нажмите Добавить секцию и выберите WhatIsMyLocation Map. Панель настроек появится слева. Пока вы не введёте координаты, секция показывает дружелюбную заглушку с подсказкой, что именно ей нужно.

Координаты возьмите в конструкторе встраивания карты — введите адрес, а затем перетащите метку на ваш вход, прежде чем копировать. Секция передаёт ваши итоговые координаты, поэтому метка потом уже не сдвинется.

Филиалы — это блоки

Магазинам с несколькими адресами достаётся самое интересное: в редакторе темы каждый филиал — это блок. Нажмите Добавить филиал, укажите широту, долготу, название и адрес; порядок меняется перетаскиванием (до 10 филиалов). Карта автоматически подстраивается под все филиалы, метки нумеруются по списку, а посетители получают панель адресов — аккордеон рядом с картой на компьютере и полосу карточек со свайпом на телефоне, с маршрутом для каждого филиала и необязательными значками «Открыть в Google Maps / Apple Maps». Раскладка панели (auto, сбоку, снизу, без панели) и анимация переключения (плавная, затухание, живая, без анимации — посетителям с включённым уменьшением движения всегда достаётся мгновенный вариант) выбираются в выпадающих списках в той же панели.

Все настройки по порядку

В том же zip-архиве есть whatismylocation-widget.liquid — виджет определения местоположения в виде второй секции (тема, компактный или полный режим, высота), для страниц доставки и поиска магазинов.

Устранение неполадок

Секции нет в списке «Добавить секцию». Файл должен лежать в папке Sections (не в Snippets и не в Assets), а вставить нужно файл целиком — если блок {% schema %} обрезан, Shopify отклоняет или скрывает секцию. Вставьте весь файл заново и сохраните.

Ошибка «Invalid schema» при сохранении. Файл вставлен не полностью — чаще всего не хватает закрывающей фигурной скобки, потому что выделение оборвалось на строку раньше. Вставьте полный файл ещё раз; не правьте схему вручную, если не знаете Liquid.

Карта серая. Плитки карты приходят с tile.openstreetmap.org; агрессивный блокировщик рекламы или корпоративная сеть могут их заблокировать. Проверьте на телефоне через мобильный интернет — ваши покупатели почти наверняка видят карту нормально.

Метка стоит не у моей двери. Соберите координаты заново в конструкторе, перетащите метку на ваш вход и вставьте новые значения в настройки секции.

Изменения не видны в работающем магазине. Вы правили черновик или неопубликованную тему — внесите изменения в опубликованную тему (или опубликуйте ту, которую редактировали). Самому виджету кэшировать нечего.