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

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

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

Шаблон 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.ru/?theme=RapidMobile

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

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

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

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

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

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

Обсуждение
«Вячеслав | 26 апр 12:30
Открыл демо со смартфона в вертикальной ориентации, экран 1280х720 страница влезла в экран не вся, из трех колонок товара только две видно, чтобы увидеть правую часть странички приходится масштабировать. Ну и думаю в списке товаров название товара все же нужно выводить, не совсем удобно для поиска нужного товара кликать все по очереди.
Ещё просьба выложить инструкцию, как перенаправлят мобильных пользователей на этот шаблон.
Ответить
«samlab | 30 апр 04:23
Тут они накосячили в index.tpl с вьюпортом.

<meta name="viewport" content="width=580, height=840, initial-scale=1">

Вот скажите, хз зачем width и height ограничен фиксированным размером, вдобавок единицы измерения не указаны. 580 чего? 840 чего? Поэтому смарт может показать не так как ожидалось.

Давно уже все устанавливают вьюпорт вот так.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

То исть ширину и высоту страницы масштабировать под ширину экрана устройства. Одну строку исправить и все станет на место.
Ответить
«Impera CMS | 30 апр 14:16
Думаю, любой пользователь шаблона сможет проверить внешний вид сайта на своём устройстве с тем или иным мета-тегом viewport и выбрать, какая запись тега подойдёт ему лучше всего. Указание фиксированного размера удобно, когда основная масса визитёров ходит на сайт с телефонов. Размеры device-width / device-height - когда с планшетов или когда мы хотим получить адаптацию вне зависимости от типа устройства.
Ответить
«Игорь | 1 май 01:00
Какой пассаж :( Давайте говорить как есть, сайт интересует адаптация независимо от девайса. Басня о удобстве фиксированного размера - профанация, корень которой - лень вставить правильный мета. Сегодня большинство может идет с телефона, завтра все поменялось. Кто засечет момент и поменяет мету? С адаптивным мета ничего засекать не надо, сработает само.
Ответить
«Impera CMS | 30 апр 13:51
Чтобы перенаправлять мобильных пользователей, вставьте следующую строку в начало заголовочной секции десктопного шаблона - найдите тег <head> и сразу за ним напишите:

<script src="{site}design/RapidMobile/js/detect-mobile.js"></script>
Ответить
«Андрей | 26 апр 20:36
Присоединяюсь к Вячеславу. В списке ОБЯЗАТЕЛЬНО ПОКАЗЫВАТЬ НАЗВАНИЕ. Это ж не блошиный рынок, просто картинки мало.
Ответить
«Impera CMS | 1 май 17:54
Уже сделано. По умолчанию название полупрозрачное над фотографией, непрозрачное под курсором.

На странице товара также сделан вывод кода товара (полупрозрачным слева в верхнем углу) и кнопка ? справа вверху, по которой выводится краткое описание товара.
Ответить
«Андрей | 1 май 20:39
А характеристики на странице товара? Их по правой стороне вывести бы полупрозрачным.
Ответить
«Антон | 2 май 01:32
Тогда и описание в категориях выводить. Для сео важная фишка. Насколько понимаю одну строку добавить в products.tpl.

Еще доп фото в товаре. То сейчас одно фото, не понято почему нельзя галерею.

На главной бы банер. Ну предлагать шаблон, так уже со всеми плюшками. Не?
Ответить
«Impera CMS | 3 май 16:14
Уже сделано: и характеристики, и описание категорий, и SEO текст, и фотографии товара.
Ответить
«Игорь | 1 май 01:07
С бесплатными шаблонами всегда так, в общих чертах все есть, да какой-нибудь важной детали 100% нет.
Ответить
«Олег | 1 май 05:56
Разве эта тема бесплатная? Нигде не написано и ссылки скачать не вижу.
Ответить
«Impera CMS | 1 май 17:59
Да, для пользователей Impera CMS - шаблон бесплатен. Ссылку на скачивание пока не ставил, так как шаблон будет входить в стандартную поставку движка.
Ответить
«Impera CMS | 3 май 16:11
Добавил ссылку на скачивание выше, в разделе "Ссылки".
Ответить
«Михаил | 19 мар 23:19
Выдал ошибку:
Uncaught Smarty: Unable to load template file 'main.tpl' thrown in /home/rumen3/data/www/stavnext/Smarty/libs/sysplugins/smarty_internal_templatebase.php on line 127
Подскажите как исправить?
Ответить
«Михаил | 20 мар 00:36
Почему в версии 2.3.7 не работает? Как исправить?
Ответить
«Impera CMS | 20 мар 09:55
Выше была представлена версия шаблона для движка Impera CMS, и естественно такой Rapid Mobile не будет работать на движке Simpla CMS 2.3.7.

Вам следует искать вариацию, адаптированную под Simpla CMS. Спросите на форуме симпловцев. Во всяком случае массу знаний по кодингу шаблонов они получали благодаря изучению имперских разработок. Может быть нужная вам адаптация Rapid Mobile найдётся у кого-нибудь из форумчан.
Ответить
«lenkom | 30 май 18:17
Шаблон по моему унылое го. Его шлифануть дизайнер еще должен.
Ответить

Другие обсуждения »

Теги: rapid mobile, шаблон, mobile friendly

Хотите чтобы мы рассказали ещё о чём-то - предлагайте тему.

Предложить

Следите за нашими публикациями в социальных сетях и новостных каналах.