Impera CMSсистема управления сайтом

Всё для сайтов

Простой и качественно собранный универсальный шаблон интернет магазина.

Будьте в курсе событий

Главная Новости Статьи

Карта сайта Обсуждение Форум Контакты

» Комментарии 50

Шаблон eCommerce - универсальный магазин

Главная » Новости » Шаблон eCommerce - универсальный магазин

Шаблон eCommerce

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

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

Шаблон сделан в традиционной имперской манере: предельно простой код с попыткой выжать максимум из доступной простоты. Файловая структура шаблона, его настройки, несколько скриншотов его страниц показаны ниже. Редизайн (перекраску) шаблона под себя можно заказать у дизайнера, кто нарисовал этот дизайн (смотрите ссылку в подвале шаблона).

Ссылки

Живое демо demo.imperacms.com/?theme=eCommerce

Обратите также внимание, на больших экранах (1400+ пикселей в ширину) по бокам страницы присутствуют боковые панели с дополнительной информацией. На узких экранах эти панели исчезают.

Скачать шаблон imperacms.com/files/media/eCommerce.zip (шаблон бесплатен для пользователей Impera CMS).

Порядок установки

1 Скачать архивный файл шаблона на компьютер или скопировать URL ссылки выше.

2 Открыть в админпанели страницу дизайн > Дизайны сайта. Если там уже есть такой шаблон, нажать напротив него крестик, чтобы удалить старый.

3 Нажать ссылку загрузить в блоке Дизайны клиентской стороны.

4 В открывшемся окне выбрать скачанный файл или полем ниже вставить URL скопированной ссылки и нажать кнопку Начать.

Главная страница

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

Корзина

Корзина на самом деле состоит из 3 страниц - непосредственно корзина, страница оформления заказа и страница отложенных товаров. Вот как выглядит первая страница.

Оформление заказа

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

Авторизация / регистрация

Похожую структуру из соответствующих форм, размещенных в своих закладках, имеет страница авторизации.

Список товаров

Имеет фильтр слева, пагинацию страниц над и под списком, сортировку (по названию, по цене). При наведении курсора на карточку товара, она увеличивается по вертикали и показывает дополнительную информацию о товаре и вспомогательные ссылки.

Заказ в один клик

Среди вспомогательных ссылок в карточке товара есть "Заказать в один клик", в результате чего на экране появляется всплывающее окно, где покупатель может мгновенно заказать желаемое количество конкретного товара.

Оформленный заказ

То же имеет двухколоночную структуру. В левой колонке под списком товаров появляются кнопки возможных способов оплаты.

Личный кабинет

Здесь необычно то, что вся информация личного кабинета представлена на единственной странице.

Страница товара

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

Файлы шаблона

Перечислим все файлы шаблона с иерархией папок. Напомним, стандартный шаблон состоит из папок: css - стили, fonts - нестандартные шрифты, html - вёрстка, images - картинки, js - скрипты. В папке html хранятся tpl- или htm-файлы шаблона, представляющие собой исходные коды вёрстки. В этой папке файл index.tpl является макетом страницы без центрального блока, остальные файлы являются макетами центрального блока для конкретных страниц. Файл helper.php является расширением функций шаблона, здесь обычно размещают дополнительные php-функции, если таковые необходимы в шаблоне.

css - папка стилей
- jquery-ui.css
- style.css - стили дизайна (собраны в один файл для ускорения загрузки страниц)
fonts - папка шрифтов
- Arimo-... - файлы кириллического шрифта Arimo
- fontawesome-... - файлы иконографического шрифта
html - папка макетов
- common - универсальные / часто используемые элементы
  - breadcrumbs.htm - хлебные крошки
  - card-product.htm - мини карточка товара
  - card-publication.htm - мини карточка публикации
  - check404.htm - маршрутизатор абстрактных страниц (проверка неучтённых случаев "ошибка 404")
  - filter.htm - фильтр товаров
  - form-login.htm - форма авторизации
  - form-quickorder.htm - форма быстрого заказа
  - list-products.htm - список товаров
  - slider.htm - слайдер
- email - макеты писем
  - callme-to-admin.htm - админу о новом запросе обратного звонка
  - callme-to-user.htm - клиенту об успешном принятии его запроса обратного звонка
  - feedback-to-admin.htm - админу о новом сообщении в обратной связи
  - feedback-to-user.htm - клиенту об успешном принятии его сообщения в обратную связь
  - login-to-admin.htm - админу об авторизации пользователя
  - login-to-user.htm - клиенту об успешной авторизации
  - registration-to-admin.htm - админу о новом пользователе
  - registration-to-user.htm - клиенту об успешной регистрации
- other - абстрактные страницы
  - contact.htm - контакты
  - instructions.htm - инструкции
- sms - макеты СМС
  - callme-to-admin.htm - админу о новом запросе обратного звонка
  - callme-to-user.htm - клиенту об успешном принятии его запроса обратного звонка
  - feedback-to-admin.htm - админу о новом сообщении в обратной связи
  - feedback-to-user.htm - клиенту об успешном принятии его сообщения в обратную связь
  - login-to-admin.htm - админу об авторизации пользователя
  - login-to-user.htm - клиенту об успешной авторизации
  - registration-to-admin.htm - админу о новом пользователе
  - registration-to-user.htm - клиенту об успешной регистрации
