Сайт vending33.ru

Кейс создания сайта vending33.ru
Владимирская Вендинговая Компания
Корпоративный сайт

Регион: Владимир

Дата создания сайта: 2014 год

vending33.ru

Простой и удобный сайт, описывающий деятельность компании, её услуги и предлагаемые товары.

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

Создание сайта vending33.ru

Первую версию сайта 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 категорий). Думаю, что на этих наработках можно сделать удобный сайт для доставки пиццы или суши.

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

Посмотреть другие кейсы