Урок 2. Делаем бесплатный магазин Вконтакте.

Текстовая версия урока

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

Приступим. Как и в предыдущем уроке мы начнем создание нашего магазина со скачивания шаблона. Единственное отличие в том, что нам нужен шаблон, содержащий в названии архива код vk, который говорит нам о том, что в шаблоне уже установлен модуль API Вконтакте. Заходим на сайт heeg.ru, переходим в раздел СКАЧАТЬ. Как мы видим на момент урока доступна версия магазина вконтакте номер 3.6. Скачаем архив и распакуем на рабочий стол.

Посмотрим что в архиве. Набор фаилов архива абсолютно такой же как и в стандартном магазине heeg.html, поэтому если вы не делали предыдущий урок вам необходимо установить на компьютер node.js и установить wiki запустив startwiki.bat если вы это уже делали в предыдущем уроке, то вам конечно этого делать не нужно.

Давайте сразу откроем шаблон нашего магазина heeg.html. На первый взгляд это точно такой же магазин как и в предыдущем уроке. Немножко отличается меню в товаре и меню галочка добавился новый пункт «Верхнее меню» В прошлом уроке я подробно рассказывал как создавать новые товары и разделы при помощи меню «галочка» в этом уроке я об этом рассказывать не буду. Лучше давайте представим, что у нас есть уже готовый магазин семян предыдущей версии 3.5 и нам нужно из него перекинуть все товары и разделы в новую версию 3.6, а заодно сделать магазин вконтакте. Для начала перенесем папку с картинками из старого проекта.

В системе tiddlywiki очень много вариантов импорта и экспорта. Самый простой это вариант «перетаскивания» любых статей из одной wiki в другую. Давайте откроем магазин из предыдущего урока и перетащим в наш новый магазин один раздел и один товар. Удобнее всего открыть 2 вкладки хрома.

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

Метод «перетаскивания» нам подойдет если нам нужно перенести одну или несколько статей, а что же нам делать если в старом магазине у нас тысяча товаров и разделов. В этом случае нам подойдет вариант экспорта через формат json.

Перейдем в поиск на вкладку с фильтрами и найдем все наши статьи, которые мы считаем товаром или разделом. Мы с вами помним что все товары у нас помечены меткой (или тегом) $:/Note, а все разделы у нас помечены меткой $:/TOC давайте зададим эти фильтры и посмотрим, что нам покажет поиск напишим первый фильтр [tag[$:/Note]] и тут же второй [tag[$:/TOC]] внизу мы увидим все товары и разделы нашего магазина. Рядом с поисковой строкой (НЕ путать с меню «Галочка») нажмеме кнопку экспорта и выберем формат json и сохраним его. Обращаем внимание, что ie нам поставил не то расширение, поэтому меняем его вручную на json.

Теперь если мы перетащим наш новый файлик на новый магазин, в него перенесутся все статьи из него. Давайте удалим все товары и разделы из нашего вк магазина и зальем наши товары…. КРОМЕ статьи !heeg Обращаем внимание что у нас перестали отображать пункты верхнего меню. Почему так. Мы помним, каждый раздел собирает в себе товары и разделы содержащие метку совпадающую с названием (точнее кодом) данного раздела. В версси 3.5 верхнее меню собирало разделы с меткой «Распродажа», что было не очень логично, а в новой версии 3.6 в верхнем меню собираются разделы с меткой Верхнее меню. То есть чтобы отобразить старые разделы верхнего меню в новой версии магазина, нам нужно метку «Распродажа» заменить на метку «Верхнее меню» . Мы конечно могли бы заменять метки заходя в каждый раздел, но давайте поучимся менять метки пакетом. Для этого перейдем в настройки на вкладку «заменить метки» ищем метки «Распродажа» и заменяем на метки «Верхнее меню» все ок наши старые разделы появились в верхнем меню.

Будем считать, что наш магазин готов. Мы познакомились с двумя способами импорта-экспорта через «перетаскивание» и формат json. Есть еще один полезный метод импорта через таблицы excel Этот метод нам может понадобится, если мы захотим массово поменять в таблице цены или описания. Постараюсь рассмотреть его в своем следующем уроке.

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

По умолчанию к магазину привязана форма демо- магазина. Давайте сделаем заказ и посмотрим где он появится. Закажем… перейдем в табличку и посмотрим как отобразился наш заказ. Все это конечно здорово но нашего магазина нам нужна своя форма заказа. Давайте создадим ее. Для этого у вас должна быть зарегистрирована почта на г-меил.

Через посковик находим где у на делаются гугл формы и нажимаем «Открыть гугл формы» как видите у меня уже сесть несколько форм, в том числе форма для магазина новые подарки. Вот так она выглядит. Нам она не нужна, нам нужно создать точно такую же, но под наш магазин семян.

