Содержание
В нашей стране все еще набирает обороты спрос на кассы самообслуживание. Действительно, с одной стороны удобно самим покупателям: обычно на КСО почти не бывает очередей, процесс добавления товаров более прозрачный; с другой стороны сами организации могут экономить на штатных единицах даже при условии обязательного наличия недобросовестных и невнимательных покупателей.
Недавно столкнулся тоже с задачей от одного клиента внедрить в текущие процессы кассу самообслуживания. Правда касса получилась не совсем классической: покупателям все же не позволено добавлять товары в корзину. Дело в том, что не все товары в принципе выставлены в свободном доступе: в одном случае - из-за больших габаритов, в другом - наоборот, из-за небольших размеров и высокой стоимости. Поэтому на первом этапе решили все-таки утвердить следующую схему взаимодействия:
- Покупатель совместно с менеджером магазина подбирает список товаров
- Менеджер применяет все существующие скидки и печатает счет на оплату
- Далее покупатель со счетом на оплату может подойти либо к "живому" кассиру, либо к КСО
- Параллельно менеджеры собирают и упаковывают выбранные товары, снимают бирки/метки
- После оплаты покупатель возвращается к менеджеру за товаром
Соответственно, с точки зрения магазина было желание хотя бы частично решить проблему с текучкой кассиров. Косвенно, был сделан упор на психологическую составляющую: при умелой рекламе в сочетании с маркетинговыми акциями факт каких-то новшеств в магазине может некоторый пул клиентов побудить прийти посмотреть, а там, возможно, что-то и приобрести.
С точки зрения клиентов наличие КСО даже в этом варианте может оказаться более удобным и предпочтительным: можно спокойно подойти, ознакомиться с выбранными товарами, ценами и примененными скидками, оплатить удобным способом и получить чек на электронную почту.
Когда, наконец, решение о внедрении кассы самообслуживания у клиента созрело, настал момент выбора программной составляющей для кассы. Первый порыв был выбрать что-то уже готовое, даже начали анализировать различные варианты по типу 1С:Касса. Но из-за специфики функционала поняли, что стороннее приложение будет не самым лучшим вариантом:
- стороннее решение, будь даже оно из мира 1С - это еще одна линия интеграции, которых и так сейчас в избытке
- на синхронизацию в режиме реального времени можно не рассчитывать
- существенное количество доработок в основной конфигурации приведет неизбежно к необходимости доработки форматов обмена
В итоге было принято решение сделать в основной конфигурации отдельную форму для интерфейса покупателя.
Клиент в своей работе использует конфигурацию "1С:Комплексная автоматизация 2.5" с огромным количеством доработок, но регулярно обновляемую. Поскольку конфигурацию мы регулярно обновляем, было решено максимально использовать типовые процедуры и функции по фискализции чеков и работе с Честным Знаком.
Первое, что пришло на ум (да, такое случается даже с самыми лучшими))) - это использовать существующую форму РМК, но убрав оттуда все, до чего обычный покупатель не должен дотянуться своими любопытными руками. Кто видел РМК в семействе конфигураций УТ/КА/ERP сразу поймет, почему такое стыдно выкатывать на обозрение клиентам) Тем, кто всё-таки не видел - показываю:
Пользователи 1С к такому уже привычные и неплохо ориентируются, а вот неподготовленных покупателей невзрачные серые таблички могут вогнать в тоску)
Поэтому было решено использовать комбинированный подход: основные процедуры и функции для работы с торговым оборудованием "выдрать" из формы РМК, а вот интерфейс под это дело придумать свой.
Поскольку времени на разработку вполне хватало, решил попробовать погрузиться в HTML и CSS. К тому же разработать что-то удобоваримое на "чистом" 1С - дело не такое уж и тривиальное. Плюс как ни кастомизируй, но интерфейс 1С все равно с легкостью угадывается). С головой погружаться не стал: некоторые промежуточные формы делал на 1С, но форму корзины решил реализовать именно через поле HTML-документа.
На первом подходе решил использовать давно проверенную практику: найди что-то готовое и переделай под себя) Думая как 1Сник, решил вывести список товаров в виде таблицы. Соответственно, не стал париться и нашел несколько шаблонов для html-таблиц. Получилось довольно-таки стыдно и, что называется, колхозно)))
Вот это выглядело на самой КСО:
После этого стало понятно, что придется всё-таки попотеть! Пришлось в очередные походы в магазины более внимательно посмотреть на уже работающие интерфейсы и взять их за основу. По большому счету все оказалось более-менее однообразно:
- Основное пространство - прозрачный список или "плашки" с товаром, количеством, ценой и скидкой
- Внизу крупный блок с итоговой стоимостью
- Отдельный блок с подсветкой общей суммы скидки
- Режим пошагового помощника: Корзина - Далее - Выбор типа оплаты - Оплата - Страница с благодарностью за покупку
Все это выглядит +/- примерно следующим образом (случайная картинка из интернетов):
Как только стала понятна общая концепция, настало время реализации! После просмотра форумов и различных онлайн-библиотек по HTML и CSS стало ясно, что в моем случае (без скриптов, анимаций и прочей мишуры) отрисовать форму будет не сложнее, чем в конфигураторе.
Итак, универсальный элемент на все случаи жизни - это div-контейнеры: элементы, группы форм - в HTML вместо всей этой братии используется div-контейнеры. Все, что мы задаем в свойствах элемента формы 1С - в HTML будет задаваться в стилях. Как только это осознаешь - сразу все становится на свои места. Это примерно как в разговорных языках: на начальном этапе мозг продолжает "думать" на родном языке и из-за этого человек сначала составляет фразы на родном языке, а потом переводит их на целевой; после глубокого изучения (обычно после пребывания в новой среде), мозг учится думать сразу на нескольких языках и пропадает необходимость в промежуточном звене - формировании фраз на "эталонном" языке. Примерно так же произошло и в моем случае: в какой-то момент при взгляде на картинки у меня уже было сразу представление, как расположить div'ы и какие стили к ним применять.
В отличие от редактора форм платформы 1С инструментарий HTML по настройке элементов дает просто колоссальные возможности. Соответственно, в сети можно найти порой большое количество примеров реализации одной и той же компоновки элементов разными способами. Поэтому поначалу у меня получился сплошной "зоопарк" из различных подходов: flex-контейнеры были вперемешку с обычными, часть размеров задавалась в абсолютных значениях, другая - в относительных. В итоге даже самое небольшое внесенное изменение приводило к непредсказуемым последствиям, а поле HTML-документа в 1С вообще отображало совсем не то, что отображалось в браузерах.
Как только мне надоело бороться с поехавшим интерфейсом, было принято решение максимально перейти на использование flex-контейнеров и задание размеров элементов в относительных значениях. Не сказал бы, что в итоге полностью разобрался в теме, но разработка сдвинулась с места. Возможностей по настройке flex-контейнеров просто огромное: в сочетании с настройками родительских/дочерних элементов можно как построить элегантный гибкий интерфейс, так и погрузиться в настоящий ад) Тут, конечно, нужно больше опыта, хорошее знание (и главное - понимание!) всех возможностей flex-контейнеров и много часов апробации этих возможностей.
После подготовки уже более-менее презентабельного варианта и запуска его на кассе самообслуживания, обнаружилось, что примерно 60-70% экрана занимает пустота. В большинстве случаев количество позиций в чеке не превышает трех. В принципе долго гадать не стал и предложил заполнить пустое пространство рекламными баннерами с информацией о действующих акциях. И тут начались сплошные танцы с бубнами...
Во-первых, нужно было выбрать метод вывода слайдера с картинками. На чистом HTML решил не заморачиваться, поэтому начал искать какие-то готовые решения. В принципе в сети их достаточно много, но решил остановиться на Slick Slider. Каких-то объективных причин выбора я вам не приведу. Это был буквально первый попавшийся вариант с достаточно подробной информацией о встройке и настройке. Завелся сразу и без каких-либо проблем, описание настроек вполне понятные, в сети есть масса гайдов, примеров использования и обсуждений на форумах. Рано радовался...
Во-вторых, оказалось нетривиальной задачей масштабировать картинки в слайдере, прижать слайдер к нижней части экрана и максимально заполнить свободное пространство. Поначалу получалось как-то так:
Пришлось немного "поколдовать" с контейнерами, переопределить свойства картинок слайдера и методом подбора определить оптимальные размеры картинок.
И, в-третьих, нужно было определить источник, откуда брать картинки для слайдера. Первое, что пришло на ум - пусть загружают в саму 1С, а выводить буду, передавая base64-строку в свойство src тега img. Но после тестов стало понятно, что интерфейс ощутимо быстрее работает, если в src передавать ссылку на картинку. Поэтому решили картинки загружать на сайт и сделать небольшую API-шку, с помощью которой 1С смогла бы получать список ссылок на картинки активных баннеров.
Некоторые особенности реализации↑
- Для запуска 1С в режиме КСО используется отдельная роль
- Для препятствования случайного и намеренного выхода в ОС используется режим основного окна - Киоск
- Для перехода в режим администрирования используется служебный штрихкод
- Страница со списком товаров сделана полностью в виде поля HTML-документа
- Текст для страницы списка товаров формируется динамически по выбранному чеку
- Для удобства редактирования основного цвета элементов используется элемент стиля - Цвет
- Удалось добиться использования полностью типовых процедур и функций для работы с ККТ, эквайринговыми терминалами и для взаимодействия с Честным Знаком
UPD. К статье добавил пример HTML-кода со страницей корзины.
Благодарю пользователя Евгений Абдуразаков за его экранную клавиатуру для 1С: она позволила сэкономить много времени) Используется для ввода адреса электронной почты покупателя
Спасибо пользователю DeerCven за его наводку про отключение уведомлений о проблемах с расширениями
Большая благодарность сайту https://icons8.ru/ за огромное количество интересных иконок.
Огромное количество полезной информации по HTML и CSS - https://developer.mozilla.org/ru/
Посмотреть в живую на результат можно вот в этом магазине
Вступайте в нашу телеграмм-группу Инфостарт
