HEEG.HTML — легкий и бесплатный движок интернет-магазина

Сегодня мы познакомимся с очень необычным движком для интернет-магазина HEEG.HTML. А интересен он тем, что не использует PHP и базы данных и полностью построен на HTML и JavaScript. Весь код выполняется не на сервере, а на клиенте — это дает возможность использовать самый простой (и даже бесплатный) хостинг.

Возможности HEEG.HTML

Рассмотрим сначала основные возможности движка, а потом будем разбираться как он устроен.

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

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

Платежные системы. В движок уже интегрированы платежные системы/ Такие как: банковские карты, Яндекс.Деньги, Webmoney, QIWI, оплата с мобильного. Оплата идет через платежный агрегатор PayAnyWay и чтобы начать его использовать, нужно будет заключить договор с этим агрегатором.

Импорт / экспорт. На данный момент имеется возможность импорта товаров из файлов формата xls, csv, json. Имеется возможность выгрузки в Яндекс.Маркет. Интеграция с программами 1С находится на стадии разработки.

Как устроен HEEG.HTML

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

А теперь разберем как работает HEEG.HTML. Где хранится информация о товарах, если он не использует базу данных хостинга? Как отображаются товары и на чем построена логика приложения, если не используется PHP?

Устроено все вот как: CMS HEEG.HTML разработана на базе движка нелинейных заметок tiddlywiki. Суть его в том, что вся информация интернет-магазина хранится в одном html файле, а удобный просмотр информации о товарах осуществляется с помощью логики JavaScript.

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

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

Информация по заказам сохраняется в таблицы Google. Отправка письма о совершенном заказе также осуществляется средствами Google. Файл с заказами выглядит примерно так:

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

Тест драйв HEEG.HTML

Давайте попробуем сделать небольшой интернет-магазин на движке HEEG.HTML, чтобы понять как все таки он работает и чтобы увидеть сильные и слабые его стороны.

Шаг 1. Скачивание.

Этот шаг стандартный. Как и в случае с любой бесплатной CMS, просто заходим на сайт разработчика в раздел загрузок и скачиваем.

Шаг 2. Настройка и наполнение товарами.

Вот тут уже интереснее. Мы пропускаем шаг установка на хостинг и сразу приступаем к настройке. Все это возможно потому, что HEEG.HTML-это просто html страница. Работать с ней мы можем прямо со своего компьютера.

Это будет несомненным плюсом для новичков, у которых еще не куплен хостинг: просто скачай скрипт и начинай делать свой интернет-магазин, а когда придет время — купишь хостинг.

Приступаем к настройке. Для начала вам нужно разархивировать скаченный архив «heeg5.1.1.zip». После распаковки вы увидите такую структуру папок и файлов:

Чтобы войти в магазин, вам нужно запустить файл heeg.html обычным браузером, например Google Chrome.

Откроется главное окно вашего интернет-магазина:

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

Добавление, удаление, клонирование товаров и разделов происходит через меню «галочка» в правом верхнем углу. Если вам нужно очистить магазин от базовых товаров и разделов, сделать это можно через настройки на вкладке «удалить»

Давайте посмотрим как происходит редактирование товара. Для этого раскроем какой нибудь товар, например «Розовые розы» и нажмем пиктограмму «Редактировать заметку».

Откроется окно редактирования товара:

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

За принадлежность к категории отвечают метки (кроме того их можно использовать для задания таких свойств как «Новинка»). Правда категории (как и коды товаров) обозначаются не русскими буквами, но при этом вовсе необязательно держать в голове соответствие русским названиям. Дело в том, что метка раздела присваивается автоматически в зависимости от того, в какой раздел вы добавляете новый товар или подраздел.

Новые свойства товаров тоже можно добавить прямо на странице редактирования товара. Как становится понятно из видеоуроков, значения свойств- это НЕ просто строка, они  сохраняются во встроенной базе данных. То есть вы можете добавить новое свойство товару, например цвет или размер L XL , ссылаться на эти поля в описании товара при помощи вики-разметки вида {{!!color}} или {{!!size}} и как в обычной базе данных, осуществлять поиск и делать выборки по этим полям. Например, показать все красные куртки размера XL не дороже 1000 рублей.

Шаг 3. Разделение файла.

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

После скачивания на вашем компьютере появится файл «node-v4.4.2-x64.msi». Установите эту программу. Затем в папке с движком запустите файл «startWiki.bat». Затем в этой же папке запустите «static_site.bat». Откроется черное окошко, потом закроется и у вас в папке с движком появится папка «output», а в ней папка «static». Содержимое папки static и есть ваш сайт. Его нужно будет залить на хостинг.

