MobileDetect

Компонент для создания мобильной версии страниц сайта.
Бесплатно
Загрузите дополнение из админки вашего сайта.
Как загрузить?
Автор дополнения
Илья Уткин
Пакетов
21
Закачек
52 368
Автор дополнения
Пакетов
21
Закачек
52 368
Версия 2.0.2-pl
Дата выпуска 25.02.2021
Загрузки 3 493
Просмотры 18 303
Компонент позволяет определять тип устройства пользователя и выводить контент в зависимости от этого. Всего возможно 3 типа вызова.

1. Как фильтр Fenom
{if 'standard' | mobiledetect}
    <p>This is a <b>standard</b> view via Fenom output filter.</p>
{/if}

{if 'tablet' | mobiledetect}
    <p>This is a <b>tablet</b> view via Fenom output filter.</p>
{/if}

{if 'mobile' | mobiledetect}
    <p>This is a <b>mobile</b> view via Fenom output filter.</p>
{/if}
Этот способ является самым лучшим, но подходит только если вы используете парсинг всех страниц сайта через Fenom.
В отличии от двух следующих типов вызова, код в неподходящих блоках выполняться не будет, что даёт возможность вызывать в них какие-то сниппеты.

2. Как блоковая функция Fenom
{standard}
    <p>This is a <b>standard</b> view via Fenom output filter.</p>
{/standard}

{tablet}
    <p>This is a <b>tablet</b> view via Fenom output filter.</p>
{/tablet}

{mobile}
    <p>This is a <b>mobile</b> view via Fenom output filter.</p>
{/mobile}
{mobile}{/mobile} — телефоны и планшеты
{desktop}{/desktop} — десктоп
{standard}{/standard} — десктоп
{phone}{/phone} — только телефоны
{tablet}{/tablet} — только планшеты

3. Как сниппет MODX
[[!MobileDetect:is=`1`:then=`
    <p>This is a <b>standard</b> view via Snippet tag.</p>
`:else=``?input=`standard`]]

[[!MobileDetect:is=`1`:then=`
    <p>This is a <b>tablet</b> view via Snippet tag.</p>
`:else=``?input=`tablet`]]

[[!MobileDetect:is=`1`:then=`
    <p>This is a <b>mobile</b> view via Snippet tag.</p>
`:else=``?input=`mobile`]]
Cниппет сравнивает тип устройства в параметре &input с тем, что у пользователя, и возвращает 1 или 0, которые можно проверять. Будет работать везде, но вид записи не самый удобный.

4. Как HTML теги не рекомендуется
<standard>
    <p>This is a <b>standard</b> view via HTML tag.</p>
</standard>
<tablet>
    <p>This is a <b>tablet</b> view via HTML tag.</p>
</tablet>
<mobile>
    <p>This is a <b>mobile</b> view via HTML tag.</p>
</mobile>
Если посетитель заходит на сайт с мобильного — убирается контент тегов standard и tablet. Если с компьютера — то tablet и mobile. Таким образом, вы легко можете организовать мобильную версию сайта.

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

Настройки


Все возможные опции вынесены в системные настройки. Это значит, что их можно указывать раздельно для каждого контекста.
  • disable_plugin — Выключить плагин
  • use_cookie — Запоминать тип браузера юзера.
  • tablet_is_standard — Считать планшеты компьютерами и выводить для них тег standard.
  • + разные настройки для указания переменных и тегов версий


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

Исходный код в репозитории на GitHub.
Саму библиотеку Mobile Detect в директории vendor можно обновлять через Composer.

Посмотреть в работе можно на демо-сайте.

2.0.2-pl

  • Add Fenom blocks {mobile}{/mobile}, {desktop}{/desktop}, {standard}{/standard}, {phone}{/phone} and {tablet}{/tablet}

2.0.1-pl

  • Mobile Detect 2.8.34

2.0.0-pl

  • Mobile Detect included via composer
  • Added snippet MobileDetect
  • Updated Mobile Detect core to version 2.8.28
  • Test template is no longer installed by default

1.0.1-pl

  • Updated Mobile-Detect core

1.0.0-beta

  • Initial version

Последние обсуждения в сообществе MODX.pro