Пример создания самого простого интернет-магазина при помощи визуального редактора и генератора метатегов

Введение

Итак, Вы уже научились создавать самый простой сайт из трех страниц с помощью визуального редактора вэб-страниц и генератора мета-тэгов. А здесь мы посмотрим, как с помощью этих простых инструментов можно создать самый простой интернет-магазин. Здесь сейчас прямо на Ваших глазах будет создан самый примитивный интернет-магазин. Более простого интернет-магазина уже не бывает. Очень сложный многофункциональный интернет-магазин создается очень долго и нужно много чего знать. Да и часто такой сложный интернет-магазин бывает в реальности не нужен. Нам сейчас главное это уловить суть того, как они делаются, узнать основные принципы. И нам это нужно узнать и понять, как можно быстрее и проще. Поэтому надо будет сделать очень простой интернет-магазин, без всяких излишеств. Правильно? И мы снова создадим его для нашего Васи Пупкина. Василию для полного счастья не хватает только интернет-магазина. (Сайт-то у него уже есть!)

Начинаем с регистрации бесплатного сайта в нашем аккаунте на хостинге hostinger.ru. В предыдущем примере мы уже создали свой аккаунт на этом хостинге и в этом аккаунте мы уже создали сайт Васи Пупкина. Этот второй сайт регистрируется точно также, как и первый сайт в учебном примере. В качестве субдомена выбираем pupkin-shop, то есть адрес сайта будет pupkin-shop.id1945.com. Подробно останавливаться на всей этой процедуре мы тут уже не будем. Всех, кто забыл, как это делается отсылаем к первому учебному примеру.

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

Например, если такую ссылку поставить на главную страницу сайта Васи Пупкина, то это выглядело бы так, как на этой картинке.

Здесь в список ссылок просто добавился бы третий элемент со следующим кодом:

<li>Зайди в знаменитый <a href="http://vasya-pupkin.id1945.com/shop.html" target="_blank">Интернет-Магазин</a> Васи Пупкина.</li>

При этом сам код интернет-магазина должен был бы располагаться в файле shop.html. На странице, которая соответствует этому файлу, можно было бы сделать ссылку и для обратного перехода на главную страницу сайта.

Структура файла и мета-тэги

Но мы здесь не пойдем таким путем. Потому что чисто в учебных целях мне нужно, чтобы сайт Васи Пупкина не усложнялся и не дорабатывался, а оставался бы примером самого примитивного сайта в Интернете. Так будет проще изучать создание сайтов для тех, кто никогда этим еще не занимался. Поэтому мы здесь организовали отдельный новый сайт на хостинге hostinger.ru, куда заселим одну страницу с очень простым интернет-магазином.

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

• <meta http-equiv="charset" content="text/html; charset=windows-1251">
• <meta name="title" content="Интернет-Магазин Васи Пупкина">
• <meta name="description" content="Здесь можно купить старые вещи Васи Пупкина, потому что это барахло ему совсем не нужно">

Вы уже знаете, что надо создать файл с именем "index.html", так как на сайте "pupkin-shop.id1945.com" это будет главная и единственная страница. Структура этого файла точно такая же, как структура всех вэб-страниц (см. третью часть страницы с редактором и генератором). Вставляем туда в нужное место получившиеся мета-тэги. А между тегами <title> и </title> пишем какой-нибудь заголовок, например, "Интернет-Магазин Васи Пупкина".

Фотографии

Главное внимание мы уделим тому, как сделать основную часть интернет-магазина. Это та часть, которая вставляется между тэгами <body> и </body> в файл "index.html". Но прежде чем начать создавать основную часть вэб-страницы интернет-магазина, надо сначала закинуть на хостинг фотографии тех товаров, которые хочет продать Вася Пупкин. Вы уже знаете, что это надо сделать заранее, иначе вэб-страница в визуальном редакторе не отобразит фотографии, и страница будет выглядеть искаженно. Допустим, Вася решил продать свой старый фотоаппарат, старый копировальный аппарат и... любимую кошку Мурку. Кошку, конечно, жалко, но, черт возьми, надо же как-то Васе гасить кредит за Ладу "Калина"!

....

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

Форма отправки письма

Самое главное, это создание на нашей вэб-странице специальной формы для отправки заказа на электронную почту Васи Пупкина. Для этого нажимаем на самую первую кнопку в третьем ряду верхнего меню. В появившемся окне даем форме какое-нибудь название, например, "shop". Каждая форма должна иметь свое уникальное имя, чтобы отличать друг от друга разные формы на одной странице. (У нас на этой вэб-странице будет только одна форма.) В качестве URL надо написать страницу, где находится скрипт (программа), который является обработчиком данных, которые пользователи будут вводить в форму. Но мы напишем там "mailto:pupkin-shop@yandex.ru". Это означает, что мы хотим, чтобы данные из формы пересылались Васе Пупкину на электронную почту на адрес "pupkin-shop@yandex.ru". То есть в качестве обработчика будет не какой-то скрипт, а будет вызываться главный почтовый ящик покупателя, прописанный в его браузере.

