Woocommerce: Форма входа, регистрации и аккаунта в всплывающем окне

Задача. Необходимо настроить форму входа/регистрации в интернет-магазине на Woocommerce, которая должна отображаться во всплывающем окне по нажатию кнопки. После регистрации в этом же модальном окне может отображаться информация со страницы учетной записи Woocommerce.

Пример №1: Всплывающее окно с формой входа в WordPress

Решение. Чтобы добавить форму регистрации/входа в попап окно можно использовать способ на двух плагинах — для попап ока и формы входа.

1. В настройках Woocommerce должна быть привязаная страница аккаунта с шорткодом [woocommerce_my_account].

2. Плагин Login/Signup Popup ( Inline Form + Woocommerce ) [XootiX] для настройки самой формы регистрации и входа. Также нужно включить замену формы страницы woocommerce myaccount (Изображение 1).

Настройки Login/Signup Popup
Изображение 1: Настройки в плагине Login/Signup Popup

3. Плагин Popup Maker [Popup Maker] для создания попап окна, но можно и самому сделать. Создаем всплывающее окно и добавляем в него шорткод [woocommerce_my_account]. Привязываем окно какой-то кнопке Входа.

4. После настройки всех плагинов. Проверяем работу и после авторизации или регистрации в всплывающем окне мы будем видеть обычную форму аккаунта Woocommerce. Но здесь есть один важный момент! На самой странице аккаунта (например она имеет слаг «my-account«) есть такие ссылки как «недавние заказы«, «платежный адрес и адрес доставки» и «изменить пароль и основную информацию«. Они имеют ссылки вида https://mysite.net/my-account/orders/, https://mysite.net/my-account/edit-address/ и https://mysite.net/my-account/edit-account/. Дело в том, что эти ссылки генерируются таким образом, что к текущей странице просто прибавляются /edit-address/ и т.д.

5. Когда мы находимся на странице аккаунта, то эти ссылки формируются правильно. Но, т.к. мы используем эту форму аккаунта в попап-окне, то она может находиться на любой странице. В этом случае ссылки на редактирование будут формироваться неправильно (Изображение 2). Например, если мы будем находиться на странице с URL https://mysite.net/o-kompanii/, то эти ссылки для редактирования примут вид https://mysite.net/o-kompanii/edit-address/ и когда мы попробуем перейти в раздел редактирования, то выдаст 404, т.к. такой страницы нет, а есть https://mysite.net/my-account/edit-address/.

Форма аккаунта Woocommerce в модальном окне
Изображение 2: Ссылки редактирования в панели аккаунта

Чтобы исправить ссылки нужно отредактировать шаблон Woocommerce приборной доски аккаунта:

  1. Копируем файл из плагина /wp-content/plugins/woocommerce/templates/myaccount/dashboard.php в дочернюю тему (или просто тему если дочерняя не используется) так /wp-content/themes/mytheme-child/woocommerce/myaccount/dashboard.php (именно так — без ‘templates‘).
  2. Редактируем скопированный файл dashboard.php. Нужно заменить часть кода — трем wc_get_endpoint_url добавить слаг нашей страницы аккаунта (в примере это «my-account») при условии что мы находимся не на странице аккаунта, а когда на странице аккаунта — должно быть как и было — Код №1.
Код №1: dashboard.php Замена кода для корректного вывода ссылок редактирования аккаунта на всех страницах
Плагин Login/Signup Popup имеет встроенную возможность popup окна. Можно использовать его шорткоды, посмотрев инструкцию на странице плагина.
5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии