Бесплатно
Загрузите дополнение из админки вашего сайта.
Как загрузить?
Как загрузить?
Компонент позволяет определять тип устройства пользователя и выводить контент в зависимости от этого. Всего возможно 3 типа вызова.
1. Как фильтр Fenom
В отличии от двух следующих типов вызова, код в неподходящих блоках выполняться не будет, что даёт возможность вызывать в них какие-то сниппеты.
2. Как блоковая функция Fenom
{desktop}{/desktop} — десктоп
{standard}{/standard} — десктоп
{phone}{/phone} — только телефоны
{tablet}{/tablet} — только планшеты
3. Как сниппет MODX
4. Как HTML теги не рекомендуется
Как и во втором типе, при таком вызове сначала будут распарсены все теги MODX внутри блоков, что не очень эффективно и может вести к ошибкам логики. Проблем с кэшированием нет, потому что ненужные теги убираются при выводе юзеру.
Все возможные опции вынесены в системные настройки. Это значит, что их можно указывать раздельно для каждого контекста.
Помимо автоопределения, можно и напрямую указывать требуемую версию через url.
Исходный код в репозитории на GitHub.
Саму библиотеку Mobile Detect в директории vendor можно обновлять через Composer.
Посмотреть в работе можно на демо-сайте.
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