Форум пользователей Impera CMS
Impera CMS - отличный движок для лёгкого создания интернет магазина.
Обладает невероятным количеством функций, необходимых в онлайн торговле.

Следить
Главная
17:08
06 мая
#
написал:

Rapid Mobile - мобильный шаблон для быстрых продаж

Подробнее о шаблоне  |  Живое демо  |  Скачать

Шаблон спроектирован так, чтобы действие происходило в пределах фиксированного экрана, а внимание покупателя сосредоточено на товаре.

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

  • Шаблон бесплатен для пользователей Impera CMS и может быть модифицирован ими до желаемого уровня.

  • Этот шаблон входит в стандартную поставку Impera CMS.


Посмотреть как выглядит шаблон RapidMobile внутри ВКонтакте - vk.com/app3238749

18:07
06 мая
#
написал:

Автоматическое переключение мобильного посетителя на шаблон RapidMobile

Внутри данного шаблона есть специальный файл http://ваш.сайт/design/RapidMobile/detect-mobile.js - это редиректор мобильного посетителя на мобильный шаблон RapidMobile. Здесь файл не испольуется, а просто добавлен в шаблон как дополнение, чтобы такой файл не пришлось искать позже, когда он понадобится.

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

Предположим, у нас есть стационарный шаблон Example, и каждый посетитель сайта видит его в таком дизайне. Теперь если в заголовках файла index.tpl стационарного шаблона пропишем подключение редиректора мобильного шаблона, с этого момента все мобильные посетители будут видеть сайт в мобильном дизайне. Вот пример подключения, причем желательно, чтобы скрипт редиректора подключался в заголовках первым, то есть не в асинхронном режиме и до точки подключения любых других js-скриптов, не давая им срабатывать, пока идет определение типа посетителя (в коде ниже цветом выделены добавленная строка подключения и некоторые переменные движка):

<!DOCTYPE HTML>
<html dir="ltr" lang="ru">
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <title>{$title}</title>

        <script src="{$site}design/RapidMobile/js/detect-mobile.js" type="text/javascript"></script>

        <link href="{$theme}css/style.css" rel="stylesheet" type="text/css" />
        <script src="{$theme}js/jquery.js" type="text/javascript"></script>
        <script src="{$theme}js/fancybox.js" type="text/javascript"></script>
    </head>

    <body>
        ...
        ...
    </body>
</html>


В тех шаблонах, где заголовочная секция страницы формируется с помощью модуля генерации заголовков common_parts/AIMatrix/Constructor/head.htm, показанное выше подключение редиректора делается следующим образом:

<!DOCTYPE HTML>
<html dir="ltr" lang="ru">

    {include file = '../../common_parts/AIMatrix/Constructor/head.htm'
             main_links = [ 'js/../../RapidMobile/js/detect-mobile.js',
                            'css/style.css',
                            'js/jquery.js',
                            'js/fancybox.js' ]}
    <body>
        ...
        ...
    </body>
</html>
01:50
07 мая
#
?
написал:

По моему стиля не хватает.

#buy-product-form label:hover *,
#feedback-form label:hover *,
#callme-form label:hover *,
#buy-product-form label *:focus,
#feedback-form label *:focus,
#callme-form label *:focus {
    background: #fff;
}

Так поля формы чётче выглядят когда вводишь текст или над ними провёл.

15:08
07 мая
#
?
bbbbbb написал:

Вставлю 5 копеек.
PageSpeed Гугла показывает скорость 90 из 100 на RapidMobile. Отлично!!
Теперь бы script.js и style.css убрать из подгрузки файлов.
Правильно так написать?

{* <!-- ===========================================================================
  Система: Impera CMS                                                             |
  Сайт системы: http://imperacms.com/                                              |
                                                                                  |
  Назначение файла: макет страницы                                                |
  Расположение: http://сайт/design/папка_шаблона/html/index.tpl                   |
  Предназначен для шаблона: RapidMobile                                           |
  Автор шаблона: Impera CMS                                                       |
                                                                                  |
============================================================================ --> *}{strip}

    {* <!-- если страницу не озаглавили, пробуем по имени товара или названию сайта --> *}
    {$title = $title|default:$product->model|default:$settings->site_name|default:'Без названия!'}

    {* <!-- подгрузка js и css --> *}
    {capture assign = 'links'}
        <style type="text/css">{include file = '../css/style.css'}</style>
        <script type="text/javascript">{include file = '../js/script.js'}</script>
    {/capture}

    {* <!-- оптимизация --> *}
    {$links = preg_replace('!/\*.+?\*/!s', ' ', $links)}
    {$links = preg_replace('!\s+!', ' ', $links)}

<!DOCTYPE HTML>
    <html>

        {* <!-- заголовки страницы --> *}
        {include file = '../../common_parts/AIMatrix/Constructor/head.htm'
                 favicon = 'images/favicon.ico'
                 main_links = [ $links ]
                 more_links = []}

        <body>
            ...
            ...
        </body>
    </html>
{/strip}

Мог бы руками перенести js и css. Не хочу.
Смарти тогда зачем. Потому я придумал код выше. Еще и оптимизацию делает.

20:23
07 мая
#
написал:

Миха # По моему стиля не хватает

Спасибо, добавлю в шаблон.

bbbbbb # Теперь бы script.js и style.css убрать из подгрузки файлов. Правильно так написать?