Жмем красный плюс в правом нижнем углу, и создаем в форме те же текстовые поля, что написаны в хелпе с сайта Heeg.ru переписываем названия полей….. и нажимаем глазик, чтобы посмотреть что у нас получилось. Отлично все поля на месте, закроем и отправим форму к себе на почту. -Ставим галку «включить форму в сообщение» вбиваем свою почту и смотрим, что нам пришло. Так форма к нам пришла, теперь ее код нужно перенести к нам в магазин. Щелкам правой кнопкой мыши в начало формы на слово Если и выбираем «проверить элемент» если ваш браузер IE или «посмотреть код» если вы в хроме.

Перед вами откроется DOM-дерево из которого мы должны скопировать код нашей формы он будет начинаться с <div id="style_14595108220000000751_BODY"> или что-то <div id=":11o" class="ii gt m153d2414c1fec089 adP adO"> если у вас гугл почта. В любом слулае это будет самый верхний раскрытый треугольник, который означает начало содержимого письма с формой. Щелкаем на код этого див правой кнопкой мыши и выбираем «изменить как HTML» копируем в буфер (CTRL+C) выделенный текст и переходим в наш магазин. Ищем статью, которая называется google_form через поиск на системной панели. Выбираем редактировать и вставляем код из буфера. Это еще не все. Теперь этот код нам нужно немножко отредактировать. Ищем место, где начинается наша форма. Она начинается с тега

меняем этот блок на блок, который указан в хелпе на сайте heeg.ru <iframe name="my_iframe" style="display:none;"></iframe> <form action="https://docs.google.com/forms/d/1D4cho-vxcDc-pnLhhMSODcHMfOoc6Om9vtO9iIjsbkc/formResponse" method="POST" target="my_iframe" > Теперь в этом блоке нужно поставить уникальный код вашей формы. Найти его можно в самом начале кода, который вы скопировали из dom-дерева он идет после кода /forms/d/. Копируем этот код формы на место кода из хелпа. Теперь нам нужно перейти в конец кода нашей формы и найти место со словом «Готово» такой код<input name="submit" type="submit" value="Готово"> и заменить его на код из хелпа <input type="submit" value="Готово"> и мы заканчиваем редактирование нашей гугл формы. Нажимаем галочку для внесения изменений и сохраняем наш проект под новым названием например vk.html (если вы не делали предыдущий урок название стоит оставить прежним heeg.html) . Теперь давайте проверим работает ли наша форма и приходят ли в нее заказы. Делаем заказ и смотрим в гугл формах он появился. Чтобы на почту магазина и клиента приходило напоминание необходимо поставить в форму дополнение notify …..ставим и указываем ему из какого пункта брать почту клиента… и привязываем нашу таблицу для заказов. Теперь все готово и в нашу таблицу будут поступать заказы. Проверим…. И заказ в таблице. Магазин уже готов, но его еще нет вконтакте. Да и в интернете его тоже нет, он пока только на нашем рабочем столе. Перед тем как привязывать наш магазин вконтакте его нужно выложить на любой бесплатный хостинг. Я воспользуюсь хостингом neocities из прошлого урока и залью новый магазин вконтакте на сайт магазина семян. Если вы не делали предыдущий урок, вам нужно зарегистрироваться на этом хостиге и не забыть залить на него папку с картинками. И так открываем сайт neocities точка орг, и заливаем в корневую папку наш магазин фаил vk.html (если вы не делали предыдущий урок heeg.html). Давайте перейдем на страничку с нашим магазином. И так наш магазин теперь есть в интернете и виден всем. Теперь вяжем его вконтакте в качестве iframe приложения. По правилам вконтакте магазин может быть привязан только к группе (оно же сообщество). Поэтому создадим группу любителей семян. Будем считать, что страничка вконтакте у вас есть, если нету , то нужно будет зарегистрироваться. Открываем нашу страничку вконтакте. В левом меню выбираем пункт мои группы и нажимаем кнопку «Создать сообщество» пишем название группы и нажимаем кнопку создать сообщество. На открывшейся странице мы можем настроить нашу группу. Давайте для примера выберем «Включить сообщения сообщества» и нажмём кнопку сохранить. Теперь создаем приложение с нашим магазином. Для этого в левом меню выберем пункт «приложение», затем «управление» и нажмем кнопку «создать приложение» Добавляем название своего магазина, описание ставим точку iframe/flash приложение можно выбрать тип «приложение» категория «магазины» и нажмем кнопку «перейти к загрузке приложения» получаем sms код на номер телефона к которому привязана наша страница, вводим его и переходим к настройкам приложения. В «информации» выберем группу для приложения. В настройках состояние выбираем «приложение включено и видно всем» в пункт Адрес IFrame: и HTTPS-адрес IFrame: вставляем адрес нашего магазина с https включая нашу страницу vk.html (если вы не делали предыдущий урок heeg.html)размер iframe можете поставить любой. Например 1000 х 1000. Смотрим, что у нас получилось и в настройках ставим галку «Выводить ссылку на приложение в меню слева» Вот и всё наш магазин готов. Ссылку на него вида http://vk.com/app5269819 мы можем разослать всем нашим друзьям. Продвигайте свою группу. Пишите интересные новости и товары вашего магазина будут интересны вашим клиентам.