- helper.php - хелпер шаблона (вспомогательные php функции)
- account.htm - личный кабинет
- article.htm - статья
- articles.htm - список статей
- callme.htm - обратный звонок
- cart.htm - корзина
- catalog.htm - главная страница
- compare.tpl - сравнение товаров
- feedback.htm - обратная связь
- fulminant.order.htm - быстрый заказ
- index.tpl - общий макет страницы
- login.htm - авторизация
- missing_template.htm - страница 404
- navigation.htm - блок пагинации страниц
- news.htm - список новостей
- news_item.htm - новость
- order.htm - оформленный заказ
- price.htm - прайс-лист
- product.htm - товар
- products.htm - товары категории / бренда / всего каталога
- registration.htm - регистрация
- search.htm - поиск
- sitemap.htm - карта сайта
- static_page.htm - статическая страница
- email_notifyme_confirm.htm - макет письма клиенту о требовании подтвердить емейл для подключения к уведомлению
- email_order_to_admin.htm - макет письма админу о заказе
- email_order_to_user.htm - макет письма клиенту о заказе
- email_password_remind.tpl - макет письма клиенту о новом пароле
images - папка картинок дизайна
- demo - демо картинки
  - product-... - для товаров
  - slider-... - для слайдера
- jquery-ui
  - ui-...
- cart-delete.png
- cart-icon.gif
- checkbox.png
- favicon.ico - ярлыковая иконка сайта
- icons.png
- logo.png - логотип
- map.png - скриншот магазина на карте
- minus-plus.png
- no-photo.png - картинка "нет фото" (для товара)
- no-photo-category.png - картинка "нет фото" (для корневой категории в мега меню)
- no-photo-publication.png - картинка "нет фото" (для статьи / новости в списке)
- p_info_delete.gif
- quickorder-close.gif
- quickorder-icon.png
- selector.png
- slider.png
- slider-arrows.png
- slider-dot.png
- star.png
- star-add.png
- thumbnail.jpg - миниатюра шаблона
js - папка скриптов
- ajax
  - search.php - скрипт быстрого поиска
- jquery.js
- script.js - скрипты шаблона (собраны в один файл для ускорения загрузки страниц)

Шаблон в сущности представляет собой html-шаблон с незначительным включением тегов шаблонизатора Smarty. Цель тегов - подставить в конкретные места шаблона содержимое определённых переменных, которые движок подготовил для шаблона на основе сведений о странице, где сейчас находится пользователь.

Настройки

Шаблон использует следующие конфигурационные параметры, которые можете создать в админпанели на странице настройки > Конфигурационный файл:

twitter - адрес вашей страницы Twitter (для социальных ссылок в подвале)
facebook - адрес вашей страницы Facebook (для социальных ссылок в подвале)
google - адрес вашей страницы Google+ (для социальных ссылок в подвале)
vkontakte - адрес вашей страницы ВКонтакте (для социальных ссылок в подвале)
vk_group - номер вашей группы ВКонтакте (для блока "Мы в сети" на главной)
phone1 - телефон 1 (для страницы Контакты)
phone2 - телефон 2 (для страницы Контакты)
email1 - емейл 1 (для страницы Контакты)
ecommerceSlogan - слоган в правой части подвала
ecommerceFeature1 - строка 1 в левой части подвала
ecommerceFeature2 - строка 2 в левой части подвала
ecommerceFeature3 - строка 3 в левой части подвала
ecommerceFeature4 - строка 4 в левой части подвала
ecommerceNoMegamenuImages - запрет вывода картинок корневых категорий в мега меню (1 = запретить)
ecommerceNoMegamenuBrands - запрет вывода вкладки "Производители" в мега меню (1 = запретить)
ecommerceNoSidebarLeft - запрет вывода левой боковой панели (1 = запретить)
ecommerceNoSidebarRight - запрет вывода правой боковой панели (1 = запретить)
ecommerceNoMainpageSeo - запрет вывода SEO-текста на главной (1 = запретить)
ecommerceNoCatalogSeo - запрет вывода SEO-текста под списком товаров категории (1 = запретить)
ecommerceNoCatalogPreamble - запрет вывода вступительного текста над списком товаров категории (1 = запретить)
ecommerceNoProductDelivery - запрет вывода закладки "Доставка" в товаре (1 = запретить)
ecommerceNoFeedbackMap - запрет вывода "Наш магазин на карте" в обратной связи (1 = запретить)
ecommerceNoFilter - запрет вывода фильтра (1 = запретить)
ecommerceNoFilterCategories - запрет вывода "Подразделы" в колонке фильтра (1 = запретить)
ecommerceNoFilterBrands - запрет вывода "Все производители" в колонке фильтра (1 = запретить)
ecommerceFilterOneColumn - вывод фильтра в одну колонку (1 = в одну, по умолчанию в две)

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

Особенности

В корневые категории загрузите по картинке - они появятся в мега меню вместо картинок "нет фото". Также впишите свои телефоны в шапку сайта, это можно сделать в файле index.tpl шаблона.

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

Обсуждение

«Impera CMS | 8 июл 12:11

Залил обновленную версию шаблона, качайте. Исправлены замеченные к этому моменту мелкие ошибки. Появились новые возможности:

1. Если при загрузке картинки для главной страницы указать в описании картинки ссылку, картинка в слайдере станет кликабельной с переходом на указанный URL.

2. Добавлен конфигурационный параметр noMegamenuImages - запрет вывода картинок корневых категорий в мега меню. Удобен тем, у кого нет возможности найти бесплатные или приобрести в фото банках красивые картинки для категорий.

3. Добавлен параметр noMegamenuBrands - запрет вывода вкладки "Производители" в мега меню. Удобен тем, кто считает, что брендам не место рядом с категориями.

По теме

По марке