SimplaCMS: подключаем dadata для клёвых подсказок

Есть клёвый сервис, который позволяет в вашей корзине вызывать подсказки.
Подсказки могут быть разными — фамилии, имена, отчества, адреса, почты, огрн, инн и ещё большая куча других подсказок. Для простых интернет-магазинов очень нужны ФИО, электропочты и адреса. Это реально упрощает процесс оформления заказа и в какой-то степени увеличивает конверсию.

Как подключить

  1. Регистрируемся на сайте dadata.ru, получаем API ключик.
  2. Открываем файл /design/ваша_тема/html/cart.tpl и добавляем в него:
{literal}
<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@19.4.2/dist/css/suggestions.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/suggestions-jquery@19.4.2/dist/js/jquery.suggestions.min.js"></script>
 <script type="text/javascript">
     $(".cart input[name='name']").suggestions({
         serviceUrl: "https://dadata.ru/api/v2",
         token: "a8fe6329cfa81666be66deb370d2c364ccfddeaa",
         type: "NAME",
         params: {
             parts: ["SURNAME", "NAME", "PATRONYMIC"]
         }
     });
     $(".cart input[name='address']").suggestions({
         serviceUrl: "https://dadata.ru/api/v2",
         token: "a8fe6329cfa81666be66deb370d2c364ccfddeaa",
         type: "ADDRESS"
     });
     $(".cart input[name='email']").suggestions({
        serviceUrl: "https://dadata.ru/api/v2",
        token: "a8fe6329cfa81666be66deb370d2c364ccfddeaa",
        type: "EMAIL",
        /* Вызывается, когда пользователь выбирает одну из подсказок */
        onSelect: function(suggestion) {
            console.log(suggestion);
        }
    });
 </script>
 {/literal}
  1. Чтобы скрипт заработал, нужно указать свой API-ключик во всех token-параметрах.
  2. Обратите внимание, что у меня используется нестандартный класс для формы корзины. Чтобы узнать какой класс формы корзины используется у вас, найдите в cart.tpl html-тег
    и посмотрите какой класс ему принадлежит. Далее просто замените cart на свой класс в этих полях:
$(".cart input[name='name']").suggestions({
...
$(".cart input[name='address']").suggestions({
...
$(".cart input[name='email']").suggestions({
...
}

Результат работы

Поделиться
Отправить
Запинить
 95   4 дн   simplacms
Ваш комментарий
Ctrl + Enter
Популярное