По умолчанию, в браузерах операционной системы Windows на компьютере покупателя будет вызываться стандартная почтовая программа OutLook Express из стандартной комплектации Windows. Если у покупателя установлена на его компьютере какая-то другая почтовая программа, типа "The Bat", и она назначена главной, то вызовется именно она. В своем браузере пользователи могут прописать любые удобные для них почтовые программы, которые будут вызываться процедурой "mailto" в Интернете. Я рекомендую для отправки писем прописать в браузере сервер "mail.ru" и завести на нем свой почтовый ящик, так как этот почтовый сервер наиболее корректно работает с русской кодировкой. Такие программы, как OutLook Express и The Bat некорректно работают с русскими кодировками при вызове из mailto и будут отправлять на почту всякую абракадабру.

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

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

Выбор товаров

Для создания квадратиков, в которых можно будет ставить галочки, используется вторая кнопочка из третьего ряда верхнего меню. Перед тем, как нажимать на эту кнопочку, ставим курсор в нужное место внутри красной рамочки формы. При нажатии на кнопочку выскакивает окно, в котором надо заполнить название кнопки (Name), значение, которое будет передаваться по почте (Checked Value), если покупатель поставил там галочку, и указать, находится или нет там галочка изначально (Initial State), когда пользователь только что зашел на вэб-страницу впервые.

У нас три товара, значит, будет три таких квадратика. Первый назовем "camera", второй - "copir", а третий квадратик назовем "murka". Чтобы не путать квадратики, каждый из них должен иметь свое уникальное имя. Далее, во всех трех случаях выбранное значение, передаваемое по почте, назовем "yes", а начальное значение во всех трех случаях сделаем "Unchecked", то есть "не выбрано". Это значит, что сначала покупатель увидит, что все три квадратика пустые без галочки. Он же еще ничего не выбрал. Верно?

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

С дизайнерской точки зрения всё выглядит очень криво. Но покупатель догадается, какой квадратик какому товару соответствует, потому что товары пронумерованы и их описания стоят рядом с квадратиками. Чтобы исправить эту кривизну дизайна, можете внутри формы создать таблицу и все данные разместить в ячейках таблицы, в том числе и квадратики выбора. Мы на этом останавливаться подробно не будем, так как Вы уже научились делать таблицы (и с видимыми краями и с невидимыми краями), когда делали простой официальный сайт Васи Пупкина. Вспомните, что на странице хобби Вы сделали таблицу с невидимой разбивкой, а на странице кошки Мурки Вы сделали таблицу с видимыми краями ячеек таблицы.

Строковые поля ввода

Итак, мы создали в форме возможность для покупателя выбрать товар. Далее, надо создать для покупателя возможность ввести свой домашний адрес, куда высылать товар, своё имя и адрес своей электронной почты. Для этого используем десятую по счету кнопочку в третьем ряду верхнего меню редактора. Эта кнопка создает поля для ввода строк. Ставим курсор в нужное место внутри красной рамочки и нажимаем на кнопочку меню. В каждой строке мы должны задать уникальное имя строки (Name), видимую длину строки (Size), максимальное число символов (Max.Lenght), которое может ввести пользователь и что изначально написано в строке (Value) при первом заходе покупателя на вэб-страницу.

Мы создадим следующие строковые поля:

• Индекс: Name=index, Size=6, Max.Lenght=6, Value=
• Регион: Name=region, Size=15, Max.Lenght=30, Value=
• Район: Name=area, Size=15, Max.Lenght=30, Value=
• Населенный пункт: Name=sity, Size=12, Max.Lenght=20, Value=
• Улица: Name=street, Size=15, Max.Lenght=25, Value=
• Дом: Name=hause, Size=3, Max.Lenght=3, Value=
• Квартира: Name=apartment, Size=4, Max.Lenght=4, Value=
• Фамилия: Name=last name, Size=15, Max.Lenght=20, Value=
• Имя: Name=first name, Size=10, Max.Lenght=15, Value=
• Отчество: Name=middlt name, Size=12, Max.Lenght=18, Value=
• E-Mail: Name=mail, Size=20, Max.Lenght=30, Value=@

Все значения Value оставляем пустыми, кроме E-Mail. Там для удобства ставим собачку @. В визуальном режиме эти поля выглядят, например, так.

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

Радио-кнопки

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

• Name=choose, Checked Value=1, Initial state=Checked
• Name=choose, Checked Value=2, Initial state=Unchecked

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

