MobileDetect

Компонент для создания мобильной версии страниц сайта.
Версия 2.0.2-pl
Дата выпуска 25.02.2021
Загрузки 2 672
Просмотры 13 370
Компонент позволяет определять тип устройства пользователя и выводить контент в зависимости от этого. Всего возможно 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