Форма онлайн заказа размещается на Вашем сайте и позволяет его посетителям оформить заказ такси в Вашей службе без обращения в диспетчерскую, что значительно упрощает работу диспетчера, экономя время на приеме заказа.
Предоставляем два вида формы онлайн заказа: простая и расширенная.
Простая форма не подлежит никаким изменениям, позволяет оформить заказ из точки А в точку Б с предварительным просчетом.
Вся дальнейшая инструкция большей частей описывает возможности расширенной формы онлайн заказа.
Возможности для диспетчерской
| Макрос генерирует HTML разметку |
|---|
<div class="menu"> <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_1.png<div class="header"> <p><b>Форма онлайн заказа сайте</b></p><h1>Начало использования</h1> <h2>Основные возможности</h3> </div> <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_3.png"> <style> <p><b>Оформление заказа без обращения в диспетчерскую</b></p>.header { </div> <div> <img src="https://docs.tn.in.ua/background-image: url("/download/attachments/68160636817661/iconbg_43.png">); <p><b>Изменение цветовой формы онлайн заказа</b></p> text-align: center; </div> padding: 20px; <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_5.png"> } <p><b>Синхронизация с программой Такси Навигатор</b></p> </div> .header h1, </div> <style> .menuheader {h2, margin: 0px; .header span { padding: 0px; display: flex; flex-flowcolor: row wrapwhite; justify-content: center; } .header h1, list-style: none; .header h2 { margin: auto; } margin: 20px; .menu div{ } width: 180px; } .header h1 { .menu p { textfont-alignsize: center; margin-bottom: 0px48px; line-height: 1.5; } } .menuheader imgh2 { display: block; margin-leftfont-size: auto18px; margin-right: auto; } .header a:link, } /* #title-heading .menu a:link { display: none; } .page-metadata { visibility: hiddentext-decoration: none; }*/ </style> } |
Возможности для клиента
| Макрос генерирует HTML разметку |
|---|
<div class="menu"> <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_1.png"> .header a:visited, <p><b>Оформление заказа</b></p> .menu a:visited { </div> <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_3.png"> text-decoration: none; <p><b>Поиск машины</b></p>} </div> <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_4.png"> .header span { <p><b>следить на карте за перемещением найденной машиныmargin: к10px клиенту </b></p> 15px 10px 15px; font-weight: 600; } </div> <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_5.png"> .header span:hover { <p><b>Дополнительные услуги</b></p> </div> <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_5.png"> background-color: #C88A00; <p><b>Личный кабинет</b></p> border-radius: </div>0.5em; </div> <style> .menu { margin: 0px; padding: 0px; padding: 10px 15px display: flex10px 15px; flex-flow:} row wrap; justify-content: center; .menu ul{ list-style: none; margin: auto0px; } .menu div{ padding: 0px; width: 180px; }display: flex; .menu p { text-alignflex-flow: centerrow wrap; margin-bottomjustify-content: 0pxcenter; } .menu img { display: block list-style: none; margin-left: auto; margin-rightmax-width: auto1400px; } /* #title-heading { display margin: noneauto; } } .page-metadata { visibility: hidden; }*/.menu li { </style> |
Возможности для разработчиков
| Макрос генерирует HTML разметку |
|---|
<div class="menu"> <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_1.png"> border: 1px solid #A0A0A1; p><b>API с детальным описанием </b></p> border-radius: 10px; <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_1.png"> margin: 20px; <p><b>разработать свое мобильное приложение для клиента</b></p> height: 115px; <div> <img src="https://docs.tn.in.ua/download/attachments/6816063/icon_1.png"> flex-basis: 400px; <p><b>и вносить} изменения в форму онлайн заказа на сайте</b></p> </div> .menu </div>li <style>img { .menu { background-color: #F0F4F8; margin: 0px; paddingfloat: 0pxleft; display: flex; flex-flow: row wrap; justify-content: centermargin-right: 5px; border-top-left-radius: 10px; list-styleborder-bottom-left-radius: none10px; } margin: auto; } .menu div{li h3 { width: 180px; }margin: 8px 8px 0px 0px; .menu p { text-aligncolor: center#5685BE; } margin-bottom: 0px; } .menu imgli p { display: block; margin: 8px 8px 8px 0px; margin-left: auto; margin-right color: auto#717171; } /* #title-heading { display: none; } .page-metadata { visibility: hidden; }*/ </style> |