Неправильно. Папки design/шаблон/css, design/шаблон/js не входят в настройки политики безопасности Smarty, следовательно при попытке подключить файлы из этих папок шаблонизатор будет выдавать сообщение о нарушении политики. Позже покажу, как решить вашу проблему.

Кроме того, ваша оптимизация также неправильная. Она не учитывает строковые константы, то есть вырежет кусок например из такого выражения var msg = '/* ура */', которое не является комментарием. Вдобавок, удаляя избыточные пробелы и пустые строки, она не учитывает возможность однострочных комментариев. В таком случае возможно попадание фрагментов кода в закомментированный. Например было:

    // размеры
    var width = 100;
    var height = 200;


После удаления избыточной пустоты получится:

 // размеры var width = 100; var height = 200;


Правильное программное удаление комментариев из кода - на самом деле нетривиальная задача. Ведь кроме учета строковых констант, многострочных и однострочных комментариев, возможно еще следующее, что является вполне правильным выражением с точки зрения javascript:

    if (/\/*-hello-*/.test(status)) alert('Hello!');
11:19
08 мая
#
?
EraUa написал:

Написано "Внутри данного шаблона есть специальный файл http://ваш.сайт/design/RapidMobile/detect-mobile.js"

Скачиваю шаблон и там нет этого файла

14:40
08 мая
#
написал:

Извиняюсь, забыл обновить архивный файл шаблона на сайте. Качните шаблон сейчас. Ссылка есть в первом посте.

17:58
08 мая
#
написал:
Шаблон RapidMobile обновлен. Скачайте новую версию.


В новой версии:

  • внесена стилевая поправка от Миха, в результате поля форм подсвечиваются при наведении мыши и во время ввода текста;

  • страницы "По разделам" и "Производители" дополнены перекрестными ссылками друг на друга и второстепенными ссылками на новости, статьи, контакты, обратный звонок;

  • в заголовочную часть введена мета информация о viewport (экране устройства), благодаря чему страница изначально видна на разных устройствах в полном заполнении экрана, избавляя пользователя от манипуляций по масштабированию страницы (пример показан на картинке справа);

  • шаблон скорректирован под рекомендации Google PageSpeed Insights по ускорению загрузки страницы на мобильных устройствах, а именно скрипты и стили выведены из заголовочной секции и размещены в теле страницы, при этом стили оптимизированы (удалены избыточные пустоты);

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


Как быстро обновить шаблон. Скопируйте из первого поста адрес ссылки "Скачать". Зайдите в админпанели на страницу "дизайн -> Дизайны сайта". Нажмите там ссылку "загрузить" в секции клиентских шаблонов и вставьте скопированный адрес ссылки. Старые файлы шаблона будут перезаписаны файлами новой версии шаблона.


Касаемо управляемости. Перейдите в админпанели на страницу "настройки -> Конфигурационный файл", добавьте и заполните следующие параметры (у каждого тип = строка):

  • phone1 - номер телефона;
  • RapidMobile_promo - вступительный текст на "главной" странице;
  • RapidMobile_remark - ремарочный текст в подвале страницы.


Касаемо viewport и Google PageSpeed. Ниже показано, каким образом это было сделано в файле index.tpl шаблона (в коде цветами выделено относящееся к стилям, скриптам, viewport):

{* <!-- ===========================================================================
  Система: Impera CMS                                                             |
  Сайт системы: http://imperacms.com/                                              |
                                                                                  |
  Назначение файла: макет страницы                                                |
  Расположение: http://сайт/design/папка_шаблона/html/index.tpl                   |
  Предназначен для шаблона: RapidMobile                                           |
  Автор шаблона: Impera CMS                                                       |
                                                                                  |
============================================================================ --> *}{strip}

    {* <!-- если страницу не озаглавили, пробуем по имени товара или названию сайта --> *}
    {$title = $title|default:$product->model|default:$settings->site_name|default:'Без названия!'}

    {* <!-- подгружаем файлы скриптов и стилей (для ускорения загрузки) --> *}
    {getStyles links=[ 'css/style.css' ] var=css_content clear=true}
    {getScripts links=[ 'js/script.js' ] var=js_content}

<!DOCTYPE HTML>
    <html>

        {* <!-- заголовки страницы --> *}
        {include file = '../../common_parts/AIMatrix/Constructor/head.htm'
                 favicon = 'images/favicon.ico'
                 main_links = [ '<meta name="viewport" content="width=580px, height=840px, initial-scale=1">' ]
                 more_links = [ ]}

        <body>
            ...
            ...
        </body>

        {* <!-- выводим скрипты и стили --> *}
        {$css_content}
        {$js_content}
    </html>

{/strip}


Страница действительно грузится (показывается) быстрее на устройство, но есть мелкое запоздание в раскрашивании страницы, так как стили размещены в конце и страница не может быть раскрашена, пока не получены стили. Если вас не устраивает этот артефакт, переместите переменную {$css_content} перед тегом <body>.

20:28
12 мая
#
?
EraUa написал:

Установил шаблон, поключил скрипт, всё завелось с пол оборота. спасибо!

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

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

20:44
12 мая
#
?
EraUa написал:

Попробовал добавить в шаблоне ссылку на полную версию сайта где явно прописано site.tu/?theme=Name

Но при нажатии скрипт всё-равно перенаправляет на мобильный шаблон.

Написание ответа

Перед публикацией рекомендуется использовать Предпросмотр, чтобы увидеть конечный вид сообщения.


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