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

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

Мобильный шаблон магазина, спроектированный в концепции "один экран, три шага": найди, кликни, купи.

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

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

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

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

Шаблон Rapid Mobile для версии 2.x

Главная » Новости » Шаблон Rapid Mobile для версии 2.x

Шаблон Rapid Mobile

Простейший код этого шаблона также способствует самостоятельному изучению принципов создания тем для Impera CMS. Дополнительные достоинства шаблона: mobile-friendly, валидный html код и стили.

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

Внешний вид главной страницы

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

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

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

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

Минималистичный вид, только большая фотография товара, название, цены его видов (если их не один), кнопка Купить и слева ссылка x - закрыть.

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

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

Пример для краткого описания товара:

<div class="descr">
    {annotation from=product}
</div>

Здесь предполагаем, что класс descr по умолчанию содержит стили, скрывающие этот контейнер, а всплывание организуется каким-либо из традиционных способов, например по клику некоей ссылки выполняется скрипт $('.descr').show() или $('.descr').toggle(), чтобы та же самая кнопка открывала-закрывала всплывающий контейнер.

Пример для полного описания товара:

<div class="descr">
    {body from=product}
</div>

Пример стиля:

.descr {
    display: none;
    overflow: auto;
    position: fixed;
    top: 25%;
    left: 25%;
    right: 25;
    bottom: 25%;
    z-index: 65535;
}

Пример кнопки:

<a class="button" onclick="$('.descr').toggle()">Описание</a>

Кстати, не стоит забывать, что на странице может оказаться несколько товаров, поэтому селектор $('.descr') в общем случае неверный, поскольку означает все контейнеры такого класса. Следует персонализировать клик кнопки, чтобы её действие распространялось только на конкретный контейнер, например так:

<a class="button" onclick="$(this).next('.descr').toggle()">Описание</a>

<div class="descr">
    {annotation from=product}
</div>

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

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

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

Список разделов

Расставлен в две колонки. Если разделов нечётное число, последний раздел располагается по центру. Справа имеется ссылка выхода в каталог (список товаров), слева - ссылка x, чтобы закрыть страницу и вернуться к прежней. Внизу размещена ссылка выхода на список производителей.

Список разделов

Кстати, список производителей имеет похожий вид, только внизу ссылка выхода на список разделов.

Страницы форм ввода

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

Страница обратной связи

Страница поиска

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

Обратите внимание, если у товара есть виды, внизу есть их выбор с указанием цены каждого вида и кнопка Купить.

Страница поиска

Кстати, когда поиск закрыли крестиком, в углу строки поиска появляется ?, чтобы быстро вернуться к результатам поиска.

Страница оформленного заказа

Традиционная таблица со списком заказанных товаров, итогом и за ней список возможных способов оплаты.

Страница заказа

Результаты проверки шаблона

Тест 1 Начинаем с проверки дружественности к мобильным устройствам, которая с 21 апреля 2015 года стала влиять на ранжируемость сайта в мобильном поиске.

Результат проверки статуса mobile-friendly

Тест 2 Результат валидации html кода.

Результат проверки HTML кода

Тест 3 Результат валидации стилевых правил.

Результат проверки CSS

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

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

css
- style.css - стили
html
- common
  - check404.htm - проверка неучтённых случаев "Ошибка 404"
  - seo.htm - блок SEO текста
- email
  - callme-to-admin.htm - шаблон письма админу о запросе обратного звонка
  - callme-to-user.htm - шаблон письма клиенту об успешном принятии его запроса
  - feedback-to-admin.htm - шаблон письма админу о сообщении обратной связи
  - feedback-to-user.htm - шаблон письма клиенту об успешном принятии его сообщения
- sms
  - callme-to-admin.htm - шаблон СМС админу о запросе обратного звонка
  - callme-to-user.htm - шаблон СМС клиенту об успешном принятии его запроса
  - feedback-to-admin.htm - шаблон СМС админу о сообщении обратной связи
  - feedback-to-user.htm - шаблон СМС клиенту об успешном принятии его сообщения
- article.tpl - страница статьи
- articles.tpl - список статей
- callme.tpl - страница обратного звонка
- catalog.tpl - главная страница
- feedback.tpl - страница обратной связи
- fulminant.order.tpl - страница быстрого заказа
- helper.php - хелпер шаблона (вспомогательные php функции)
- index.tpl - макет страницы
- missing_template.htm - заглушка для отсутствующих файлов шаблона
- navigation.htm - пагинация страниц
- news.tpl - список новостей
- news_item.tpl - страница новости
- order.tpl - страница заказа
- price.tpl - прайс-лист
- product.tpl - страница товара
- products.tpl - список товаров
- search.tpl - страница поиска
- sitemap.tpl - карта сайта
- static_page.tpl - статическая страница
images
- demo - папка с демо картинками товаров
- categories-background.png - фон страницы списка разделов
- favicon.ico - ярлыковая иконка
- form-background.png - фон страниц с формами ввода
- input-background.png - фон поля ввода
- logo.png - логотип
- main-background.png - фон главной страницы
- no-photo.png - картинка "нет фотографии"
- promo-background.png - фон промо-текста на главной
- thumbnail.jpg - миниатюра шаблона
js
- detect-mobile.js - скрипт переброса на мобильную версию шаблона
- script.js - скрипты шаблона
- search.php - скрипт быстрого AJAX-поиска

Конфигурационные параметры

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

phone1 - номер телефона (виден справа в подвале страницы)
RapidMobile_remark - строка-ремарка (видна в конце подвала страницы)
RapidMobile_promo - промо текст (виден в центре главной страницы)

Ссылки

Живое демо шаблона смотрите на сайте demo.imperacms.com/?theme=RapidMobile

Скачать шаблон imperacms.com/files/media/RapidMobile.zip (свежая версия этого шаблона поставляется со всеми новыми версиями движка 2.1.5 и выше).

Порядок установки для старых версий 2.x

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

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

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

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

Обсуждение

«Вячеслав | 26 апр 12:30

Открыл демо со смартфона в вертикальной ориентации, экран 1280х720 страница влезла в экран не вся, из трех колонок товара только две видно, чтобы увидеть правую часть странички приходится масштабировать. Ну и думаю в списке товаров название товара все же нужно выводить, не совсем удобно для поиска нужного товара кликать все по очереди.
Ещё просьба выложить инструкцию, как перенаправлят мобильных пользователей на этот шаблон.

По теме

По марке

Шаблон Rapid Mobile для версии 2.x

Внешний вид главной страницы

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

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

Список разделов

Страницы форм ввода

Страница поиска

Страница оформленного заказа

Результаты проверки шаблона

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

Конфигурационные параметры

Ссылки

Обсуждение

Написать комментарий