Теперь если вы захотите внести изменения на сайт и вам нужно, чтобы поисковики заметили эти изменения, то необходимо снова запустить файл «static_site.bat», чтобы снова сформировать файлы в папке static. Эти файлы нужно будет перезалить на хостинг.

Непривычно, правда? Получается редактор сайта, т.е. админка будет находиться на вашем компьюторе. Конечно, необязательно каждый раз при перенастройках нарезать и перезаливать весь сайт целиком, магазин heeg.html  будет отлично работать и без этой нарезки, поэтому на этапах настройки будет достаточно перезаливать только этот один файлик heeg.html и новые картинки. НО для правильной индексации нарезка в статику обязательна. Если просто переименовать фаил heeg.html в index.html, магазин будет работать, но поисковики его не увидят.

Шаг 4. Заливка на хостинг.

Вот тут все просто: нужно файлы из папки static загрузить на хостинг. Никакой базы данных, никакой установки — просто скопировать и все. Как всегда мы  все протестировали на хостинге beget.ru. Вот такой сайт получился после заливки и распаковки архива: http://ufaweb.bget.ru/.

Плюсы и минусы HEEG.HTML

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

Плюсы:

• Не нужен дорогой хостинг. Т.к. интернет-магазин — это всего лишь HTML страница , подойдет самый простой (и даже бесплатный) хостинг без поддержки PHP и баз данных.
• Легко устанавливать. Вся установка — это копирование HTML файлов на хостинг.
• Легко встраивать. Данный интернет — магазин можно развернуть как самостоятельный сайт или встроить в уже имеющийся сайт. Встраивание осуществляется очень легко т.к. нужно просто добавить файл движка в папку к имеющемуся сайту. Можно так же встроить на сайт VK.Com
• Сайт быстрый. Так как сайт интернет-магазина полностью загружается на компьютер посетителя, дальнейшая работа с сайтом не зависит ни от скорости хостинга, ни от скорости интернет соединения. Работа с сайтом будет возможна, даже если соединение с интернетом оборвется.
• Вики-разметка. При оформлении страниц можно использовать wiki-разметку, т.к. эта CMS разработана на wiki-движке.

Минусы:

• Непривычная админка. Админки в том виде, в каком мы привыкли в обычных серверных скриптах, нет. Вместо этого предлагается способ редактирования страниц, который используется в википедии.
• Трудно будет расширить функционал. Обычно у более известных движков имеется магазин расширений, как платных, так и бесплатных. В данный момент у движка есть модуль расчета доставки по России двумя транспортными компаниями, три модуля для платежных систем, модуль скидки по времени и, пожалуй, всё. Если вам необходимо что-то большее, то это нужно будет заказывать за деньги.
• Обработка заказов происходит не через админку движка.  Из-за того что HEEG.HTML не использует базу данных, для хранения информации по заказам используется внешний источник данных: гугловские таблицы. Минус такого подхода в разрозненности информации: менеджеру нужно обучаться работать с двумя разными интерфейсами; при попытке настройки интеграции с другими информационными системами нужно разрабатывать два алгоритма.

Когда следует выбирать HEEG.HTML?

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

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

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

В третьих, HEEG.HTML удобен когда нужен переносной магазин: ведь магазин на этой CMS — это просто html-файл, который можно даже отправить электронным письмом.

Резюме

Если вам нужно быстро запустить небольшой интернет-магазин на бесплатном или дешевом хостинге, то HEEG.HTML-это то что вам нужно. Он бесплатен, не имеет ограничений по количеству товара и, главное, он полностью готов для организации торговли в России: расчет доставки, оплата, интеграция с 1С (скоро) — все это уже есть и работает.

PS

В процессе работы с движком начинаешь понимать, что этот самый простой движок не такой уж и простой. В нем использованы все самые современные технологии сайтостроения. Некоторые моменты вызывают полный восторг, другие недоумение. Например, момент привязки гугл- формы к магазину больше похож на языческий танец с бубном, а заливка тысячи товаров через таблицы EXCEL  похожа на хождение по минному полю, при котором даже одна лишняя кавычка приводит к невозможности заливки на сайт базы товаров. К счастью, у движка есть форум и отзывчивая бесплатная техническая поддержка (которая обещает все поправить в следующих версиях). На сегодняшний момент движок (с некоторыми оговорками и неудобствами) может справиться со всеми задачами крупного магазина. Хороший он или плохой-решать конечно Вам. Если по каким-то причинам нужно будет перенести магазин на другой PHP-движок, вы всегда это сможете сделать через выгрузку или табличку Excel.