Заказ в 1 клик

Свести потери клиентов на этапе оформления заказа можно благодаря функционалу известному, как: «Заказ в 1 клик».
В этом посте мы рассмотрим, как добавить функционал «Заказ в 1 клик», для магазинов на платформе Gollos.

Подключаем всплывающую форму заказа в 1 клик

Подключим файл стилей для нашей формы.
Перейдем в раздел «Мета теги» текущего дизайна и добавим тип: CSS, со значениемhttp://cdn.gollos.com/common/custom-form.css

Вставляем форму "Заказа в 1 клик" на страницу товара и готово :)

Теперь перейдем на страницу «Товары. Описание» и вставим код формы, сразу после первой строки вида: {{ product.button_add }} (данный код выводит кнопку «В корзину»)

<a class="modal-opener addToCart" data-form="#formOneClickOrder" href="#">Заказать в 1 клик</a>

<form action="" id="formOneClickOrder" method="post" class="pcss3f pcss3f-vm pcss3f-modal pcss3f-modal-form" style="width: 300px;">
  <header>Заказать в один клик</header>
  <input type="hidden" name="product-title" id="product-title" required data-title="Товар" value="{{ product.title }}">
  <input type="hidden" name="product-id" id="product-id" required data-title="Код товара" value="{{ product.id }}">
  <section class="state-normal">
    <label for="name">Имя</label>
    <input type="text" name="name" id="name" required data-title="Имя">
  </section>
  <section class="state-normal">
    <label for="phone">Телефон</label>
    <input type="text" name="phone" id="phone" required data-title="Телефон">
  </section>
  <div class="SuccessMessage" style="display: none; color: #49912C; font-weight: bold; padding: 10px 0;">Спасибо, ваш запрос отправлен!</div>
  <footer>
    <button type="button" class="modal-closer">Закрыть</button>
    <button type="submit" class="color-blue" onclick="return gollos.AddCustomFeedback(this)" data-title="Заказать в 1 клик">Отправить</button>
  </footer>
</form>

Вот так выглядит добавленная кнопка в 55 дизайне:

Если фон всплывающей формы не перекрывает все элементы, то перейдите в раздел Файлы (текущего дизайна), откройте файл стилей на редактирование (обычно это файл style.css или main.css) и в самом конце добавьте две строчки:
.pcss3f-modal-form { z-index: 99999; }
#pcss3f-overlay { z-index: 9999; }

Проверяем заявки в админ панели

Заполним форму и отправим тестовую заявку. 


1. Просмотреть все заявки можно в разделе Магазин – Обратная связь
2.  Также в информере в верхней части админ панели (см. скрин)


   3. Скрытые поля с информацией о товаре, доступны вам для просмотра, а также вся информация, которую ввел пользователь.

Надеюсь, данный функционал позволит увеличить количество продаж и хороших клиентов.