Версия магазина 3.5

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

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

И так приступим: Заходим на сайт heeg.ru и скачиваем самую последнюю версию интернет магазина. В моем случае это будет версия 3.5 Скаченный архив распаковываем в нашу папку c проектом. В нашем архиве находится основной файл магазина heeg.html, с которым мы и будем работать. в него мы будем добавлять наши товары и разделы, менять дизайн и настраивать наш будущий магазин. Давайте откроем этот файл. Как мы видим изначально наш магазин совсем не пустой. Для примера в него добавлены некоторые товары и разделы, которые мы позже удалим, но перед этим всё тщательно изучим. В нашем магазине 2 меню – верхнее с информацией о компании и левое меню с каталогом наших товаров. Также есть шапка с логотипом компании, телефоном и почтой, которые нам нужно будет поменять и отдельная плашка с корзиной, в которой пока ничего нет. Если мы попробуем добавлять товары в корзину, мы увидим, что цифры в этом поле меняются.

Остальную часть окна занимает содержимое нашей текущей статьи или как она называется в Tiddlywiki тиддлер. Статья может быть просто заметкой, разделом, товаром или системной статьей. Вверху статьи находится панель редактирования статьи. Панель состоит из кнопки закрыть (крестик)домой (домик) навигационных кнопок. Цифры показывают сколько есть статей содержащих метку, которая совпадает с названием текущей стати и сколько есть статей содержащих такие же метки как и в текущей. Учитываются не системные метки, то есть метка должна начинаться не со значка доллара. И самое главное, что есть в нашей панели редактирования статьи - это мню галочка «V» в ней находятся кнопки создания и редактирования статьи. Первая статья, на которую мы попадаем при открытия магазина это статья «каталог» . Здесь мы видим ее название. Если люди к нам приходят из поисковой системы, они будут попадать на статью «витрина», которая по умолчанию копирует данные из статьи «каталог», но может различаться. Теперь давайте походим по разделам и посмотрим как выглядят наши плитки с товарами. Мы видим, что плитки немножко отличаются друг от друга. У них могут быть уголки разного цвета с метками hot (самые популярные товара магазина) new (новинки магазина) и sale (товары с привлекательной ценой. Не трудно догадаться, что у нас всегда будут 3 специальных раздела, в которых мы будем показывать все товары содержащие данную метку. Товары с меткой sale мы покажем в разделе Распродажа, товары с меткой hot мы покажем в разделе «Лидеры продаж», а все новинки New мы соберем на нашей главной странице Каталог. То есть как только мы добавляем одну из трех меток (или создаем товар с такой меткой), товар начинает отображаться в нужном разделе. Давайте попробуем найти товар без таких меток, добавить к нему метку new и посмотрим появится ли наш товар в разделе Каталог. Метку new можно добавить просто набрав ее название в поле или, так как ранее мы эту метку уже использовали она есть в нашем выпадающем меню. …… мы увидели товар появился…… удалим метку, товар исчез. Вся система Tiddlywiki основана на метках и полях . Метками (наши желтые овальчики) мы определяем к какому типу относится статья . Например метка $:/TOC говорит нам о том, что статья является разделом, а метка $:/Note, говорит нам о том, что это товар. Метками также обозначаем, в каком разделе мы будем отображать наш товар или раздел.

В полях мы описываем свойства нашего товара и раздела. У товара это может быть цена, цвет, форма, вес, размер итд вы сами решаете какие свойства у вашего товара. У раздела будут другие свойства – описание раздела description (это поле выводится с серой чертой слева) служебное поле list в котором указывается в каком порядке следует отображать пункты меню или служебное поле caption, которое показывает как название товара будет отображаться в меню и многие другие поля. Самое большое поле, которое есть в любой статье это поле text в него мы и записывает содержимое нашей статьи. Давайте еще поучимся работать с метками и полями. Допустим, мы хотим перенести товар из одного раздела в другой. Давайте один из букетов для любимой перенесем в раздел цветы на свадьбу. Для этого заходим в товар удаляем метку отвечающую за текущий раздел и ставим метку с новым разделом. Смотрим…. Наш товар перенесся. Теперь задача посложнее. Давайте все наши три подраздела перенесем в верхний раздел Каталог, а сам раздел «букеты цветов» удалим. Для этого в режиме редактирования открываем каждый раздел, удаляем у него метку «букеты цветов» и ставим метку « каталог» смотрим…. Наши разделы перенеслись а раздел «букеты цветов» стал пустой – удаляем его нажав кнопку корзина из меню галочка.

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

Ну что же мы все редактируем, давайте уже создадим свой раздел и положим туда свой новый товар. Раздел мы можем создать в верхнем меню. Для этого его нужно поместить в раздел распродажа (что не очень логично) давайте попробуем создать раздел в верхнем меню…. Получилось. Но так как мы планируем создавать раздел с товарами давайте создадим его в левом меню. Для этого создадим наш новый раздел в разделе Каталог. И назовем его «Цветы в горшках» Зайдем в наш раздел, он пока пустой. Добавим в него какой-нибудь цветок в горшке. Скачаем изображение из интернета…. Добавим цену и описание, поставим метку new – смотрим –все получилось. Мы сделали много изменений, но если мы сейчас просто обновим страницу, то все наши изменения пропадут. Давайте все-таки сохраним наши труды под новым именем….

теперь давайте научимся создавать свой особенный магазин. Например я хочу создать магазин семян. Прежде всего нужно поискать похожий магазин, который бы вам понравился. Для моего урока хорошо подойдет магазин Кингссидс. Я возьму оттуда картинки и цветовую гамму. Открываю сайт … Сохраню для примера себе логотип… выбираю несколько картинок для товаров . Картинки товаров я взял из яндекс картинок. Желательно, чтобы картинки были горизонтальной ориентации и не меньше чем 800х600 пикселей, тогда они лучше смотрятся на экране. Для слайдера я уже сохранил несколько картинок из интернета хорошего качества, осталось их только обрезать под нужный мне размер 1000х400 пикселей. Если у вас есть программа Photoshop и вы умете им пользоваться, то все фотографии лучше обрабатывать в нем. Если фотошопа под рукой нет, воспользуемся он-лайн графическим редактором PIXLR, для этого вы можете перейти на сайт редактора или открыть его в своем магазине в настройках на вкладке «Внешний вид» на подвкладке «Фоторедактор» Открываем вкладку, выбираем «Загрузить изображения с компьютера» и выбираем в нашей папке ту фотографию, которую мы бы хотели обрезать. Мы видим, что изображенеи больше, чем нам нужно и у него другие пропорции, поэтому сначала пропорционально уменьшим картинку до ширины в 1000 пикселей. Меню Изображение-Размер изображения – ширина 1000 пикселей. Для обрезки по высоте выбираем инструмент «кадрирование» Ограничение : Выходной размер и ставим нужный нам размер 1000х400 пикселей. Растягиваем наш инструмент от левой до правой границы рисунка и выбираем область под обрезку и жмем Enter. Сохраняем обрезанное изображение в папку. Теперь давайте поэтому же принципу. Максимально «откропим» логотип и подгоним до размера 465х78 пикселей. Как мы видим в шаблоне логотип более вытянутый, поэтому подгоняем высоту изображения под 78 пикселей и увеличиваем размер холста до 465 и сохраняем в папку.

Превью товаров желательно делать 150х150 пикселей – это на много ускорит загрузку страницы.

В этом он-лайн приложении есть огромное количество инструментов для обработки фото. Обязательно посвящу этому отдельный урок.

И так мы подготовили наши фото: несколько красивых фотографий для слайдера ( их мы положим в паку images) и фотографии для наших товаров ( положим в папку images/products).

В нашем магазине остались букеты цветов, на которых мы тренировались. В новом магазине их надо убрать. Мы конечно можем открывать каждый товар и раздел отдельно и нажимать кнопку удалить, но это будет довольно долго, поэтому проще пойти в настройки на вкладку «удалить» и нажать всего 2 кнопки «Удалить все разделы» и «Удалить все товары» . поле этого, мы увидим, что не все наши разделы удалились. Осталось все товары и разделы, в которых стоит метка «undelete» а именно 4 раздела в верхнем и два в правом меню. Эти разделы нам еще пригодятся.

В разделе «каталог» все еще продолжают крутиться картинки, которые нам уже не нужны, давайте заменим их на наши картинки с овощами. Для этого нам нужно найти статью с названием slider1. Для этого воспользуемся поиском на системной панели. Из меню галочка нажимаем двойную стрелку << и в поле для поиска пишем slider1 это обычная статья, для поиска в системных статьях, нам бы пришлось нажать кнопку с увеличительным стеклом рядом с полем поиска. Перейдем к нашей статье и увидим, что она действительно состоит из одного нашего слайдера. Из меню галочка выберем пункт «редактировать» и посмотрим html код нашего слайдера. Слайдер рассчитан максимум на 7 картинок и 7 подписей к ним. Мы подготовили только 4, поэтому некоторые из них повторим дважды. Для изменения картинок, нам нужно просто поменять названия jpg и подписи с описаниями к ним….. хорошо, нажимаем галочку для подтверждения сохранения и смотрим результат.

Так же нам нужно найти через поиск и поменять 2 блока – это блок motivacia и левый рекламный блок reclama. С этим можно разобраться самостоятельно.

Теперь нам нужно поменять логотип. Настройки-внешний вид-цветовая схема и меняем старое название лого на своё. Смотрим как вставилось наше лого. Лого вставилось хорошо и даже не нужно подгонять его размеры, но по цветам оно совершенно не сочетается с нашим сайтом. Давайте выберем какую-нибудь стандартную палитру и подгоним цвета на ней. Настройки – внешний вид- цветовая схема. видим что есть набор цветов с названием green (зеленый) выбираем. Лучше, но зеленый все равно не такой. Давайте его поменяем на цвет нашего логотипа. Верхнее меню сделаем зеленым, а левое синим. Открываем наш логотип опять в редакторе, выбираем пипетку и щелкаем на наш зеленый, теперь щелкаем по окошку с цветом и видим, что код нашего цвета в HEX #a5cc39 . Выделяем этот номер и копируем. Переходим на вкладку цветовая схема. Крутим примерно до середины и находим «Цвет верхнего меню» вставляем туда код нашего цвета. Также цвет нашего синего копируем в поле «цвет кнопок при наведении». Цвета поменялись, стало довольно неплохо, но вот фон сильно выбивается, его цвет слишком теплый для нашей цветовой схемы давайте попробуем заменить его на фон из папки swirl.png он серый и должен подойти. В самом верху палитры пишем название нашего фона. Мне не очень нравится градиент на кнопках в корзину (поправлю его позже), но в целом хорошо,

сохранимся под новым именем.

Теперь меняем в шаблоне почту и телефон на свои. Заходим контакты – телефон, и из меню галочка выбираем редактировать. Меняем почту и телефон . Обращаем на довольно странный код с двумя собачками – это один из элементов вики разметки и двумя собачками можно ввести новый стиль. Когда мы будем наполнять наш сайт текстом нам понадобится выделять заголовки, делать списки, писать жирным и наклонным текстом. В вики-разметке я предлагаю вам разобраться самостоятельно при помощи простой таблички на сайте heeg.ru/heeg.html раздел «вопросы и ответы» и вопрос « как сделать жирный шрифт». И так мы поменяли наш телефон и почту, но эта почта для связи с нами. Чтобы к нам приходили на почту заказы клиентов, почту нужно указать в настройках на вкладке «Цены» в поле «почта магазина» там же можно внести другие изменения. На вкладке «Сведения» можно поменять название нашего магазина на «магазин семян».

Пришло время создать разделы и товары в магазине. Мы торгуем семенами, поэтому разделы будут овощи, ягоды и цветы. Зайдем в раздел «каталог» выберем из меню галочка «создать раздел» в верхнем поле поменяем текущую дату на название раздела «Овощи» строчку с вкладками не меняем. Обязательно заполняем поле «description» в нем должно быть подробное описание раздела. Подтвердим галочкой редактирование. Мы видим, что в конце левого меню появился наш раздел. Пока в нем нет товаров, он пустой. Закроем его крестиком и так же создадим еще два раздела в разделе «каталог» ягоды и цветы. Обращаем внимание на метки, которые присваиваются нашим разделам. Они так же появились в левом меню, но нам немножко не нравится порядок их отображения. Допустим мы хотим, чтобы пункт «распродажа» был в конце нашего левого меню. Для этого редактируем поле list раздела «Каталог» в котором через пробел указываем наши разделы. Если в названии раздела есть пробел, то оно заключается в двойные квадратные скобки , например Семена трав. Теперь добавим несколько товаров в раздел «овощи». Для этого перейдем в этот раздел и выберем из меню «галочка» пункт «создать товар» Теперь внимательно. Важное требование к любой базе данных- это уникальность названия (ключа) каждого элемента. Сделать названия разделов уникальными довольно легко, а вот товары очень часто называются одинаково. Поэтому для названия товара есть отдельное поле nazvanie, а в верхнее поле title нам нужно написать уникальный код, а именно код товара из цифр, тогда на плитке он будет показываться в виде полосок штрих-кода. Пока наберем случайный набор цифр. Следующее поле текстовое. Оно предназначено для характеристик товара, которые не вошли в основные поля и для его полного описания. Для краткого описания предназначено поле “description” оно выделяется в карточке товара серой полосой слева. Давайте скопируем с любого сайта произвольный текст и заполним эти поля. Теперь нужно добавить маленькое изображение для превью, но так как мы его пока не подготовили, добавим большое, оно автоматически погонится под нашу плитку. Это же изображение вставим в поле subtitle. В этом поле можно показывать разный контент : фото, видео или слайдер со стрелками для нескольких изображений товаров. Заполним стоимость, вес и объем товара, эти поля нам нужны для правильного расчета стоимости пересылки товара в другие регионы. Если мы добавим поле old_price и напишем в него 150 руб, то на карточке появится зачеркнутая цена. Поля в карточке товара могут быть абсолютно любыми. В нашем случае можно создать поле и указывать в нем количество семян в упаковке, рост растений и вес плодов. Значения любого поля можно вывести в карточке при помощи фигурных скобок и сохранить как шаблон. Например покажет нам значение поля стоимость. Без восклицательных знаков будет выведено содержимое статьи с названием stoimost, если такая есть. Теперь по аналогии создадим еще несколько товаров …. присвоим им метки hot new sale. Про импорт и экспорт большого количества товаров я расскажу в других своих уроках.

Будем считать, что наш маленький магазинчик семян готов сохраним его под новым названием, и перезапишем нашу основную страницу heeg.html откроем эту страницу. Магазин получился довольно неплохим, правда кнопки 'в корзину' нужно поменять, но мы это сделаем в следующем нашем уроке. У нас есть несколько разделов, товаров. Мы можем попробовать положить их в корзину и отправить тестовый заказ. Но для того, чтобы покупатели попали в наш магазин, нужно выложить его на хостинг в интернет. А для того чтобы к нам заходили еще и поисковики, у него должна быть определенная многостраничная структура и карта сайта для поисковых роботов.

Давайте создадим такую структуру. Для этого из архива или с сайта разработчика установим Nodejs после установки запустим файл startWiki.bat он нужен для установки wiki на ваш компьютер. Теперь нарежем наш heeg.html на много статичных файлов для этого запустим static.bat после того как белые буковки пробегут по черному фону в нашей папке с проектом появится папка output, а в ней папка static . Выложим содержимое папки static на хостинг. На примере бесплатного хостинга neocities.org покажу один из способов, как это можно сделать. Заходим на сайт, вводим название нашего сайта и обращаем внимание на обязательную приписоку к названию сайта, чтобы ее убрать нужно будет заплатить, вводим теги , пароль, почту и ставим галку « я не робот» Нажмем кнопку edit site. Создадим папки под наши картинки images, а в ней папку products. Загрузим в эти папки наши картинки, а в корень скопируем все наши странички и файлы кроме .htaccess этот хостинг его не поддерживает. Все готово, давайте перейдем на адрес нашего сайта и проверим все ли работает…. Хочу отметить, что бесплатные хостинги имеют ряд ограничений, по размеру сайта, способу загрузки содержимого и они не всегда стабильно работают, поэтому для реального проекта луше воспользоваться любым платным хостингом. Если ваш бизнес находится в Москве, можно попробовать хостинг Агава за 120 рублей в месяц. На этом хостинге размещены все мои сайта и пока проблем не было. Всем спасибо. В следующий уроках я хочу более подробно остановится на изменении внешнего вида сайта, работы с яндекс метрикой для магазинов и вариантах импорта-экспорта товаров и разделов в магазин. Пока!