0

Используем новый UI в WC Ukr Shipping PRO

Начиная с версии 1.10.0 в плагине WC Ukr Shipping PRO был полноценно внедрен новый UI, задачей которого было увеличение скорости и улучшение пользовательского опыта при взаимодействии клиента со страницей оформления заказа. В данной статье будут описаны основные возможности интерфейса, а также способ его включения на вашем сайте.

Включение новых компонентов

По-умолчанию новые компоненты используются только в админ-панели сайта (страница настроек, редактирование заказа, создание ттн). Для включения UI на странице оформления заказа откройте страницу настроек плагина и сделайте активной опцию Использовать новый UI.

Вы также можете восстановить старый ui, отключив эту опцию (при обнаружении проблем с новыми компонентами).

Основные изменения

В первую очередь, мы убрали поле выбора области, а также заменили галочку доставки по адресу на конкретные опции выбора типа доставки. Таким образом, визуально новые поля теперь выглядят так.

Второе важное нововведение - города по-умолчанию. Список из нескольких крупных городов будет доступен в компоненте уже при загрузке страницы. Если пользователю нужен другой город, он может воспользоваться поиском, который также доступен в новых компонентах.

Вы можете изменить список городов по умолчанию используя wordpress фильтр wcus_default_cities.

add_filter('wcus_default_cities', function ($refs) {
    return [
        // Чернівці
        'e221d642-391c-11dd-90d9-001a92567626',
        // Хмельницький
        'db5c88ac-391c-11dd-90d9-001a92567626'
    ];
});

Список идентификаторов нужных городов вы можете посмотреть в базе данных в таблице wc_ukr_shipping_np_cities.

Ленивая загрузка и многоязычный поиск

Пожалуй, это главное нововведение, которое нам нужно было внедрить, так как старые поля просто не могли нормально обрабатывать разросшуюся базу адресов Новой Почты. Новый UI работает по такой логике:

  • Для выбора города пользователю сразу доступны областные центры Украины. При необходимости, пользователь может найти нужный ему город, воспользовавшись строкой поиска.
  • При первом открытии выпадающего списка отделений будет подгружена только небольшая порция данных. Далее, пользователь может подгрузить еще немного данных, используя пункт Загрузить еще в конце списка. Или, он все также может воспользоваться поиском конкретного отделения.

Как поиск по городам, так и поиск по отделениям теперь не зависит от конкретного языка сайта. Вы можете писать название на украинском находясь на русской версии сайта. Плагин найдет нужные вам данные и вернет их для текущего языка.

Для адресной доставки правила остались прежние (поиск идет по онлайн-справочнику Новой Почты).

Подводя итоги

Обновление 1.10.0 стало достаточно обширным. Помимо нового UI было удалено много старого кода, часть функционала была переведена на прогрессивный фреймворк, а также было закрыто несколько неприятных багов. Постепенно, UI также будет введен и в бесплатную версию (в рамках её стандартных ограничений).

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