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

Первую версию сайта vending33.ru я сделал ещё в 2014 году. Это был сайт с достаточно простым дизайном и функциональностью. На нём было подробно описание о деятельности компании, её услугах и предлагаемых товарах.

Спустя год сама фирма стала в том числе официальным представителем московской компании, которая продает ингредиенты для вендинговых аппаратов. Например, кофе, сахар, чай. Из этих ингредиентов получается то, что вы пьёте в кофеаппаратах.

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

Соответственно, потребовалась функциональность небольшого интернет-магазина. Вместе с руководителем Владимирской Вендинговой Компании мы решили сделать одностраничный интернет-магазин.

Сайт я делал на MODX Revo. Для него есть готовые модули интернет-магазина, но я не хотел с ними связываться. Решил с нуля реализовать такую функциональность своими силами.

Требования были такие:

  • Цена товаров в прайсе в евро. Необходимо показать на сайте цену в евро и в рублях.
  • Курс евро должен быть актуален на текущую дату.
  • Выбор количества упаковок каждого товара.
  • Добавление и удаление товаров из заказа (аналог корзины).
  • Форма с телефоном, email'ом и комментарием к заказу.
  • Заказ отправляется на почту к заказчику и клиенту. В этом письме дополнительно уникальный номер заказа, дата, список товаров с ценами, общая цена, контакты фирмы.
  • Валидация полей. Минимальный заказ 100 евро, обязательные поля с телефоном и email'ом.

Для меня такая задача была не из лёгких. Я не программист. У меня только самые базовые знания php и javascript.

Одностраничный интернет-магазин

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

Во-первых, я перенес фотографии и описание 40 товаров с московского сайта. Для каждого товара я сделал следующие поля:

  • Название
  • Описание
  • Иллюстрация (фото)
  • Цена (в евро)
  • Вес
  • Вместимость упаковки
  • Тип ингредиента (всё делится на 5 подкатегорий)
  • Особенность (можно указать, что товар новинка)

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

С помощью pdoTools я реализовал вывод этих товаров на странице "Ингредиенты". Внешний вид товаров в выдаче задается в соответствующем чанке (мини-шаблоны в MODX).

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

Также на левой колонке расположилась сама форма заказа. Заказ на такие ингредиенты состоит обычно из нескольких пунктов. При разрешении 1280х720 влезает 8 товаров. Соответственно, чем выше разрешение у посетителя сайта, тем больше товаров на правой колонке может разместиться. Вместе с заказчиком мы пришли к выводу, что больше 6-7 товаров заказывать точно не будут. Иначе можно было бы сделать левую колонку обычной (чтобы она пролистывалась), а не прилипающей к экрану.

Одностраничный интернет-магазин

Затем я использовал плагин CurrencyRate, который берет актуальный курс евро с сайта ЦБ РФ. Я написал небольшой скрипт, который автоматически умножает цены из прайса на этот курс. Javascript я использовал также для подсчета цены в реальном времени, когда человек вводит количество упаковок.

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

Я долго возился с подсчетом итоговой суммы в корзине. Особенно проблемно сумма считалась после удаления одного из товаров из заказа. В итоге решил сделать корзину с помощью обычных input'ов, которые отключены от ввода данных. Привёл их дизайн к виду, что никто и не подумает, что это поле для ввода текста. Цифры передаются в value.

После этого всё заработало. Всё правильно подсчитывается в реальном времени. Javascript, а точнее его библиотека JQuery, оказался очень удобным языком программирования.

Следующим этапом было формирование письма с заявкой на почту клиенту и хозяину сайта. Плагин Formit прекрасно решил эту задачу. Пришлось создать пару переменных: текущая дата и номер заказа. Также был создан шаблон письма, куда входили все товары, их цена, количество, общая сумма. Всё опять же берётся из input'ов.

В итоге на две почты приходит такое письмо:

Заказ с интернет-магазина

Вот такой хэппи энд. Только, чтобы всё это реализовать у меня ушла неделя (привет, январские каникулы). Причём спать я ложился в эти дни примерно в 3-4 часа ночи. Мозг кипел, а руки делали.

Такой одностраничный интернет-магазин хорошой подойдёт компаниям, у которых достаточно ограниченный список товаров и категорий (до 100 товаров, до 10 категорий). Мне кажется, что на этих наработках можно сделать очень удобный сайт для доставки пиццы или суши.

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

Надеюсь, что вам было интересно! До новых встреч!

Автор: . Дата публикации:

Больше материалов с сайта: