Уроки по работе с программой SiteEdit

Компания Edgestile
Уроки по работе с программой SiteEdit
Разработка и описание: Дизайн студия компании Edgestile
2010 г.
Настройка Интернет-магазина
Содержание
- Структурная схема
- Реализация основных страниц и модулей, Добавление интернет-магазина
- Добавление корзины заказов
- Создание Страницы "Мои заказы"
- Реализация поиска товаров по магазину + модуль «каталог групп интернет-магазина»
- Установка дополнительных модулей - Каталог групп товаров
- Информер корзины заказов
- Добавление блока авторизации
- Добавление регистрации
- Установка электронного менеджера
- Работа с SiteEdit Server
- Работа с SiteEdit manager
Заметим, что Интернет-магазин можно реализовать только на версии SiteEdit Business. Обязательно использовать
программу SiteEdit не ниже версии 4.0, т.к. только в новой версии есть все необходимые функциональные
элементы, которые вам пригодятся. Сначала немного теории. Что из себя представляет Интернет-магазин,
реализованный на системе SiteEdit?
Интернет-магазин, это:
 Проект сайта в программе SiteEdit с рядом модулей, установленных на нужных страницах, с настроенными
взаимосвязями;
 Локальный сервер - программа для ведения электронного бизнеса, контроля и редактирования базы
товаров, клиентов.
 Электронный менеджер - программа, необходимая для ведения Интернет-проектов. С помощью нее
