В статье пойдет речь о том, как реализовать определение геолокации пользователя, автоматическое определение адреса доставки и выбор возможных методов доставки по указанному адресу. Реализуется разграничение методов доставки по районам, улицам или городам.
Woocommerce – довольно функуианальный плагин для wordpres позволяющий реализовать интернет-магазин на базе данной CMS.
О том, как настроить доставку на базе этого решения, довольно много статей в интернете, а также дополнительных плагинов, позволяющих расширить настройки вариантов и локаций доставки.
В большинстве случаев, предлагается добавить свои зоны доставки и предложить пользователю выбирать, куда он хочет, чтобы ему доставили товар.
В моем примере реализован немного другой функционал. Мы не будем просить пользователя указать район доставки, а будем его самостоятельно выяснять опираясь на адрес или геолокацию клиента. Таким образом разобьём наш город Н на несколько районов, стоимость доставки в которые будет отличаться.
В этом нам поможет Google Maps API, с помощью которого мы будем определять район, и точное местоположение заказчика.
Так же стоит отметить, что не потребуется установка дополнительных плагинов и глубокое капание в коде бэкенда.
Для начала стоит разобраться, как работает выбор определение доставки в woocommerce.
Доставка имеет привязку к зонам, которые добавляются в настройках плагина. Каждая зона привязывается к региону, которые можно поменять используя хуки, но нам это не к чему.
Создаем новую зону, в качестве региона указываем Россию.
Под полем Зоны есть интересная ссылка «Ограничение определёнными почтовыми индексами», и там можно перечислить индексы зон(районов) в которых будут доступы добавленные ниже Методы доставки. Хочу подчеркнуть, что именно будут доступны, хотя описание ниже и название ссылки говорят нам обратное. Также во многих туториалах по этой теме, описывают что данная функция позволяет исключить эти районы из общей зоны доставки, но по факту совсем наоборот. Возможно это косяк перевода, но я не проверял, что написано на других языках.
И так, продолжим. В это поле вписываем по одному в строчку, ВСЕ индексы из той зоны, куда будет осуществляться доставка и добавляем методы доставки. Я сделал бесплатную доставку при заказе от 500р, и платную при меньшей сумме.
Таким же образом добавляем другие зоны, перечисляя в них почтовые индексы вашего района. Это может быть как отдельный город, область, так и район. У меня в примере отдельно взяты город разбит как раз на районы, плюс пригород.
Индексы можно посмотреть на карте 2gis, поискав почтовые отделения нужного района или посмотреть индекс конкретного дома, кликнув по нему. Стоит отметить, что почтовое отделение может иметь один индекс, а обслуживать несколько зон, с разными индексами, будьте внимательнее.
На этом настройка самого плагина окончена. Теперь нам необходимо определить индекс пользователя и подставить его в нужное поле в форме оформления заказа, тогда woocommerce основываясь на добавленных нами зонах доставки, выберет доступные методы доставки.
Как я уже писал, берем Google Maps JavaScript API. Для его использования нам понадобиться ключ к API, получить его можно на странице продукта. Тамже можно подробнее почитать о всех доступных методах и функциях API.
Затем необходимо определить поля, которые мы будем заполнять. У меня стоит плагин Saphali WC, который скрывает с сайта не нужные мне поля и мне в нем пришлось включить поле Почтовый индекс (shipping_postcode), ведь именно по нему и выбирается доступный метод доставки, а также нам понадобится адрес доставки (shipping_address_1), чтобы пользователь мог вручную указать адрес.
Затем, пишем небольшой JS код, который делает следующее:
- При переходе пользователя на страницу оформления заказа, происходи запрос геоданных.
- Пользователь разрешает доступ к геоданным, тогда его местоположение определяется и в поле адрес доставки вписываются полученные данные, в поле Индекс вписывается индекс его зоны и происходит обновление доступных методов доставки.
- Если пользователь не сообщил свое место положение, то он продолжает оформлять заказ и указывает адрес доставки. Тогда точно также определяется его индекс, но уже по указанному адресу, подставляется в нужное поле, а уже по нему обновляются методы доставки.
В итоге получаем умную систему, облегчающую процесс совершения покупки.
И весь этот алгоритм реализован на стороне клиента, на javascript, который необходимо вставить в страницу оформления заказа /checkout/.
Я это сделал просто вставив js в эту страницу через админку wordpress. Не лучшее решение, но рабочее. (добавлю: избегайте переносов строк и спецсимволов, wordpress может заменить их на html аналоги и сломать ваш js код)
Для красоты, я с помощью css скрыл поле Почтовый индекс, оставив на виду, только адрес доставки.
Вот так, с помощью одного только JS реализовано автоматическое определение адреса доставки и выбор доступных методов доставки.
Код представлен только в качестве примера, и требует доработки и модификации под ваш сайт.
Спасибо за внимание! Желаю Вам новых и интересных проектов.
