Первую версию сайта vending33.ru я сделал ещё в 2014 году. Это был сайт с достаточно простым дизайном и функциональностью.
Спустя год ВВК стала официальным представителем московской компании, которая продает ингредиенты для вендинговых аппаратов. Например, кофе, сахар, чай. Из этих ингредиентов получается то, что вы пьёте в кофеаппаратах.
Соответственно, потребовалась функциональность небольшого интернет-магазина. Вместе с руководителем Владимирской Вендинговой Компании мы решили сделать одностраничный интернет-магазин внутри текущего сайта.
Сайт я делал на MODX Revo. Это позволяет дополнить обычный сайт с услугами функциональностью интернет-магазина.
Требования были такие:
- Цена товаров в прайсе в евро. Необходимо показать на сайте цену в евро и в рублях.
- Курс евро должен быть актуален на текущую дату.
- Выбор количества упаковок каждого товара.
- Добавление и удаление товаров из заказа (аналог корзины).
- Форма с телефоном, email'ом и комментарием к заказу.
- Заказ отправляется на почту заказчику и клиенту. В этом письме дополнительно должны быть уникальный номер заказа, дата, список товаров с ценами, общая цена, контакты компании.
- Валидация. Минимальный заказ 100 евро, обязательные поля с телефоном и email'ом.
Одностраничный интернет-магазин
Как всегда, помогла базовая функциональность MODX. Я удивляюсь, насколько эта система управления сайтом имеет интуитивную и понятную функциональность. Даже с базовыми знаниями программирования можно с помощью шаблонов, дополнительных полей и чанков реализовать практически всё, что угодно.
Во-первых, я перенес фотографии и описание 40 товаров с московского сайта. Для каждого товара я сделал следующие поля:
- Название
- Описание
- Иллюстрация (фото)
- Цена (в евро)
- Вес
- Вместимость упаковки
- Тип ингредиента (всё делится на 5 подкатегорий)
- Особенность (можно указать, что товар новинка)
То есть в дальнейшем при работе с сайтом клиенту не надо будет копаться в коде. Нужно просто заполнить описание товара. Товары можно копировать, менять, скрывать и показывать.
С помощью pdoTools я реализовал вывод этих товаров на странице "Ингредиенты". Внешний вид товаров в выдаче задается в соответствующем чанке (мини-шаблоны в MODX).
Затем я сделал левую колонку сайта прилипающей к верхней части экрана в момент, когда посетитель сайта до неё доходит. С помощью левой колонки можно ориентироваться по ассортименту. Оно сделано с помощью обычных якорей к подзаголовкам + небольшой скрипт, который делает прокрутку плавной.
Также на левой колонке расположилась форма заказа. Заказ на такие ингредиенты состоит обычно из нескольких пунктов. При разрешении 1280х720 влезает 8 товаров. Соответственно, чем выше разрешение у посетителя сайта, тем больше товаров на правой колонке может разместиться. Вместе с заказчиком мы пришли к выводу, что больше 5 товаров заказывать точно не будут. Иначе можно было бы сделать левую колонку обычной (чтобы она пролистывалась), а не прилипающей к экрану.
Затем я использовал плагин CurrencyRate, который берет актуальный курс евро с сайта ЦБ РФ. Написал небольшой скрипт, который автоматически умножает цены из прайса на этот курс. Javascript я использовал также для подсчета цены в реальном времени, когда человек вводит количество упаковок.
По нажатию кнопки "Добавить в заказ", если количество упаковок больше нуля, то товар уходит в корзину. Кнопка меняет цвет, а текст становится "Добавлено в заказ". Кнопка перестает быть активной, чтобы один товар не дублировался в заказе. Товар можно удалить из корзины, тогда кнопка опять становится активной.
Всё правильно подсчитывается в реальном времени. Javascript, а точнее его фреймворк JQuery, является отличным инструментом для решения такой задачи.
Следующим этапом было формирование письма с заявкой на почту клиенту и хозяину сайта. Бесплатный плагин Formit прекрасно решил эту задачу. Пришлось создать пару переменных: текущая дата и номер заказа. Также был создан шаблон письма, куда входили все товары, их цена, количество, общая сумма. Всё берётся из input'ов.
В итоге на две почты приходит такое письмо:
На внедрение функциональности одностраничного интернет-магазина у меня ушла ровно одна неделя.
Такой одностраничный интернет-магазин хорошо подойдёт компаниям, у которых достаточно ограниченный список товаров и категорий (до 100 товаров, до 10 категорий). Думаю, что на этих наработках можно сделать удобный сайт для доставки пиццы или суши.
Помимо функциональности одностраничного интернет-магазина был сделан небольшой редизайн сайта, модификация некоторых разделов.