Значение Checked Value будет показывать нам, какой выбор сделал пользователь. Если он выбрал первую кнопку, то переменная примет значение "1", если выбрал вторую кнопку, то значение "2". Параметр Initial state задает, какая из радио-кнопок выбрана изначально при первом заходе пользователя на вэб-страницу. Мы указали, что изначально выбрано первая кнопка.

В визуальном режиме это выглядит примерно так.

Отправка формы

Наконец, осталось создать кнопку "Выполнить". Она будет располагаться в прямоугольнике формы в самом низу формы. Нажимаем на пятую кнопку в третьем ряду верхнего меню визуального редактора. В появившемся окне называем (Name) эту кнопку каким-нибудь именем, например, "ok" и надпись на кнопке (Button Label), которую будет видеть покупатель, пишем "Заказать!". Пишем это слово по-русски, так как оно будет написано прямо на изображении кнопки.

Очистка формы

Но и это еще не всё! Очень часто бывает очень полезной кнопка очистки формы, чтобы начать заполнять форму заново. Эта кнопка не просто очищает форму. Она возвращает все установки формы к своим изначально заданным значениям, как будто бы пользователь только что зашел на вэб-страницу. Эту кнопку очистки формы разместим рядом с кнопкой "Выполнить". Нажимаем на седьмую кнопку в третьем ряду верхнего меню визуального редактора и в появившемся окне называем (Name) эту кнопку каким-нибудь именем, например, "no" и надпись на кнопке (Button Label), которую будет видеть покупатель, пишем по-русски "Очистить форму".

Итак, нижняя часть вэб-страницы интернет-магазина Васи Пупкина будет выглядеть так.

Окончательный результат

Теперь в нижней части визуального редактора вэб-страниц нажимаем на кнопку "Code", копируем полученный код и вставляем его в наш файл вэб-страницы между тэгами <body> и </body>. Сохраняем этот файл "index.html" на диске компьютера и копируем его на хостинг.

Окончательно имеем сайт интернет-магазина Васи Пупкина как здесь: pupkin-shop.id1945.com.

Маленькие хитрости

Мы создали этот примитивный интернет-магазин исключительно визуальными средствами, практически ничего не зная про язык разметки HTML. Но возможностей нашего онлайнового визуального редактора для некоторых вещей может не хватать. (Лучше использовать не онлайновые редакторы, а редакторы, которые устанавливаются на Ваш компьютер (оффлайновые), типа визуального редактора NVU).

Сейчас мы сделаем два маленьких улучшения нашего интернет-магазина, используя не визуальные средства, а напрямую редактируя HTML-код интернет-магазина. Сначала мы сделаем более читаемым текст заказа, который передается по почте. Для этого загружаем наш файл "index.html" в наш онлайновый визуальный редактор в режиме Code. И прямо в кодах ищем строку с тэгом:
<form action="mailto:pupkin-shop@yandex.ru" method="POST" name="shop">

Вставляем в параметры этого тэга ещё один параметр enctype="text/plain". После чего получаем этот тэг в виде:
<form action="mailto:pupkin-shop@yandex.ru" method="POST" name="shop" enctype="text/plain">

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

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

Для этого немного изменим параметр "action". Допишем в него сразу без пробела строку ?subject=zakaz iz magazina. Должно получиться так:
<form action="mailto:pupkin-shop@yandex.ru?subject=zakaz iz magazina" method="POST" name="shop" enctype="text/plain">

После subject= тут стоит та самая фраза zakaz iz magazina, которая будет автоматически подставляться в тему письма и по которой Вы и поймете, что это письмо является заказом из интернет-магазина. Эту фразу для страховки пишем латиницей, так как почтовые программы покупателей могут перекодировать кириллицу в абракадабру.

Если к Вам на почту придет письмо с выбранной темой (в данном случае "zakaz iz magazina"), но в письме вместо русских букв будет абракадабра, то Вы сразу же поймете, что это заказ из магазина от пользователя, который использует неудачную почтовую программу для отправки писем. Вам придется отправить ему ответное письмо с просьбой уточнить информацию.

И, наконец, полезный совет. Укажите в форме такой электронный адрес, который Вам будет впоследствии не жалко выбросить и забыть про него. Дело в том, что через некоторое время к Вам на почту начнут приходить не только заказы от покупателей, но и спам. В конце-концов, когда среди спама начнут растворяться нужные письма, Вам придется переписать адрес электронной почты в форме заказа на новый, а старым перестать пользоваться. Поэтому не используйте электронный почтовый ящик интернет-магазина ни для каких других целей.

------------------

Автор статьи: Евгений Миронов.

[0] Создание страниц простого сайта
[1] Инструкция по применению визуального редактора страниц сайта
[2] Инструкция по применению генератора мета-тэгов
[3] Учебный пример создания сайта
[4] Учебный пример создания интернет-магазина
[R] Бесплатные HTML-редакторы