Форма заказа с календарём

Иногда требуется установить на сайт форму заказа с календарём. Для того, чтобы клиент мог выбрать дату, например заказа или записи в поликлинику. Вариантов масса.

Чтобы это реализовать на WordPress я использую плагин Booked.

Вы можете купить его на официальном сайте. Мне же он достался на халяву: скачал его на каком то null сайте, разумеется с вирусами. От вирусов я знаю как избавиться, что и сделал, перебрав весь код. Вам же рекомендую его покупать, тем более если вы работаете на  клиента, который платит. Цена плагина 50 американских рублей.

Итак, приступим.

Установка стандартная через Плагины — Добавить новый — Загрузить и далее выбрать из списка файлов на вашем компе. После установки Активировать.

Теперь можно посмотреть на внешний вид. Но это так, для общего ознакомления. При дальнейших настройках можно много чего поменять.

booked настройка


Скажу сразу, плагин не русифицирован. Для перевода плагина надо будет поработать с Loco Translate. В этом описании настройки я работаю без перевода, с оригиналом. В конце статьи я предложу свой вариант перевода.

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


Переходим к настройке: Appointment Settings. Верхняя вкладка General. Это основные настройки.

Booking Type Здесь вы можете выбрать, кто может делать заказ: зарегистрированный пользователь или нет. Если на вашем сайте нет регистрации или она не нужна, то лучше выбрать Guest  booking.

Booking Options Обычно я оставляю Require «Name» only — Require your customers to enter their name in a single text field., чтобы человек не писал своё имя отчество, а вкладку только имя использую по другому. Позже я это расскажу.

Appointment Booking Redirect Эта опция очень важна. После заказа она перекидывает клиента на страничку где написано, что его заказ принят. Это лучше чем после заказа страница тупо обновится и чел не поймёт глюкнул сайт или нет. Вам нужно будет предварительно создать страницу в записью: Спасибо, ваш заказ принят! и указать эту страницу здесь в настройках редиректа.

booked настройка

Остальные настройки в этой вкладке не так важны, я думаю вы справитесь с ними без проблем.

Теперь вам нужно создать любую новую страницу и вставить в неё шорт код,

[booked-calendar]

для того чтобы вы могли посмотреть на будущие изменения.


Вторая вкладка сверху Time Slots. Здесь вы можете указать время приёма и количество заявок на текущее время. Допустим, ваша бригада замерщиков может выехать к вам по будням, с 11 до 20, с периодом 2 часа между заявками. Для этого вы создаёте тайм слот и добавляете его:

booked настройка

Таким образом вы создаёте новые тайм слоты и указываете в них нужные данные. Это надо сделать 1 раз и дальше они будут автоматически переноситься на новые дни месяца. Прошедшие дни автоматически деактивируются в календаре, запрограммировать их нельзя.

В итоге для понедельника у вас получится, что то типа этого:

booked настройка

а на странице календаря при выборе даты:

booked настройка

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


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

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

Так же вы можете настроить в каком шаблоны получения писем о заказе.


В принципе на этом настройка закончена. Теперь я опишу процесс как это работает и предложу свой вариант перевода.

Допустим человек хочет забронировать время с 17,00 до 20,00. Он нажимает Book Appointments и открывается вкладка в которой ему сообщается, что он собирается сделать заказ на такое то число и на такое то время

booked настройка

 

 

Замечание: Клиенту предлагается указать его имя, вместо этого значения, позже мы подставим: Укажите ваш адрес и телефон.

Далее клиент нажимает Request Appointments и перебрасывается на страницу Спасибо ваш заказ принят! Наш менеджер с вами свяжется.

При этом этот промежуток времени становится недоступным для другого бронирования (так как у нас в настройках указано 1 available)

booked настройка

Далее администратор получает письмо, что сделан заказ на такое то время от такого то клиента и в письме видит его реквизиты, которые он оставил в главе Name

На самом сайте администратор или кто принимает заказы, тоже видит что поступил заказ.

booked настройка

Этот заказ можно просмотреть

booked настройка

Как видим тот же самый Вася! Справа вы можете удалить заказ (бронь в календаре будет отменена) или одобрить (бронь сохранится).


Следующий шаг — перевод плагина. Для этого откройте Переводчик Loco и выберите Plugins.

В списке найдите booked и кликните на него.

booked 9

Выберите New language. Далее укажите русский язык из списка и выберите локацию Custom (это предотвратит удаление перевода при обновлении wordpress).

booked настройка перевод на русский

Теперь всё готово для перевода. Нажмите Start translating

Здесь мы видим что имеется 605 строк, которые не имеют перевода…

booked перевод на русский

Вы можете выбрать нужную строку и сделать её перевод.

Давайте переведём форму заказа. Вот эту:

booked настройка

 

Вот я сделал перевод по своему усмотрению и вот что у меня получилось:

booked настройка

Вроде нормально.

Теперь уберём некоторые косяки, а именно:

Вот эти надписи нам не нужны

booked настройка

Чтобы их убрать пропишем пользовательский css:

 
body .booked-calendar-wrap .booked-appt-list .timeslot .spots-available {
display: none;
}

Получим вот такой результат:

booked настройка

И ещё косячок остался это в самом календаре при выборе даты появляется надпись сверху, например 4 Available, что напрягает. Чтобы это убрать или ещё лучше переделать нужно в переводе шаблона найти строчку %d Available и перевести её как Выбрать. Или вообще отключить с помощью css.


На этом настройка плагина закончена. Если вам нужен мой файл перевода, то вы можете его скачать ссылка/ вы должны загрузить его к себе на хостинг в папку

/wp-content/languages/loco/plugins/

One thought on “Форма заказа с календарём

  • Июнь 8, 2019 в 20:32
    Permalink

    ссылка с переводом не работает

    Ответ

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *