Как сделать калькулятор заказов на сайт в Excel и превратить его в генератор счетов

Расчет стоимости заказа онлайн сильно увеличивает конверсию. Еще сильнее она улучшается при онлайн оформлении счета. Почему же так часто приходится ждать расчета стоимости и оформления заказа? Что мешает использовать на сайте тот самый файл Excel, в котором рассчитывает заказ продавец?

Давайте разберемся концептуально →
Если расчет всегда делается в Excel и этот Excel живет в облаке, то почему бы не позволить любимым клиентам самостоятельно делать расчет в подготовленном шаблоне? У клиентов разный уровень подготовки, но галочки поставить и ввести свое имя с адресом могут все. А больше от них ничего и не требуется ¯\_(ツ)_/¯

Посмотрим на конкретном примере → как повесить на сайте свой Excel с расчетом заказа и автоматическим оформлением счета.

Не будем пока выяснять что лучше использовать: Google Sheets или MS Office, сегодня разговор не об этом. Плюсы и минусы технической реализации в разных сервисах в этой заметке не рассматриваем.

В Excel можно автоматизировать многое: от получения актуального курса валюты с сайта ЦБ и вызова курьера на сайте транспортной компании до генерации чертежей и составления списка необходимых материалов. Задача калькулятора заказов ограничивается только расчетом цены договора.

Калькулятор заказов позволяет сделать расчет стоимости заказа исходя из разных факторов: необходимых материалов, вариантов отделки, количества операций, упаковки, сроков и т.д. Как правило, калькулятор заказов делается в Excel, поскольку пользоваться формулами умеют практически все.

Как правило, калькулятор заказов претерпевает несколько периодов эволюции и после хождения по рукам с разным уровнем квалификации может приобретать непонятный и запутанный интерфейс, пользоваться которым могут только избранные сотрудники. Выкладывать такое на сайте конечно нельзя, все придется переделать. Интерфейс калькулятора должен стать максимально прост и предельно понятен для любого человека с улицы.

В идеале калькулятор должен превратиться в чек-лист, в котором нужно отметить галочками необходимое. В более сложных случаях можно использовать выпадающие списки и выбор даты. Ввод руками букв и цифр лучше исключить совсем.

Посмотрим, как это может выглядеть на сайте.

Для примера возьмем услуги парсинга недвижимости. Для подсчета стоимости нужно сложить стоимость различных опций: сохранять фото, открывать номер телефона, копию страницы в pdf или в png и т.д. Затем нужно пересчитать стоимость выбранных опций на срок использования услуги.

Пример начинается с предварительного экрана. На предварительном экране приходится использовать Google Web App embedded. С одной стороны, это технический костыль. С другой стороны, такой пункт с пояснениями полезен пользователям.

Костыль в том смысле, что мы не можем просто взять и отдать юзеру калькулятор заказа. Проблема в том, что калькулятор один, а юзеров много. В многопользовательском режиме юзеры будут своими правками мешать друг другу. Поэтому каждому юзеру нужно сделать персональную копию калькулятора. На лету гугол это сделать не позволяет из-за ограничения перенаправления на другую страницу без участия юзера.

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

Другой задачей этого Web App является привязка кода к файлу калькулятора. Дело в том, что гугло-код не embedded в книгу калькулятора, а bounded. Разница в том, что привязка кода не копируется автоматически вместе с файлом калькулятора и его нужно привязывать явно.

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

Пока происходит все перечисленное, вместо кнопки отображается анимация загрузки

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

Через несколько секунд подготовка калькулятора завершается, и пользователь получает кнопку для перехода в сам калькулятор.

С предварительной страницей всё, жмем на кнопку и переходим на основной экран.

Тут тоже костыль. Но этот костыль вписать в UX уже не получается: мобильные браузеры показывают гугло-таблицу в сильно упрощенном виде и он вам не понравится. Поэтому мобильным пользователям приходится показывать инструкцию по переходу в полноценный режим. Инструкция на два клика.

И, наконец, видим сам калькулятор:

С левой стороны иконки группировки опций. Если бы не группировка, калькулятор растянулся бы на несколько экранов.

Не все знают, как пользоваться группировкой, поэтому всеми силами стараемся обратить на нее внимание и объяснить как она работает.

Также стараемся максимально доходчиво объяснить, что для использования калькулятора нужно ставить галки.

Сроки рассчитываются также галкой. В данном случае не предполагается брать авансы, поэтому такой реализации галками достаточно. Если без ввода даты не обойтись, то есть готовый Date Picker.

Сразу можно заметить, что данные на листе не защищены от изменений. Пользователь может менять названия опций и цены.

Поначалу это может смутить. Но, если разобраться, то ничего плохого в этом нет.

Дело в том, что защита ячеек включает запрет на редактирование и на изменение, а возможность группировки относится к изменению листа. То есть если ячейки с ценами защитить, то группировка работать не будет.

С другой стороны, защита ячеек в данном случае – это не более чем условность. На любой странице в браузере любой пользователь может изменить буквально все. Ведь браузер отображает документ с разметкой html, который можно свободно редактировать здесь же в браузере встроенным средством Dev Tools. То есть защита в данном случае невозможна технически.

Все расчеты в данном примере сделаны только с помощью формул, макросы не используются. Галочка считается в формуле за 1, а ее отсутствие – это 0. Т.е. сумма = цена х ☑.

Самые продвинутые могут заметить, что файл с калькулятором можно утащить с сайта и открыть в полном интерфейсе гугл-таблиц, в том числе получить полный доступ и снять защиту с защищенных ячеек. Однако, никакого фрода в этом нет. Кому-то это поможет увидеть как устроены формулы, но материального ущерба или выгоды из этого не получится.

Как и в обычном Excel, в облаке также можно быстро и бесплатно изменить файл калькулятора заказов. Сайт при этом переделывать не придется. На сайте используется ссылка на папку с файлом калькулятора заказов. Изменение этого файла приведет к тому, что он будет показан на сайте в измененном виде. Изменения делаются как обычно: нужно зайти в свой гуглоаккаунт, открыть и изменить нужную гуглотаблицу. Также можно заменять файл калькулятора его новой версией без необходимости замены ссылки в коде сайта.

Точно также без изменений в коде можно вносить изменения в оформление счета и содержание договора. Надо просто заменить (или отредактировать) в папке в облаке гугла файл счета или договора.

Специальных требований к сайту также нет. Гугло-калькулятор вставляется на любую страницу сайта с помощью элемента iframe. Это простая операция, особых знаний для этого не нужно.

Несколько сложнее написать скрипт для копирования файла с калькулятором и передачи его на сайт. Но, если вам удалось освоить VBA Excel, то освоить Google Script будет несложно.

Обзор калькулятора заказов на этом закончен, перейдем к генератору счетов (и договоров).

Точно так же, как калькулятор заказов, генератор счетов имеет предварительный экран. Здесь объясняется куда попадет пользователь, что там надо делать и что получится в результате:

Генератор счетов устроен точно так же, как калькулятор заказов с одним дополнением: формы для ввода реквизитов, необходимых для оформления счета (и договора).

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

С точки зрения оформления форма для ввода реквизитов может быть расположена на отдельной вкладке. В этом случае под формой калькулятора заказов потребуется кнопка «Перейти к оформлению», которая будет открывать (делать активной) вкладку с формой для ввода реквизитов. В нашем примере форма для ввода реквизитов расположена непосредственно под формой калькулятора заказов.

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

Начинается генератор счетов с галочки оформления договора. Счет оформляется в любом случае и его галочка не снимается. Договор нужен не всем, поэтому вводить лишние реквизиты нет смысла.

В гуглотаблицах есть готовая проверка ввода (aka валидация формы), поэтому, например, в ИНН не получится ввести букву или количество цифр больше или меньше 10.

Условное форматирование также есть, заполненные реквизиты меняют цвет фона.

Изображения можно вставлять в ячейку или поверх ячеек.

Призыв к действию традиционно оформляют в виде кнопки:

Но в гуглокоде есть нюанс: код привязывается к кнопке локально, он виден в прикрепленном к таблице Apps Script. А вот привязанный к галке код может быть расположен не в embedded project, а в недоступном пользователю файле. Это особенность installable triggers.

Installable trigger работает с событием onEdit установки галки, а с кликом по кнопке так не работает. Остается загадкой почему гугол придумал, что нажатие на кнопку не обрабатывается как событие аналогично onEdit или onOpen.

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

Установленная галка запускает процесс заполнения счета и договора по шаблону. Это продолжается несколько десятков секунд, в течение которых отображается прогресс выполнения задач.

После завершения процесса вид станет таким:

Безопасность для гугла не просто фишка, а полноценный фетиш. Поэтому просто кликнуть на ссылку не получится: ведь пользователь не знает куда ведет ссылка, а это чревато злоупотреблениями. Чтобы спасти пользователя от возможного обмана гугол показывает адрес ссылки при наведении на нее мышки. Вот уже по адресу можно кликать. А при наведении на адрес показывает его еще раз в темной теме .. ну, теперь вы точно знаете куда вас ведет эта ссылка.

К этому моменту оформленные документы отправлены почтой пользователю и продавцу в pdf. Перевод гуглодоков в pdf и отправка почтой отлично работает из коробки. Гугол даже выложил готовый код в документации.

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

Из-за ограничений безопасности гугла нельзя просто отдать ссылку на скачивание data URI scheme. Причины гугол не раскрывает. Поэтому пользователь открывает по ссылке завершающий Web App embedded, где уже получает ссылку с содержащимся в ней счетом или договором в pdf.

Почему ссылка должна быть с data URI scheme, а не на обычный pdf-документ в GDrive? Потому что ссылка с data URI scheme вечная → ее можно загрузить и после удаления самого документа.

В заключение перечислим достоинства и недостатки, которые замечены в реализации онлайн калькулятора заказов и генератора счетов в концепции Excel-online в экосистеме Google.

Минусы:

Плюсы:

Вывод

Excel-онлайн является альтернативой при разработке используемого на сайте калькулятора заказов и генератора счетов.

Excel-онлайн подходит, когда внешний вид не критичен.

Excel-online полезен, когда:

1. необходимы изменения калькулятора (в том числе шаблонов договора и счета);

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