воскресенье, 29 декабря 2013 г.

Решения на Google Apps: Интернет-лукошко для сайта

Желание добавить собственному веб-проекту на основе Google Sites характеристики, присущие интернет-магазину, появилось у меня ещё при первых попытках его создания. Уже тогда существовало достаточное количество решений для реализации этого желания.

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

С того момента прошло немало времени. Менялись сервисы Google - менялся и я. Но однажды наступил день, когда стало ясно - дальше ждать того, что разработчик создаст решение, хотя бы чуточку соответствующее моим требованиям, нет никакого смысла. Проще создать его самому. Точнее, вместе с коллегами.

И вот, в преддверии этого Нового Года у нас появилось немного времени для реализации моего желания. Результат чего мы с коллегами и хотим представить сегодня - Интернет-лукошко для сайта.

Это решение можно считать логическим продолжением Прайс-калькулятора. По сути - это инструмент, позволяющий сформировать, определить стоимость и разместить заказ на основе отобранных на интернет-витрине товаров (услуг). Сразу отмечу, что решение не является сервисом для создания полнофункционального интернет-магазина. Это, скорее, демонстрация возможностей создания решения “под себя” с использованием функционала сервисов Google.

Основной характеристикой, которой мы придерживались при создании решения, являлась простота:
  • Простота управления интернет-витриной - в качестве базы данных используется Таблица Google со всеми возможностями автоматизации групповой работы, присущими сервисам Google Apps.
  • Простота пользовательского интерфейса - это одностраничное приложение, которое можно добавить как на страницу обычного сайта, так и Google Sites. Всего 4 простых шага для размещения заказа:
    Выбор категории - Выбор позиций - Задание количества - Оформление заказа
  • Простота управления базой заказов - в качестве базы данных также используется Таблица Google со всем ее встроенным функционалом (например, оповещение о добавлении заказа), а также с возможностью обработки поступивших данных через пользовательский интерфейс, созданный, например, с помощью Google Apps Script.

!!! ВНИМАНИЕ: В связи с тем, что Google внес изменения в работу с формами, данный алгоритм установки решения уже не актуален. В случае создания новой версии приложения, приведенный ниже алгоритм будет заменён на новый. Спасибо за понимание.

Установить решение на свой Google-сайт можно следующим образом:

1. Создание Базы объектов

1.1. Откройте из своего аккаунта Google таблицу, расположенную по адресу:

https://docs.google.com/spreadsheet/ccc?key=0AjIKIW5VKYQgdEdwREtzS1VwT2RSVE1MUVNsN3plRkE#gid=0

и создайте свою копию (Файл - Создать копию...). ВАЖНО: Чтобы иметь возможность создать копию, надо открыть таблицу из вашего аккаунта Google.

1.2. Откройте свою копию таблицы и опубликуйте её, выбрав в меню: Файл - Опубликовать в Интернете... - Начать публикацию.

В данной таблице вы можете менять содержание столбцов, добавлять или удалять строки. Заголовки столбцов и их количество менять нельзя.

В столбцах указывается:
  • артикул позиции (art)
  • ее наименование (name)
  • категория (category)
  • единица измерения (unit)
  • цена за единицу (price)
  • количество в каталоге (catalog). Если стоит цифра 0 - позиция не отображается.
  • описание (description)
  • ссылка на фото (photo). Рекомендуемый размер фото - до 500х500 пикселей.
1.3. Скопируйте (например, в Блокнот) ключ вашей таблицы. Ключ расположен в URL-адресе таблицы, который имеет вид:

https://docs.google.com/spreadsheet/ccc?key=0AjIKIW5VKYQgdEdwREtzS1VwT2RSVE1MUVNsN3plRkE#gid=0

Таким образом, ключ таблицы находится после “key=” и до “#gid=0” и представляет собой 44-символьную строку вида:

0AjIKIW5VKYQgdEdwREtzS1VwT2RSVE1MUVNsN3plRkE


2. Создание Базы заказов

2.1. Откройте из своего аккаунта Google таблицу, расположенную по адресу:

https://docs.google.com/spreadsheet/ccc?key=0AjIKIW5VKYQgdHhIb3U5endPQzlieDJrREZiOVhucVE#gid=0

и создайте свою копию (Файл - Создать копию...). ВАЖНО: Чтобы иметь возможность создать копию, надо открыть таблицу из вашего аккаунта Google.

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

Состав заказа в данной версии имеет вид списка, разделенного запятыми, формата артикул=количество позиций.

2.2. Откройте из вашей копии таблицы Форму заказов (Форма - Перейти к активной форме) и скопируйте (например, в Блокнот) ее ключ.

Ключ расположен в URL-адресе формы, который имеет вид:

https://docs.google.com/…/forms/d/1OrF-Yh8oE0GkOVzGYmNZxI5Kk4B7VWJ_SY1Qo23S47S/viewform

Таким образом, ключ таблицы находится после “d/” и до “/viewform” и представляет собой 44-символьную строку вида:

1OrF-Yh8oE0GkOVzGYmNZxI5Kk4B7VWJ_SY1Qo23S47S


3. Установка гаджета на Google-сайт

3.1. Откройте страницу вашего сайта Google Sites, на которую хотите поместить Интернет-лукошко. В режиме редактирования страницы добавьте новый гаджет (Вставить - Дополнительные гаджеты... - Добавить гаджет по URL). URL гаджета:

http://hosting.gmodules.com/ig/gadgets/file/100809323395134262586/lukoshko.xml

3.2. В настройках гаджета укажите:

  • Ключ вашей таблицы с Базой объектов (скопированный ранее в п.1.3) - обязательно!
  • Ключ Формы заказов (скопированный ранее в п.2.2) - обязательно!

Гаджет имеет минимально допустимые размеры:
ширина - 1024 пикс.
высота - 1500 пикс.

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

Пример установленного гаджета:
http://examples.cloudy-office.ru/internet-lukoshko

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

Комментарии

comments powered by HyperComments