синхронизируются все процессы, происходящие у вас на компьютере и на сайте в Интернете.
Структурная схема:
Подробнее взаимосвязи программ для реализации Интернет-магазина вы можете посмотреть на нижеприведенной
схеме:
Реализация основных страниц и модулей в проекте SiteEdit
Рис. Структура взаимосвязей модулей Интернет-магазина
Для примера вы можете использовать любой из своих проектов, или создать новый. Мы будем показывать урок на
нейтральном проекте с уже имеющимся дизайном и добавлять каждый модуль и страницу друг за другом.
Как правильно расположить информацию?
Рис. Пример дизайна нейтрального проекта
Карта дизайна для Интернет-магазина должна быть создана с учетом необходимых моментов. Поскольку в
магазине требуется наличие определенных модулей и достаточного места для их расположения, учитывайте это.
Не захламляйте пространство большим количеством графики, пустого пространства, рекламных баннеров.
Используйте место с умом. Помните, что для покупатель должен хорошо ориентироваться на вашем сайте, быстро
находить то, что ему нужно и не отвлекаться на лишнюю информацию. Шапка или графическая часть у сайтов с
Интернет-магазином должна занимать минимум места, дабы не заставлять пользователя постоянно крутить скролл,
чтобы добраться до самих товаров. Также сама карта дизайна не должна иметь маленький размер по ширине. Если
у вас жесткий фиксированный по ширине дизайн, то минимальная ширина блока, где располагается «Content-0»
должна составлять 600 пикс. Желательней, по возможности, создать «резиновый» сайт, т.е. растягивающийся.
Тогда вы угодите большинству пользователей, и ваш сайт будет нормально отображаться на разных мониторах.
Исходя из «Рис. Пример дизайна нейтрального проекта» - на белом листе мы расположим универсальное меню с
самыми важными страницами (оно должно быть в верхней части сайта для более быстрого доступа), а также ряд
необходимых модулей: сам магазин, корзину заказов, список заказов, оплату заказов, каталог групп интернетмагазина, расширенный поиск, специальное предложение.
В верхней части сайта должен быть модуль «информер корзины заказов». Оставим для него место в шапке.
При желании, вы можете в верхней части сайта расположить такие модули как «Выбор валюты Интернет-магазина»
и «Информер курса валют» (они не являются обязательными). Слева мы оставим место для навигации по магазину.
Т.к. многие магазины имеют категории товаров, а также подкатегории, правильней в таких проектах ставить модуль
«каталог групп товаров», отображающий список категорий товаров. Данный модуль занимает по высоте много
пространства, поэтому его лучше располагать сбоку, в нашем случае – слева.
Не забудьте про блок авторизации и регистрации. Для покупки товара пользователю необходимо будет
зарегистрироваться, а в дальнейшем – авторизоваться для входа в свой аккаунт. Поэтому эти блоки должны быть
хорошо заметны и желательно в верхней части сайта. На страницу регистрации можно добавить страницу в меню, а
также данная ссылка имеется в блоке «авторизация».
В подвале сайта располагаются счетчики посещаемости, ссылка на разработчика сайта, и меню – дополнительное
или главное. Поскольку все страницы нежелательно выводить сверху сайта, дабы не отвлекать пользователя от
информации по магазину, можно дополнительные расположить в нижнем меню.
Добавление интернет-магазина
Откроем новый, либо готовый проект в программе SiteEdit. Для того, чтобы реализовать Интернет магазин – первым
шагом является построение цепочки модулей, расположенных на страницах проекта (рис. Структура взаимосвязей
модулей Интернет-магазина).
4 страницы:
Магазин, Мои заказы, Корзина, Регистрация - самые основные – они должны быть всегда.
Дополнительные модули:
такие как «Быстрый поиск по магазину», «Каталог групп товаров», «Информер корзины заказов», «Поиск по
товарам)», «каталог групп Интернет-магазина» нужны лишь для удобства работы с магазином, расположение этих
модулей на сайте непринципиально.
Рис. Создание Страницы «Магазин»
Теперь по порядку. В проекте SiteEdit создаем первую страницу (F7), в Заголовке пишем «Магазин», имя страницы –
«catalogue». Поставим галочку «Добавить в Универсальное меню»
Жмем «Сохранить». На странице включаем режим иконок (F9) добавляем новый раздел (желтая иконка). В
открывшемся окне на вкладке «Тип модуля» выбираем модуль «Интернет-магазин (основной
модуль)#mshop_vitrine.tlb». Модуль выбирается двойным кликом мышки по названию в случае, когда вы
устанавливаете его первый раз (при этом устанавливаются настройки дизайна По-умолчанию). После программа
спрашивает, Взять ли оформление из модуля? жмем «Да». Изменить настройки по дизайну мы можем в любой
момент, настроив его мо своему усмотрению. В следующие разы можете устанавливать модуль, кликнув по нему
одним щелчком мыши и сохранив изменения.
Рис. Выбор модуля «Интернет-магазин (основной модуль)»
Модуль «Интернет-магазин (основной модуль)» имеет 2 режима отображения товаров: режим витрины и режим
таблицы. По умолчанию отображается режим «витрина». По желанию, вы можете поменять режим в параметрах
модуля.
Чтобы переключить режим отображения товаров – нужно зайти в параметры модуля, и поменять значение
«Витрина» на «Таблица» у пункта «Вид прайса»
Если вы выбрали модуль двойным щелчком мыши, он взял настройки по умолчанию и выглядит так:
Рис. Вид страницы «Магазин – режим витрина»
Данный режим «Витрина» более презентабельный. Основная особенность – можно добавлять превью изображения
в более большом размере, чем в режиме «таблица».
Заметим, что перед нами прототип модуля. Прототип не показывает реальные товары, а служит для демонстрации
модуля и настройки в плане дизайна. Настоящие фотографии и текстовую информацию мы будем загружать позже
– с помощью электронного менеджера.
Самая сложная работа (расположение элементов, необходимые размеры, заполненные прототипы) сделана уже за
вас. Остается только «подточить» дизайн модуля под соответствующий дизайн проекта сайта
Расскажем, что и где можно настроить. Откройте дерево дизайна (F4).
Модули \ Магазин \ Интернет-магазин (основной модуль)
Настроим пункт «Краткая карточка товара»
Изначально здесь уже имеются настройки по умолчанию, которые вы можете изменить по своему усмотрению, а
также в зависимости от размеров фотографий и размеров сайта. Самое главное, на что стоит обратить внимание:
должны быть проставлены размеры (высота, ширина), Выравнивание: left, и возможно, отступы по бокам. При
желании, можете добавить фон, обрамление, в зависимости от эскиза дизайна. Отступы внутри краткой карточки
товара добавляйте в случае, когда размеры краткой карточки товара выставлены в процентах.
Ширина краткой карточки товара может быть как в пикселях, так и в процентах, а вот высота должна быть
выставлена жестко – в пикселях, для того, чтобы записи выстраивались ровно в линию.
Настройка модуля «Интернет магазин (основной модуль)
Далее выделим пункт «Внутренняя часть», который находится во вложении у пункта «Краткая карточка товара». На
вкладке «Расположение текста» снизу зададим параметры:
Горизонтальное выравнивание: left, Вертикальное выравнивание: top (это для того, чтобы все элементы у объекта
«прилипли» к верхнему левому краю).
Далее при желании, можно настроить все внутренние элементы: заголовок, фото, краткий текст, кнопки и т.д.,
открыв их в дереве дизайна и задав необходимые параметры на нижних вкладках. Думаю, этот момент уже не
нуждается в подробном описании.
Кнопки, также, можно изменить по дизайну. Если у вас уже настроены кнопки для всего проекта «Оформление
разделов и записей\Общие (id) и (class) для сайтов SiteEdit\Свойства кнопок», настройки в магазине кнопок можно
убрать. Сделаем также - сначала настроим свойства кнопок для всего проекта, затем уберем лишние настройки в
пунктах «Блок кнопок», «Кнопки» и индивидуальные настройки кнопок «купить» и «подробнее». Поставим для них
необходимые размеры, чтобы они вмешались в ширину краткой карточки товара. Также внесем на вкладке
«Шрифт» настройки дизайна шрифта.
У нас получилось так:
Рис. Настройка кнопок модуля «Интернет-магазин (основной модуль)»
Совет: При желании, если вам нужен минимум информации в краткой записи товара, то некоторые элементы
можно отключить с помощью дерева дизайна:
1способ: Выберите необходимый элемент, зайдите на вкладку «Позиционирование» и поставте параметр
«none» у пункта «Тип контейнера».
2способ: Зайдите в параметры модуля и отключите ненужные элементы.
К примеру: можно отключить краткий текст, артикул, Кол-во товаров в наличии, кнопку подробнее.
Обязательными элементами являются: фотография (превью), кнопка «купить» и цена.
На нашем примере это выглядит так:
Рис. Пример настройки дизайна магазина с минимум информации
Режим «Таблица» модуля «Интернет-магазин (основной модуль)»
Рис. Вид страницы «Магазин» - режим таблица
Данный режим экономит пространство на сайте и располагает большее количество товаров на странице.
Чтобы переключить режим отображения товаров, напомним – нужно зайти в параметры модуля, и поменять
значение «Витрина» на «Таблица» у пункта «Вид прайса»
Этот режим также имеет ряд необходимых настроек. При желании, вы можете изменить эти настройки в дереве
дизайна, а также поменять дизайн кнопок.
Субстраница - Подробное описание товара
Теперь давайте перейдем на подстраницу «Просмотр товара» и настроим ее. Перейти на нее можно, кликнув на
кнопку «Подробнее» рядом с любым из товаров, либо по фотографии (превью). Данная страница содержит
подробное изображение товара, производителя, цена, кнопки, краткое и подробное описание товара,
дополнительные фотографии товара, похожие и сопутствующие товары, комментарии к товару и т.д.
В дереве дизайна раскроем пункт «Страница подробного описания товара». Затем раскроем пункт «Подробная
карточка товара» и постепенно, выделяя все элементы, зададим необходимые отступы, цвет, границы и т.д. Я
думаю, что важным моментом на этой странице являются: кнопка «купить», цена. Эти элементы должны быть
хорошо заметны на фоне остального. У Цены можно задать размер побольше, а также более яркий цвет. Кнопка
купить по ширине высоте должна быть такой, чтобы на нее легко можно было нажать.
Рис. Вид модуля «Интернет магазин (основной модуль) – подробный просмотр товара»
На этой же странице подробного просмотра товара существуют такие блоки, как «Похожие товары» и
«Сопутствующие товары». Здесь предоставляется возможность настроить их в плане дизайна. Для удобства,
разработчиками вынесена возможность настроить эти два блока одновременно, задав им настройки в одном месте.
На этом настройку Модуля «Интернет магазин (основной мобуль)» можно считать законченной. Мы рассказали
лишь о важных элементах. Я думаю, вы найдете еще множество разнообразных вариаций настройки этого модуля,
задавая свои параметры.
Добавление корзины заказов
Вторым шагом на пути к полноценному магазину является корзина заказа. Чтобы все сделать правильно, можно
ориентироваться на параметры модуля. Находясь на странице «Магазин», где установлен модуль «Интернетмагазин v.4», щелкнем по нему двойным щелчком мыши, зайдя в текстовый редактор. На вкладке «Параметры»
нашего раздела магазина найдем внизу такой пункт «Страницы корзины – shopcart». Основываясь на этом имени,
делаем следующее:
Жмем F7, создав новую страницу. Называем ее «Корзина». Имя файла страницы: shopcart.
Рис. Создание страницы «корзина»
На странице создаем раздел, тип модуля указываем «Корзина заказов#mshop_carts.tlb». Жмем «Сохранить».
Обратим внимание!! В параметрах модуля «корзина заказов» также указана страница Интернет-магазина –
«catalogue». Есть у вас также называется страница магазина, оставим все по умолчанию. Этим осуществляется
взаимосвязь модулей корзины и магазина.
Рис. Выбор модуля «корзина заказов»
Перед нами опять же прототип модуля, который показывает тестовые значения. Модуль выполнен в виде таблицы,
т.к. он должен отображать большое количество значений. Кардинально он не перестраивается.
Рис. Внешний вид модуля «Корзина заказов» в программе
Если вы хотите оформить его составные элементы в плане дизайна, это можно сделать с помощью дерева дизайна
F4. Если вы зайдете в пункт «модули \ Магазин \ Корзина заказа», вы найдете все элементы, доступные для
настройки. По умолчанию модуль уже настроен. Вам потребуется настройки кнопки, если они еще не настроены, и
возможно выделить строки в таблице для более удобного восприятия.
На нашем примере мы выделили цветом нечетную строку таблицы. Это видно из нижепредставленного рисунка.
Вы, по желанию, можете выделить ее с помощью установки границы, установки дизайна текста, или рисунками.
Рис. Настройка модуля «Корзина заказов»
Важным моментом является задание ширины для модуля, чтобы даже без некоторых значений он не терял
приемлемого вида. Найдите модуль в дереве дизайна в пункт «модули \ Магазин». Выделив пункт «Корзина
заказов», задайте ему общую ширину 100% на вкладке «Позиционирование» в нижней части программы.
Также можно выделить сервисные сообщения, пункт «блок сообщений», задав отступ или более контрастный цвет.
Отступы также можно задать «таблице товаров», т.к. это часть самая важная на странице и не должна «сливаться»
с другими элементами на странице.
Далее кликните на кнопку «Оформить заказ», перейдя на субстраницу оформления заказа, и настройте ее дизайн,
если потребуется. Хотя на этой странице настройки уже имеются, т.к. они заимствуются с главной страницы
корзины заказа.
Вы можете заметить что, поставив модуль «Корзина заказов» на странице, автоматически устанавливается еще два
блока в комплекте – блок авторизации и блок регистрации. Эти два модуля привязаны к корзине – для удобства
пользователя. И, даже если вы забыли установить в проекте блок Авторизации и страницу с модулем
«регистрация», это не критично. Пользователь на странице «корзина» сможет осуществить эти операции и купить
товар.
Примечение: модуль «корзина заказов» занимает достаточно много места. Не располагайте его в узких
пространствах проекта.
Создание Страницы «Мои заказы»
Третьим шагом является создание страницы со списком заказов клиента и способами оплаты. Жмем F7, создаем
страницу под названием «Мои заказы», имя файла страницы: «clientaccount».
Рис. Создание страницы «мои заказы»
ВНИМАНИЕ!! Обязательным моментом является указание прав доступа для страницы «мои заказы». Пока мы
находимся в режиме редактирования страницы, зайдем на вкладку «Доступ». И укажем напротив пункта «Уровень
доступа» поставим параметр «User». Это означает, что на эту страницу попадут только зарегистрированные
пользователи, и будут видеть только лишь свои заказы.
Рис. Установка прав доступа на странице «мои заказы»
Жмем «Сохранить». На странице включаем режим иконок (F9) добавляем новый раздел (желтая иконка). В
открывшемся окне, на вкладке «Тип модуля» выбираем модуль «Список клиентских заказов#mshop_orderlist.tlb».
Жмем «Сохранить». В заголовке раздела пишем «Список заказов».
На этой же странице добавляем еще модуль в этом же контенте. В открывшемся окне, на вкладке «Тип модуля»
выбираем «Оплата заказов#mshop_payment.tlb». В заголовке раздела пишем «Оплата заказов». Жмем
«Сохранить».
Примечение: модуль «список клиентских заказов» занимает достаточно много места. Не располагайте его в
узких пространствах проекта.
Данные модули также являются прототипами и отображают тестовую информацию.
Рис. Внешний вид страницы «Мои заказы» с установленными модулями
Модуль выполнен в виде таблицы, т.к. он должен отображать большое количество значений. Кардинально он не
перестраивается. Модуль уже имеет ряд необходимых настроек, поэтому вам остается только «подточить» его под
свой дизайн сайта.
Если вы хотите оформить его составные элементы в плане дизайна, это можно сделать с помощью дерева дизайна
F4. Зайдем в пункт «модули \ Магазин \ Список клиентских заказов». Все элементы, видимые на экране, можно
найти в дереве дизайна и настроить. Настройка модуля похожа на настройку «корзины заказов», поэтому она вам
будет уже знакома. По желанию, вы можете выделить элементы таблицы.
Важным моментом является задание ширины для модуля, чтобы даже без некоторых значений он не терял
приемлемого вида. Найдите модуль в дереве дизайна в пункт «модули \ Магазин». Выделив пункт «Список
клиентских заказов», задайте ему общую ширину 100% на вкладке «Позиционирование» в нижней части программы.
Теперь нажмите на любой номер заказа, находящийся левой колонке таблицы. Вы попадете на суб-страницу
«просмотра заказа». Она берет настройки с предыдущей страницы, так что надобность индивидуальной настройки
по дизайну в этом случае отпадает. Но если у вас возникает желание что-то здесь изменить, все инструменты для
этого существуют в дереве дизайна.
Теперь, для вас не представляется сложным настроить и модуль «оплата заказов». Элементов здесь еще меньше.
Способы оплаты вы создадите позже, в электронном менеджере. В прототипе они не показаны, т.к. их может быть
сколь угодно много и различного наименования.
Это были самые необходимые элементы, чтобы создать рабочий Магазин. Далее мы рассмотрим дополнительные
элементы, необходимые для удобства пользования Интернет-магазином.
Установка дополнительных модулей
Реализация поиска товаров по магазину
Пользователю понадобится возможность найти необходимый товар. В нашей системе есть несколько инструментов
для этого: это модуль быстрого поиска и модуль расширенного поиска товаров, а также каталог групп интернетмагазина. Сначала разберем первый вариант и добавим два необходимых модуля.
1 способ поиска по магазину
Создаем новую страницу (F7), в Заголовке пишем «Поиск», имя файла страницы – «searchlist»
Рис. Создание страницы «Поиск товаров»
Жмем «Сохранить». На странице включаем режим иконок (F9) добавляем новый раздел (желтая иконка). В
открывшемся окне, на вкладке «Тип модуля» выбираем модуль «Поиск товарам
(расширенный)#mshop_searchlist.tlb». Жмем «Сохранить». В заголовке раздела можем написать «Найти товар».
Рис. Выбор модуля «Поиск по товарам (расширенный)»
Модуль установлен на страницу, и представляет из себя прототип. Реальный поиск будет осуществляться только на
сайте, когда в базу вбиты товары и проект выгружен в интернет. Если вы выбрали модуль двойным щелчком мыши,
то он уже принял ряд основных настроек по дизайну. Точно также, как настраивались предыдущие модули, вы
можете внести свои настройки и настроить модуль по своему желанию. Например, задать отступы у заголовков,
оформить ячейки таблицы и кнопку купить.
Рис. Вид модуля «Поиск товаров (расширенный)»
Попробуем по аналогии с предыдущими модулями настроить таблицу результатов поиска. Зайдем в дереве
дизайна F4 в пункт «модули \ Магазин \ Поиск по товарам <расширенный>». Выделим заголовки таблицы и строки.
А также добавим некоторые отступы, размеры у других элементов для более удобного восприятия. Все пункты для
настройки имеются в дереве дизайна.
У нас получилось так:
Рис. модуль «Поиск товаров (расширенный)» после настроек
В виде кнопки «купить» может быть не только ссылка на фоне, но и красивая иконка. Давайте попробуем добавить
рисунок. Соответственно, рисунок изначально готовим в любом стороннем графическом редакторе. Создаем иконку
небольших размеров с изображением корзины.
Сначала нам нужно убрать слово «купить», иначе оно будет перекрывать картинку. Зайдем в параметры модуля,
найдем пункт «Текст или символ кнопок Добавить в корзину» и напротив меняем значение «Купить» на такое
символосочетание «&nbsp», тогда слово исчезает совсем. Жмем «Сохранить», выходим в обычный режим.
Рис. Изменение параметров в модуле «поиск по товарам (расширенный)»
Включаем дерево дизайна F4, снова находим «модули \ Магазин \ Поиск по товарам (расширенный)\ Таблица
результатов поиска \ Столбцы \ В корзину», выделяем пункт «Кнопка» и в нижней части программы заходим на
вкладку «Фон», у пункта «Изображение» жмем иконку «добавить рисунок», открывается проводник, ищем на
компьютере созданную иконку, добавляем. Не забываем прописать размеры иконки на вкладке
«Позиционирование»
Рис. Добавление рисунка к кнопке «Купить»
По желанию, вы можете добавить различные иконки, изначально оформив их под стиль сайта. И ваш магазин будет
не только функциональным, но и привлекательным.
Есть еще один удобный модуль, который помогает пользователю получить быстрый доступ к поиску товаров –
«Быстрый поиск по магазину». Он занимает сравнительное небольшое пространство на странице, и может быть
размещен там, где будет удобен и доступен для пользователя. Он работает в паре с расширенным поиском по
товарам, т.е. вводя в нем поисковый запрос, мы попадаем на расширенный поиск, где видим результаты поиска и
можем поискать товар по другим более подробным параметрам. Давайте попробуем его поставить. Обычно такой
модуль располагается в глобальном контенте, чтобы пользователь мог с любой страницы его увидеть и внести
поисковый запрос. Для этого зайдем в карту дизайна (Ctrl+F3), выберем место, где мы хотим его расположить.
Кликнем правой кнопкой мыши в нужное место и с помощью контекстного меню поставив Глобальный контент-*
(вместо звездочки будет любое число, от 1 до 6).
Рис. Установка глобального контента в карте дизайна
Рис. Выбор модуля «Быстрый поиск по товарам»
Поставив контент, жмем «Сохранить», выходим в обычный режим. Включаем режим иконок, и там где мы добавили
контент, нажимаем на желтую иконку «добавить раздел», выбираем тип модуля «Быстрый поиск по
товарам#mshop_quichsearch.tlb» двойным щелчком мыши. После установки модуля можете провести косметические
настройки, если требуется настроив поле ввода, выпадющий список, кнопку и ссылку.
Рис. Внешний вид модуля «Быстрый поиск по товарам»
Теперь, находясь на любой странице нашего сайта, мы всегда имеем быстрый доступ к поиску товаров.
Работоспособность модуля можно проверить только на сайте. Как мы видим, поиск осуществляется по нескольким
параметрам, которые можно установить в выпадающем списке. Ссылка «Расширенный поиск» служит для быстрого
доступа на страницу «поиска по товарам магазина». Взаимосвязь этих модулей осуществляется, если в параметрах
модуля «Быстрый поиск по магазину» выставлено имя страницы с поиском. В нашем случае – searchlist.
Рис. Параметры модуля «быстрый поиск по товарам»
2 способ поиска по магазину
Еще более удобный и простой способ поиска товаров – установка модуля «Каталог групп Интернет-магазина». Он
заменяет два модуля «поиска по товарам (расширенный)» и «быстрый поиск по товарам». Устанавливается он в
случае, если в вашем магазине существуют группы товаров и подгруппы. Необходим в первую очередь для
удобства пользователя. Если вы собираетесь его установить, то «быстрый поиск по товарам» вам уже не нужен.
Удалите его.
модуль «Каталог групп Интернет-магазина» занимает много пространства на сайте и его лучше располагать в
контенте-0, т.е. там, где основные модули. Мы советуем расположить на стартовой странице. В этом случае будет
хорошая реклама магазина, и позволит пользователю быстро перейти к товарам, не рыская по сайту.
Рис. Выбор модуля «Каталог групп интернет-магазина»
Добавим новый раздел, к примеру, на стартовую страницу, выберем тип модуля «Каталог групп интернетмагазина#mshop_groups.tlb», Сохраним изменения.
Рис. Внешний вид модуля «Каталог групп интернет-магазина»
Модуль представляет из себя прототип. Прототип состоит из превью-изображений групп товаров (которые
добавляются в электронном менеджере), названий групп и подгрупп товаров, пути до товара и блока поиска. Блок
поиска довольно компактный и удобный в управлении. Достаточно кликнуть по полю ввода, ввести поисковый
запрос и нажать «Enter». Практически также, как в Яndex. Модуль по умолчанию уже настроен. По желанию, вы
можете поменять размеры Карточки группы.
Рис. Настройка модуля «Каталог групп интернет-магазина»
Напомним, что работоспособность поиска можно проверить только в сети интернет.
Модуль можно поставить также на странице, где у вас размещен модуль «Интернет-магазин (основной модуль)».
Вывод на одной странице категорий товаров и самих товаров дает пользователю максимальное удобство.
Рис. вид страницы магазин с модулями
Каталог групп товаров
Если в магазине предполагается большое количество товаров, группы и подгруппы товаров, то для удобства
пользователя можно установить модуль «каталог групп товаров». Он позволяет видеть всю структуру групп товаров
и иметь быстрый доступ в интересующую его категорию. Внешне он представляет из себя некое меню из пунктовссылок, ведущих на подстраницы магазина с товарами. Модуль также показывает, сколько товаров содержится в
определенной группе.
Проведем следующие действия: зайдем в карту дизайна
Верхнее меню – Оформление\Редактирование карты дизайна, либо (Ctrl+F3). Правой кнопкой мыши вызовем
контекстное меню и поставим в нужном месте один из глобальных контентов (смотрите, чтобы они не повторялись,
иначе информация будет дублироваться). Каталог групп товаров лучше поставить сбоку от центральной
информационной части сайта. Ставим в левую боковую колонку, т.к. модуль занимает большое пространство по
вертикали. Жмем кнопку «Сохранить», возвращаясь в обычный режим.
Рис. Установка глобального контента в карте дизайна
Включаем иконки (F9) и там, где мы добавили контент, добавляем новый раздел с помощью желтой иконки.
Выбираем тип модуля «Каталог групп товаров#mshop_catalog.tlb». Сохраняем изменения.
Рис. Добавления модуля «Каталог групп товаров»
Модуль поставлен и в программе мы наблюдаем прототип. Группы товаров тестовые. Реальные группы товаров мы
будем добавлять позже в электронном менеджере. Технически каталог групп товаров может содержать сколь
угодно подуровней, и позволяет организовать довольно сложную структуру для любого магазина.
Теперь затронем сторону дизайна модуля. После версии 4.0 программы SiteEdit модуль значительно переработан и
появилось гибкая возможность настройки. Во первых, модуль работает в двух режимах: раскрвающийся и открытый
(по аналогии с универсальным меню). Настраивается модуль точно так же, как и универсальное меню. Модуль по
умолчанию уже имеет настройки, вам достаточно изменить шрифт, подстроив его под стиль дизайна вашего сайта.
Самый главный пункт для настройки – «Пункты группы». Остальные пункты входящий во вложениях уровней
наследуют его настройки. Подгруппы вы можете задать уже незначительные настройки, например, меньший размер
шрифта или отступы, дабы визуально их отделить.
Рис. Внешний вид модуля «каталог групп товаров»
Информер корзины заказов
Для того, чтобы пользователь всегда имел возможность быстро посмотреть количество товаров в корзине, сумму
покупки, а также быстро перейти на страницу «корзины», поставим информер корзины заказов. Модуль должен
располагаться в глобальном контенте, и быть на видном месте в проекте (либо в шапке, либо сбоку). Модуль
занимает очень небольшое пространство, что дает ему большой плюс. По аналогии с предыдущими модулями,
зайдем в карту дизайна (Ctrl+F3), выберем место и установим глобальный контент. Сохраним изменения и выйдем
в обычный режим.
На странице включаем режим иконок (F9) добавляем новый раздел (желтая иконка). В открывшемся окне, на
вкладке «Тип модуля» выбираем модуль «Информер корзины заказов#mshop_cartinformer.tlb». Жмем «Сохранить».
Рис. Добавления модуля «Информер корзины заказов»
Модуль представляет из себя всего 2 строчки с информацией: сколько товаров содержится в корзине, и на какую
сумму уже набралось покупок. Все это настраивается по дизайну, если у вас возникнет желание.
Чтобы как-то украсить по дизайну и выделить блок информера корзины, давайте добавить рисунок. Изначально,
естественно, заготовим его в любом стороннем графическом редакторе. К примеру, это будет изображение
корзинки в виде иконки.
Найдем в дереве дизайна «модули \ магазин» и выделив модуль «информер корзины заказов», щелкнем на иконку
«загрузить с диска» на вкладке «фон». В открывшемся проводнике найдем на компьютере нужным нам рисунок и
добавим его.
Рис. Добавление картинки к модулю «информер корзины заказов»
Рисунок теперь является фоном модуля. Чтобы текст не перекрывал рисунок, отодвинем его. Для этого выделим в
дереве дизайна пункт «Информативный блок» и на вкладке «Позиционирование» зададим отступ слева, к примеру:
40 пикселей. При желании, вы можете настроить число товаров и сумму покупок.
Внимание!! Модуль жестко привязан к странице «Корзина заказов». По умолчанию, в параметрах модуля
выставлено значение – Страница корзины заказа – shopcart.
Рис. Параметры модуля «информер корзины заказов»
Если у вас так и сделано, то при нажатии на ссылку «сейчас в корзине», вы должны попадать на страницу «Корзины
заказов». Если все верно в программе, на сайте все будет работать.
ВАЖНО!! При создании Интернет-магазина необходимо наличие блока авторизации и страницы регистрации. Если
у вас уже есть эти блоки – следующий пункт можете пропустить.
Добавление блока авторизации
Блок авторизации служит для того, чтобы пользователь мог войти в свой аккаунт, а также получить доступ к
странице регистрации. Давайте добавим этот блок. Сначала его необходимо добавить в карте дизайна (Ctrl+F3).
Желательно располагать блок авторизации там, где он будет легко заметен, например, в верхней части сайта или
сбоку.
Рис. установка блока авторизации в карте дизайна
Выбираем место, вызываем правой кнопкой мыши контекстное меню и ставим «блок авторизации». Жмем кнопку
«Сохранить», выходим в обычный режим. По умолчанию блок авторизации отключен. Ее нужно включить – Верхнее
меню «Редактировать \ дополнительные разделы \ Блок авторизация». В открывшемся окне мы видим html код
блока авторизации, и две вкладки «Вход Авторизации» и «Выход авторизации». Чуть ниже есть пункт «Показать»,
рядом с ним ставим галочку, включив определенный режим Авторизации. Теперь он показан в проекте и
предоставляется возможность настроить блок в плане дизайна. Поочередно включим Вход и выход авторизации и
настроим их.
Если вы первый раз ставите блок авторизации в карте дизайна, по умолчанию в программе блок отключен. Для
того, чтобы его включить, зайдем в верхнем меню программы:
Редактировать\Дополнительные разделы\Блок авторизация (в открывшемся окне поставим галочку «Показать»).
Для настройки дизайна второстепенной страницы авторизации просто перейдем по вкладке «Выход авторизации» и
нажмем «Сохранить».
Рис. Включение блока авторизации
Блок авторизации содержит два поля для ввода логина и пароля, кнопку входа, пункт «запомнить» и ссылку на
страницу регистрации. В дереве дизайна выведены все пункты для настройки данных элементов. На нашем
примере представлен уже настроенный по дизайну блок авторизации.
Рис. Блок «Авторизация\Вход»
Настройка дизайна Блока авторизации осуществляется в дереве дизайна в пункте «Формы (Поиск и Авторизация)».
На Рисунке «Включение блока авторизации» показан уже настроенный блок Авторизации. Я думаю, сама настройка
не вызовет у вас больших сложностей, т.к. вся она заключается в задании размеров и расположений элементов
блока.
После настройки Входа авторизации стоит включить блок «выхода авторизации» и настроить его, при желании. Он
представляет из себя приветственное слово, имя пользователя и ссылку «Выход». Вместо заголовка [NAMEUSER]
на сайте будет подставляться логин зарегистрированного пользователя, после того, как он войдет в свой аккаунт
(введет свой логин и пароль).
Рис. Блок «Авторизация\выход»
В блоке авторизации располагается ссылка «Регистрации». Но, для ее работоспособности, убедитесь, что у вас
создана страница «Регистрация» с именем страницы «registration».
Внимание!! Начиная с 4 версии SiteEdit, произошли некоторые изменения в коде авторизации. Поэтому те
пользователи, которые вели проекты на старой версии, а затем перешли на 4ю, должны Сделать следующие
изменения: создать в 4й версии программы SiteEdit любой проект с любым дизайном. Зайти в блок «авторизации»,
скопировать код входа, а затем выхода авторизации, и поставить в то-же самое место на своем проекте.
Добавление регистрации
Проверим, если ли у нас страница регистрации. Если нет, то добавим страницу (F7), В заголовке напишем
«Регистрация», Имя файла страницы - «registration». Жмем «Сохранить».
Рис. Добавление страницы «Регистрация»
Далее нажмем на иконку «Добавить новый раздел», и в открывшемся окне на вкладке «Тип модуля» ставим модуль
«Регистрация на сайте#mregistration.tlb». В заголовке раздела можно написать «Регистрация пользователя».
Рис. Добавление модуля «Регистрация на сайте»
Если вы выбрали модуль двойным щелчком мыши, он ставится на страницу и уже имеет основной набор настроек
по дизайну. По желанию, вы можете изменить их. Модуль в 4 версии SiteEdit притерпел некоторые изменения.
Теперь рядом с полем пароля появляется подсказка о надежности пароля (это можно заметить на сайте). Модуль
довольно гибкий по настройке, и позволяет располагать элементы не только в вертикальный столбец, но и слева
направо
Рис. Модуль «Регистрация»
Все заголовки, поля ввода, подсказки и другие элементы вы можете настроить индивидуально, зайдя в дерево
дизайна в пункт «Модули \ Регистрация и авторизация \ Регистрации на сайте».
Рис. Вид модуля «Регистрация на сайте, вид-2»
Исходя из рисунка видно, что модуль можно настроить совершенно иначе от первоначального вида. От вас
потребуется минимум операция. Самый главный пункт для настройки «Все объекты». Чтобы выстроить элементы
таким образов, как показано на вышепредставленном рисунке, нужно:
На вкладке Позиционирование: поставить параметр «left» у пункта «Выравнивание» и указать размер по ширине
(можно в пикселях, можно в процентах)
Обратите внимание!! К регистрации может прилагаться «Пользовательское соглашение» (ссылка в нижней части
раздела). У каждого представителя своих услуг или продуктов лицензионное соглашение свое. Поэтому,
необходимо заполнить у себя в проекте страницу с соглашением. Имя файла Страницы должно быть «license.html»,
Название страницы произвольное, например «Лицензия» или «Лицензионное соглашение».
Примечание: Если для вашего проекта стоят другие задачи и вам недостаточно сведений о пользователе, вы
можете использовать не только «Регистрацию», но и модуль «Персональные параметры».
На этом все работы в проекте SiteEdit закончены, остальная работа ведется в двух других приложениях –
Локальном сервере SiteEdit и Электронном менеджере.
Локальный сервер + Электронный менеджер можно скачать на сайте www.siteedit.ru в разделе «Скачать».
ВНИМАНИЕ!!! Из-за кардинального изменения версий программы SiteEdit рекомендуется пользоваться линейкой
программ одного уровня. Пример: если вы ведете проект на версии SiteEdit Business v4.* , то локальный сервер и
менеджер вам также нужно скачать и установить v.4*
Старая база товаров, созданная на версии 3.9.0 и ранее, может вызвать проблемы, открыв в новой 4.* версии.
Установка электронного менеджера
Электронный менеджер в свою очередь состоит из двух частей:
SiteEdit Manager – программа для ведения электронного бизнеса, контроля и редактирования базы товаров,
клиентов.
SiteEdit Server – программа, необходимая для ведения Интернет-проектов. С помощью нее синхронизируются все
процессы, происходящие у вас на компьютере и на сайте в Интернете.
Работа с SiteEdit Server
1. Запустите установочный файл setupadmin.exe и выполните все требования установщика (установки сервера
и менеджера рекомендуется выполнить в папку с установленной программой CMS SiteEdit)
2. Запустите сервер (Пуск - «Главное меню/SiteEdit Business/SiteEdit сервер (запуск)») - при первом запуске
программа потребует придумать и ввести пароль Администратора (рекомендуется пароль сохранить, так как
в случае утери придется полностью переустанавливать сервер), далее этот пароль потребуется для входа в
панель управления сервером.
Рис. Запуск SiteEdit Server
В правой нижней части экрана в меню SiteEdit Server выберите пункт «Запустить сервер».
3. Для входа в панель управления сервера, выберите пункт меню «Настройки». Программа попросит ввести
пароль Администратора (вводится пароль созданный в шаге 2)
Установите общие параметры для запуска и синхронизации проектов.
На странице «Подключение» устанавливаются номера Портов сервера TCP/IP и MySQL. Не рекомендуется без
причины изменять номера Портов. Данные изменения могут делать только опытные Администраторы.
Если ваш компьютер подключен к интернет через Прокси-сервер, необходимо внести соответствующие изменения в
строке «Адрес» и «Порт».
Рис. Общий вид SiteEdit Server
4. Перейдите на страницу «Проекты» и нажмите на кнопку «Новый проект»
Рис. Пример Интернет-проектов SiteEdit Server
Рис. Установка названия и пароля для проекта
Придумайте имя проекта, логин и пароль, которые необходимы для администрирования в электронном менеджере.
Для синхронизации с сайтом необходимо выбрать ключ от проекта SiteEdit (в папке Мои
документы/SiteEdit|Business).
После создания нового проекта загрузите данные с сайта - нажмите на кнопку «Загрузить»
Рис. Загрузка нового проекта
Для создания DEMO - проекта введите в поле «Имя проекта» слово «demo» (ключ не требуется)
В демо-режиме вы можете локально (не выгружая в интернет) поработать с магазином своего проекта.
Работа с SiteEdit manager
После запуска Локального Сервера и создания в нем нового проекта Запускаем установленный электронный
менеджер (либо через иконку на рабочем столе, либо через меню «пуск» в нижней панели вашего компьютера)
Рис. Запуск электронного менеджера
Далее вводим название проекта и пароль (который мы создали, работая с локальным сервером SiteEdit Server)
Жмем ОК
Рис. Вход в проект в менеджере
Рис. Общий вид Электронного менеджера
Описание программы:
Слева находится панель инструментов, с помощью которых мы можем редактировать и поддерживать электронный
бизнес.
Справа – рабочая область, где отображаются выполняемые действия.
Начав работу с менеджером, первым делом нужно установить курсы валют. Заходим в пункт «Валюты». Жмем
кнопку «Добавить Валюту», Вносим необходимые значения. Жмем «ОК». Далее по аналогии добавляем Доллар
США, Евро и остальные валюты (если требуется). Пример показываем на уже созданных валютах (Рис. Добавление
валюты).
Рис. Добавление Валюты
Чтобы установить курс валюты, достаточно щелкнуть два раза мышкой на строку с введенной валютой и в
открывшемся окне нажать «Установить курс по РФ».
Рис. Установка курса валюты
Далее, можете начинать работать с магазином. Если требуются категории товаров, заходите в пункт «группы
товаров». Для добавления конкретных товаров, услуг заходите в пункт «Товары», жмем кнопку в правой нижней
части окна «Добавить».
Рис. «Добавление товара в менеджере»
В открывшемся окне (в вашем случае будет «Добавить товар», для примера открыто окно «Изменить товар»)
вводим необходимые значения, описание товара, фото, цену.
Артикул устанавливается автоматически. Обязательно заполнение поля «Наименование». Справа указывается
группа, в которую помещен товар (если в магазине есть группы товаров). Исходя из заполненного окна готового
товара (Рис. Описание товара), заполняем остальные поля. В конце жмем кнопку «Сохранить». Если у товара Есть
похожие или сопутствующие товары, скидки, добавляем их, переходя по вкладкам в верхней части окна.
Рис. Описание товара
Все товары, которые мы добавляем в электронном менеджере, автоматически появляются на сайте, ничего
отдельно выгружать вручную не нужно. Синхронизацию проекта осуществляет Локальный сервер, который мы
установили уже вместе с менеджером ранее.
Уроки выложены на сайте www.help.siteedit.ru