Плагин Device Detection (GDTT) для Cotonti CMF: полный обзор и техническая документация

ЧАСТЬ I. ОБЗОР ПРОСТЫМИ СЛОВАМИ

1. Что такое плагин Device Detection и зачем он нужен

Плагин Device Detection (GDTT) — это расширение для системы управления сайтом Cotonti CMF, которое автоматически определяет, с какого устройства посетитель зашёл на ваш сайт. Это может быть смартфон, планшет, ноутбук, настольный компьютер с большим монитором или даже очень широкий профессиональный дисплей.

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

• Размер экрана — на телефоне узкий экран, на мониторе широкий. Если сайт не адаптирован, пользователь будет вынужден постоянно масштабировать страницу.
• Скорость интернета — мобильные сети часто медленнее проводных. Тяжёлые изображения и скрипты могут загружаться долго, и посетитель уйдёт.
• Способ взаимодействия — на телефоне удобно нажимать пальцем, на компьютере — кликать мышью. Некоторые элементы управления могут быть неудобны на определённых устройствах.
• Контент — некоторую информацию лучше показывать только на больших экранах, а что-то — только на мобильных.

Плагин Device Detection решает все эти задачи. Он на лету определяет тип устройства и позволяет вашему сайту автоматически подстраиваться под него. При этом вам не нужно вручную создавать разные версии сайта — достаточно один раз настроить правила, и плагин сделает всё сам.

2. Как работает плагин: простое объяснение

Работа плагина основана на двух ключевых механизмах: анализ строки User-Agent и определение ширины экрана.

2.1. Анализ User-Agent

Каждый раз, когда браузер обращается к сайту, он отправляет специальную строку — User-Agent. В этой строке содержится информация о браузере, операционной системе и типе устройства. Например, строка может выглядеть так:

Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-G973U) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/14.2 Chrome/146.0.0.0 Mobile Safari/537.36

Из этой строки опытный программист может понять, что пользователь зашёл с телефона Samsung под управлением Android 11. Плагин Device Detection использует специальную библиотеку MobileDetect, которая содержит тысячи шаблонов таких строк. Библиотека автоматически сравнивает User-Agent посетителя с этими шаблонами и определяет:

• Мобильное устройство (смартфон) — если строка содержит признаки мобильного браузера или операционной системы.
• Планшет — если строка указывает на планшетное устройство.
• Настольный компьютер — если признаки мобильности отсутствуют.

Этот метод работает всегда, независимо от того, включён ли JavaScript у посетителя, и не требует никаких дополнительных действий с его стороны.

2.2. Определение ширины экрана

Второй механизм — определение ширины viewport (области просмотра) в пикселях. Это нужно, чтобы отличить, например, маленький ноутбук от большого монитора. Плагин использует два источника данных:

1. Client Hints — специальные заголовки, которые присылают современные браузеры (Chrome, Edge, Opera, Brave). Они называются Sec-CH-Viewport-Width и содержат точную ширину области просмотра. Однако эти заголовки работают только на HTTPS и только со второго запроса к сайту. В Firefox и Safari они не поддерживаются.
2. Cookie device_gdtt_w — если Client Hints недоступны, плагин использует специальную cookie, которую устанавливает небольшой JavaScript-скрипт на предыдущем визите. Этот скрипт определяет ширину окна браузера и сохраняет её в cookie. При следующем заходе плагин читает эту cookie и получает нужное значение. Этот метод работает во всех браузерах, включая Firefox и Safari, и не зависит от HTTPS.

Если ни Client Hints, ни cookie недоступны (например, при первом визите или если у посетителя отключён JavaScript), плагин использует значение по умолчанию — как правило, это desktop_medium (средний ноутбук или монитор). Это наиболее вероятный вариант для большинства посетителей.

3. Какие типы устройств определяет плагин

Плагин различает шесть типов устройств:

1. Mobile (мобильный телефон) — смартфоны, коммуникаторы. Определяется по User-Agent через библиотеку MobileDetect.
2. Tablet (планшет) — планшетные компьютеры. Также определяется по User-Agent.
3. Desktop Small (маленький ноутбук) — ноутбуки с диагональю экрана примерно до 15 дюймов и шириной окна до 1366 пикселей по умолчанию.
4. Desktop Medium (средний ноутбук или монитор) — устройства с шириной экрана от 1367 до 1600 пикселей. Это наиболее распространённый вариант для настольных компьютеров и ноутбуков.
5. Desktop Large (большой монитор) — мониторы с шириной от 1601 до 1920 пикселей.
6. Desktop XLarge (очень большой монитор) — профессиональные дисплеи шириной более 1920 пикселей.

Все пороговые значения ширины настраиваются администратором сайта в панели управления плагином. Это значит, что вы можете адаптировать плагин под свои конкретные нужды — например, если ваш сайт ориентирован на пользователей с определёнными устройствами.

4. Где и как можно использовать плагин

Плагин открывает широкие возможности для адаптации сайта. Вот несколько примеров:

4.1. Показ различного контента

Вы можете показывать разный контент в зависимости от устройства. Например:

• На мобильных телефонах — упрощённую версию страницы с меньшим количеством изображений.
• На планшетах — промежуточный вариант.
• На больших мониторах — расширенную версию с дополнительными элементами.

Это делается с помощью простых условий в шаблонах сайта, которые плагин предоставляет автоматически.

4.2. Адаптация рекламных блоков

Рекламные блоки можно показывать по-разному на разных устройствах. Например, на мобильных — компактные баннеры, на десктопах — крупные графические блоки. Плагин позволяет легко реализовать такую логику.

4.3. Управление навигацией

Меню сайта можно делать более компактным на мобильных устройствах и развёрнутым на больших экранах. Это улучшает пользовательский опыт и снижает нагрузку на мобильные сети.

4.4. Оптимизация скорости загрузки

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

4.5. Аналитика и статистика

Плагин может передавать информацию о типе устройства в системы аналитики (например, Google Analytics или Яндекс.Метрика). Это позволяет лучше понимать аудиторию сайта и принимать обоснованные решения по его развитию.

4.6. Интеграция с другими плагинами

Плагин Device Detection может использоваться совместно с другими расширениями Cotonti. Например, с плагином статистики посещений (Visitor Statistics) — для более точного анализа аудитории. Или с плагинами, которые показывают разный контент для разных групп пользователей.

5. Преимущества плагина

1. Простота установки и настройки — плагин устанавливается как любое другое расширение Cotonti. Все настройки выполняются через удобную панель администратора.
2. Гибкость — пороговые значения ширины экрана можно изменять под конкретные нужды сайта. Вы не привязаны к жёстким стандартам.
3. Совместимость — плагин работает на всех современных браузерах. Для старых браузеров предусмотрены резервные механизмы.
4. Производительность — плагин использует кэширование и не создаёт дополнительной нагрузки на сервер. Определение типа устройства занимает доли секунды.
5. Безопасность — все входные данные проверяются и очищаются. Плагин не создаёт уязвимостей для сайта.
6. Открытый исходный код — вы можете изучить код плагина и убедиться в его надёжности. При необходимости можно внести свои изменения.

6. Когда стоит использовать плагин

Плагин Device Detection будет полезен в следующих случаях:

• Вы владеете интернет-магазином и хотите, чтобы сайт был удобен для всех посетителей, независимо от устройства.
• У вас информационный портал с большим количеством контента, и вы хотите оптимизировать его подачу для разных устройств.
• Вы используете рекламу и хотите показывать разные рекламные блоки в зависимости от устройства.
• Вы разрабатываете тему оформления для Cotonti и хотите добавить в неё поддержку разных устройств.
• Вы хотите собирать статистику о том, с каких устройств посетители заходят на ваш сайт.

В любом из этих случаев плагин Device Detection станет надёжным помощником, который сделает ваш сайт более удобным и эффективным.

ЧАСТЬ II. ЭКОНОМИЧЕСКОЕ ОБОСНОВАНИЕ: СКОЛЬКО РЕАЛЬНО СТОИТ «МОБИЛЬНАЯ ВЕРСИЯ» И ПОЧЕМУ ПЛАГИН ОКУПАЕТСЯ В ПЕРВЫЙ МЕСЯЦ

1. Постановка проблемы: «мобильная версия» как скрытая статья расходов

1.1. Как делали мобильные версии до появления плагинов

В эпоху 2010–2018 годов стандартным решением для поддержки мобильных пользователей было создание отдельной мобильной темы — то есть второй, упрощённой версии сайта, которая отдавалась посетителям со смартфонов. Крупные порталы (новостные, интернет-магазины, форумы) держали две параллельные ветки разработки:

• desktop — основная тема для ноутбуков и мониторов;
• mobile — упрощённая тема для телефонов.

Сайты вроде m.example.com или example.com/m/ стали нормой. Пользователь с телефона принудительно перебрасывался на мобильную версию, часто с урезанным функционалом: нельзя было купить товар, оставить комментарий, посмотреть полную версию статьи. Это было плохо для пользователя, но привычно для владельца сайта.

1.2. Почему такой подход стоил огромных денег

Ключевая проблема: две темы — это два независимых проекта. Каждая имеет собственную:

• систему шаблонов и структуру TPL-файлов;
• CSS-стили и JavaScript-скрипты;
• систему компонентов, галерей, форм;
• логику взаимодействия с модулями и плагинами Cotonti;
• набор интеграционных точек с внешними сервисами (аналитика, реклама, оплата).

Это значит, что разработчик, который вносит изменение в одну тему, обязан внести то же изменение во вторую. А если изменения касаются Cotonti-плагинов (например, новый модуль оплаты или новая система комментариев), то интеграция выполняется дважды: сначала в desktop-тему, затем в mobile-тему.

На практике большинство владельцев сайтов либо забивали на синхронизацию (и мобильная версия безнадёжно отставала), либо платили за двойную работу каждый раз при обновлении.

1.3. Что изменилось в 2020-х (но не отменило проблему)

Современный интернет двинулся в сторону адаптивной вёрстки: одна тема, разные CSS-медиазапросы, всё в одном флаконе. Идея правильная. Но на Cotonti CMF, где тема — это не просто HTML+CSS, а сложная система TPL-шаблонов и PHP-интеграций, адаптивная вёрстка не всегда решает задачу:

• некоторые элементы технически невозможно сделать адаптивными (например, тяжёлые выпадающие меню);
• часть контента не нужна на мобильных вообще (например, большие рекламные баннеры, карты, встроенные видеоплееры);
• некоторые Cotonti-плагины не поддерживают адаптивность и требуют отдельного рендеринга для мобильных;
• CMS-интерфейсы типа Bootstrap 5 всё равно требуют условной логики для сложных сценариев.

В итоге даже сегодня многие проекты возвращаются к идее двух тем — но уже под соусом «responsive» или «mobile-first». А расходы при этом остаются теми же.

2. Реальная стоимость разработки двух тем: детальный разбор

Ниже — реальные рыночные цифры (2024–2026 годы) для Cotonti-проектов средней сложности. Взяты ставки фрилансеров и агентств из открытых источников: Upwork, Freelancer.com, Хабр Фриланс, FL.ru.

2.1. Этап проектирования

Одна тема:

Две темы: проектирование мобильной версии нельзя просто «уменьшить» — это отдельный UX-дизайн с другой навигацией, другими акцентами, другой логикой взаимодействия.

Разница: примерно $1400–2200 только на этапе проектирования.

2.2. Этап вёрстки

Одна тема:

Две темы: мобильная вёрстка — это отдельный набор шаблонов (не только CSS).

Разница: $3150–4900.

2.3. Этап интеграции с Cotonti

Здесь и начинается основная боль: Cotonti — это не WordPress. Тема Cotonti — это не просто HTML+CSS, а набор .tpl-файлов, каждый из которых связан с логикой конкретного модуля или плагина. Интеграция требует программиста Cotonti.

Одна тема:

Две темы: каждую интеграцию нужно повторить.

Разница: $5500–8500.

2.4. Этап тестирования

Одна тема:

Две темы: количество проверок умножается.

Разница: $1050–1650.

2.5. Итоговая стоимость разработки

Простой вывод: на старте проекта создание двух тем дороже создания одной на $11 000 – $17 250. Это чистая переплата за то, что можно решить одной темой с условными блоками.

3. Скрытые расходы: то, о чём не пишут в смете

Разработка — это только начало. Настоящая проблема двух тем — поддержка, которая не заканчивается никогда.

3.1. Ежедневные и еженедельные обновления контента

На любом живом сайте изменения происходят постоянно:

• добавили новую страницу — нужно проверить в обеих темах;
• поменяли блок с акциями — отредактировать в двух местах;
• добавили новую форму — свёрстать дважды.

Реалистичная нагрузка: 5–10 часов в месяц на обе темы. При ставке $35/час это $175–350 в месяц.

3.2. Синхронизация при обновлениях Cotonti

Cotonti регулярно выпускает обновления ядра и плагинов. После каждого обновления:

• проверка работоспособности desktop-темы — 3–5 часов;
• проверка работоспособности mobile-темы — 3–5 часов;
• исправление несовместимостей — 2–8 часов.

Реалистичная частота: 2–4 раза в год. Нагрузка: 16–72 часа в год. При $50/час — $800–3600 в год.

3.3. Синхронизация при добавлении новых модулей и плагинов

Каждый новый плагин Cotonti (интернет-магазин, форма бронирования, чат, лента новостей) требует вёрстки шаблонов. Если у вас две темы — плагин нужно верстать дважды.

Реалистичная частота: 1–3 новых модуля в год. Нагрузка: 20–60 часов на каждый модуль × 2 = 40–120 часов в год. При $50/час — $2000–6000 в год.

3.4. SEO-оптимизация

SEO-специалист оптимизирует страницы, а не темы. Но техническая реализация (микроразметка, скорость, mobile-friendly, Core Web Vitals) ложится на разработчика. При двух темах каждая SEO-правка выполняется дважды.

Реалистичная частота: ежемесячно. Нагрузка: 4–8 часов в месяц × 2 = 8–16 часов. При $40/час — $320–640 в месяц.

3.5. Ошибки и срочные фиксы

Когда что-то ломается — а в Cotonti это происходит регулярно при обновлениях плагинов — фикс нужно сделать в двух темах. Срочный вызов разработчика — от $100 до $300 за инцидент. В среднем 5–10 инцидентов в год. $500–3000 в год.

3.6. Сводная таблица скрытых расходов

Реальность: поддержка двух тем обходится в $9 000 – $24 500 ежегодно. За 5 лет это $45 000 – $122 500.

4. Что даёт плагин Device Detection (GDTT)

4.1. Одна тема вместо двух

Плагин позволяет оставить одну тему для всех устройств. Все различия между мобильной и десктопной версией реализуются через условные блоки в шаблонах.

4.2. Условные блоки вместо дублирования

Вместо создания второго набора .tpl-файлов вы добавляете в существующие шаблоны конструкции вида:

<!-- IF {PHP.out.divice_display_is_mobile} -->
 <!-- упрощённый мобильный блок -->
<!-- ELSE -->
 <!-- полный десктопный блок -->
<!-- ENDIF -->

Это не создаёт вторую тему. Это одна тема, где небольшие фрагменты отображаются по-разному для разных устройств.

4.3. Единая база данных, единая логика

Все плагины Cotonti подключаются один раз, а не дважды. Все модули интегрируются один раз. Единая система прав, единая система шаблонов, единый язык.

4.4. Единая точка поддержки

Обновление Cotonti, добавление плагина, SEO-правка — всё делается один раз. Не нужно синхронизировать две темы, потому что тема одна.

4.5. Реальная гибкость

Иногда нужно сделать ровно наоборот: убрать что-то с десктопа и показать на мобильном. Плагин позволяет и это — логика условий симметрична:

<!-- IF {PHP.out.divice_display_is_mobile} -->
 <!-- то, что должно быть только на мобильном -->
<!-- ENDIF -->
<!-- IF !{PHP.out.divice_display_is_mobile} -->
 <!-- то, что должно быть только на десктопе -->
<!-- ENDIF -->

Это точная настройка, а не грубая адаптивность.

5. Сводная таблица затрат: сравнение подходов

Чистая экономия за 5 лет: $43 000 – $102 250.

Стоимость плагина — символическая (десятки долларов). Окупаемость — в первый месяц использования. Дальше идёт чистая экономия.

6. Дополнительные экономические выгоды

6.1. Экономия на времени

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

6.2. Ускорение запуска

Разработка одной темы с условными блоками занимает 2–3 недели вместо 5–8 недель при двух темах. Быстрее выход на рынок = быстрее монетизация.

6.3. Снижение рисков

Две темы = два источника багов. Одна тема = один источник. Меньше багов — меньше простоев — меньше потерь.

6.4. Улучшение конверсии

Точное, точечное скрытие ненужных элементов на мобильных повышает удобство и снижает отказы. По данным Google, 53% посетителей покидают сайт, если загрузка длится больше 3 секунд, и 38% — если интерфейс неудобен. Плагин позволяет этого избежать без переделки дизайна.

6.5. Повышение SEO-показателей

Google и Яндекс учитывают mobile-friendly сайта в ранжировании. Одна тема с корректными условными блоками даёт единый URL, единый HTML, единый контент — это лучше для SEO, чем m.example.com или /mobile/.

6.6. Унификация аналитики

При двух темах статистика раздваивается: часть трафика приходит на десктопную версию, часть — на мобильную. Это искажает данные. При одной теме вся аналитика — в одном отчёте.

7. Сценарии применения: где плагин окупается мгновенно

7.1. Фриланс-биржа

Фриланс-биржи имеют сложные интерфейсы (списки заказов, чаты, профили, портфолио). Мобильная версия такой биржи — это отдельный проект, сопоставимый по стоимости с десктопной.

Что даёт плагин:

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

Экономия за 5 лет: $50 000 – $100 000.

7.2. Интернет-магазин

Ключевая задача — простой и быстрый процесс оформления заказа на телефоне. Плагин позволяет:

• убрать рекламные баннеры на мобильных;
• показать компактную корзину;
• скрыть десктопное горизонтальное меню;
• отключить тяжёлые скрипты (например, 3D-просмотр товара) на мобильных.

Экономия: одинаковая для любого магазина с 200+ SKU.

7.3. Новостной портал

На новостных порталах мобильные читатели — это больше 60% аудитории. Две темы — обязательный стандарт. Плагин заменяет их одной темой с условными блоками: разные блоки рекламы, разные форматы ленты, разные шапки.

7.4. Тематическое сообщество

Форумы, блоги, клубы по интересам. Плагин позволяет:

• на мобильном — компактный список тем;
• на десктопе — развёрнутый с превью;
• на мобильном — быстрый ответ;
• на десктопе — расширенный редактор.

8. Заключение

Экономический аргумент в пользу плагина Device Detection (GDTT) прост и однозначен:

• Стоимость плагина — десятки долларов.
• Стоимость двух тем — десятки тысяч долларов.
• Окупаемость — в первый месяц.
• Экономия за 5 лет — $40 000 – $100 000 и выше.

При этом речь не идёт о каком-то «срезании углов» или компромиссах. Наоборот — плагин даёт более точный контроль над контентом, чем две отдельные темы:

• можно скрыть конкретный блок только на мобильных;
• можно показать особый блок только на больших мониторах;
• можно оставить общую структуру, но поменять порядок элементов;
• можно отключить тяжёлые скрипты для одной категории устройств.

И всё это — в одной теме, с одной базой данных, с одним набором шаблонов.

Для фриланс-биржи, интернет-магазина, новостного портала, тематического сообщества — плагин становится не «одним из расширений», а базовым инструментом экономии, который окупается раньше, чем вы успеете согласовать смету на разработку второй темы.

Раздел подготовлен на основе реальных рыночных ставок разработки Cotonti-проектов (2024–2026) и практического опыта эксплуатации сайтов с двумя темами. Все цифры — оценочные, приведены для демонстрации порядка величин и структуры расходов.

ЧАСТЬ II. ТЕХНИЧЕСКАЯ ДОКУМЕНТАЦИЯ

1. Общая архитектура плагина

Плагин Device Detection (GDTT) состоит из нескольких ключевых файлов, каждый из которых выполняет свою задачу. Понимание этой структуры поможет вам правильно настроить плагин и использовать его в своих проектах.

1.1. Состав файлов плагина

plugins/device_gdtt/
├── device_gdtt.setup.php # Метаданные плагина и настройки по умолчанию
├── device_gdtt.rc.php # Хук rc — выполняется до global hook
├── device_gdtt.global.php # Хук global — резервная точка (не обязателен)
├── inc/
│ └── device_gdtt.functions.php # Вспомогательные функции и класс детекции
├── lib/
│ └── MobileDetect.php # Адаптированная библиотека Mobile-Detect
├── lang/
│ ├── device_gdtt.ru.lang.php # Русская локализация
│ └── device_gdtt.en.lang.php # Английская локализация
└── index.html # Заглушка для предотвращения листинга директории

Файл device_gdtt.setup.php — это точка входа плагина. В нём объявляются метаданные (название, версия, автор), а также настройки по умолчанию, которые будут использоваться, если администратор не изменит их вручную.

Файл device_gdtt.rc.php — это хук rc, который срабатывает на каждом запросе к сайту до того, как начнётся рендеринг шапки. Именно здесь происходит определение типа устройства и запись результатов в глобальный реестр Cot::$out. Этот файл также отправляет заголовки Client Hints и вставляет инлайн-JavaScript для установки cookie с шириной экрана.

Файл device_gdtt.global.php — это хук global, который срабатывает послеrc. Он используется как резервная точка: если по каким-то причинам хук rc не сработал (например, из-за кэширования), global может выполнить ту же логику. Однако в текущей версии плагина основная логика сосредоточена в rc.

Файл inc/device_gdtt.functions.php — содержит функцию device_gdtt_detect(), которая выполняет всю работу по определению типа устройства. Здесь же подключается языковой файл и библиотека MobileDetect.

Файл lib/MobileDetect.php — это адаптированная версия библиотеки Mobile-Detect. Она анализирует User-Agent и определяет, является ли устройство мобильным или планшетным.

1.2. Как работает хук rc

Хук rc вызывается в файле system/common.php в секции «Head Resources». Упрощённый фрагмент кода выглядит так:

if (!COT_AJAX) {
 if (!isset($cot_rc_html[$theme]) || !$cache
 || !$cfg['headrc_consolidate'] || defined('COT_ADMIN')) {
 cot_rc_add_standard();
 foreach (cot_getextplugins('rc') as $pl) {
 include $pl;
 }
 }
}

Этот код означает, что хук rc срабатывает только на обычных (не AJAX) запросах. Если включён кэш Cotonti и консолидация head-ресурсов, хук может быть пропущен. В этом случае флаги устройства не будут установлены — для таких случаев и предусмотрен резервный хук global.

На момент вызова rc.php в системе уже доступны:

• Cot::$cfg— полная конфигурация сайта, включая настройки плагина.
• Cot::$usr— текущий пользователь.
• Cot::$sys— системные переменные (URL, время и т.д.).
• Cot::$out— пустой реестр для шаблонных переменных.
• $_SERVER, $_COOKIE — суперглобальные массивы.

Заголовки HTTP ещё не отправлены, поэтому можно использовать header() для отправки Client Hints. Шаблонизатор XTemplate ещё не инициализирован, поэтому нельзя обращаться к объекту $t.

2. Настройка плагина после установки

После установки плагина в панели администратора появится страница с настройками. Все параметры имеют русские и английские названия, а также подробные подсказки.

2.1. Включение Client Hints

Параметр: enable_client_hints

Тип: переключатель (radio)

Значения: 1 — включено, 0 — выключено

По умолчанию: 0

Описание: Этот параметр управляет отправкой заголовка Accept-CH. Если он включён, браузер начнёт присылать заголовок Sec-CH-Viewport-Width со второго запроса к сайту. Это позволяет плагину точно определять ширину экрана без использования cookie.

Важно: Client Hints работают только на HTTPS. Если ваш сайт работает по HTTP, этот параметр не даст эффекта. В этом случае ширина экрана будет определяться через cookie.

Рекомендация: Включите этот параметр, если ваш сайт работает по HTTPS и вы хотите получать максимально точные данные о ширине экрана.

2.2. Пороговые значения ширины экрана

Эти параметры определяют границы между различными типами устройств. Все значения указываются в пикселях.

Параметр: mobile_max_width

По умолчанию: 767

Описание: Верхняя граница ширины для мобильных устройств. Если ширина экрана меньше или равна этому значению, устройство считается мобильным.

Важно: В текущей версии плагина этот параметр не используется в классификаторе, так как мобильные устройства определяются через User-Agent с помощью библиотеки MobileDetect. Параметр сохранён для будущих версий, где может потребоваться переклассификация устройств по ширине.

Параметр: tablet_max_width

По умолчанию: 1024

Описание: Верхняя граница ширины для планшетов. Аналогично параметру mobile_max_width, в текущей версии не используется в классификаторе.

Параметр: desktop_small_max_width

По умолчанию: 1366

Описание: Верхняя граница ширины для типа desktop_small (маленький ноутбук). Устройства с шириной экрана меньше или равной этому значению относятся к этой категории.

Параметр: desktop_medium_max_width

По умолчанию: 1600

Описание: Верхняя граница ширины для типа desktop_medium (средний ноутбук или монитор). Устройства с шириной в диапазоне от desktop_small_max_width до этого значения относятся к этой категории. Также этот тип используется как значение по умолчанию, если ширина экрана неизвестна.

Параметр: desktop_large_max_width

По умолчанию: 1920

Описание: Верхняя граница ширины для типа desktop_large (большой монитор). Устройства с шириной в диапазоне от desktop_medium_max_width до этого значения относятся к этой категории. Всё, что выше, — desktop_xlarge.

Параметр: desktop_xlarge_max_width

По умолчанию: 0

Описание: В текущей версии не используется. Верхняя граница для типа desktop_xlarge является открытой (всё, что больше desktop_large_max_width). Параметр сохранён для полноты семантики порогов.

2.3. Пример настройки порогов

Предположим, вы хотите, чтобы:

• Мобильные устройства имели ширину до 767 пикселей.
• Планшеты — до 1024 пикселей.
• Маленькие ноутбуки — до 1366 пикселей.
• Средние ноутбуки и мониторы — до 1600 пикселей.
• Большие мониторы — до 1920 пикселей.
• Очень большие мониторы — без ограничения.

В этом случае оставьте значения по умолчанию:

mobile_max_width = 767
tablet_max_width = 1024
desktop_small_max_width = 1366
desktop_medium_max_width = 1600
desktop_large_max_width = 1920
desktop_xlarge_max_width = 0

Если вы хотите, чтобы устройства с шириной до 1200 пикселей считались маленькими ноутбуками, измените значение desktop_small_max_width на 1200.

3. Использование плагина в шаблонах

Плагин предоставляет набор булевых флагов, которые можно использовать в шаблонах Cotonti для показа или скрытия контента в зависимости от типа устройства. Флаги доступны через глобальный реестр Cot::$out и имеют префикс divice_display_is_.

3.1. Список доступных флагов

Важно: Имена флагов указаны в нижнем регистре. Это сделано для стабильности парсера XTemplate.

3.2. Примеры использования в шаблонах

3.2.1. Показ контента только для мобильных

<!-- IF {PHP.out.divice_display_is_mobile} -->
 <p>Вы зашли с мобильного телефона.</p>
<!-- ENDIF -->

Этот блок будет показан только посетителям со смартфонами. Если условие ложно, XTemplate полностью удалит блок из итогового HTML — в исходном коде страницы не будет никаких следов.

3.2.2. Показ контента для планшетов и десктопов

<!-- IF {PHP.out.divice_display_is_tablet} OR {PHP.out.divice_display_is_desktop_medium} -->
 <p>Вы зашли с планшета или среднего ноутбука.</p>
<!-- ENDIF -->

XTemplate поддерживает логические операторы OR и AND в условиях.

3.2.3. Разный контент для разных устройств

<!-- IF {PHP.out.divice_display_is_mobile} -->
 <div class="mobile-banner">
 <img src="banner-mobile.jpg" alt="Мобильный баннер">
 </div>
<!-- ELSE -->
 <div class="desktop-banner">
 <img src="banner-desktop.jpg" alt="Десктопный баннер">
 </div>
<!-- ENDIF -->

Здесь используется конструкция IF ... ELSE ... ENDIF для показа разных баннеров в зависимости от типа устройства.

3.2.4. Условие для очень больших мониторов

<!-- IF {PHP.out.divice_display_is_desktop_xlarge} -->
 <p>У вас очень большой монитор.</p>
<!-- ENDIF -->

Этот блок будет показан только посетителям с шириной экрана более 1920 пикселей.

3.3. Использование в PHP-коде

Если вам нужно проверить тип устройства в PHP-коде (например, в другом плагине или модуле), вы можете использовать функцию device_gdtt_detect():

require_once cot_incfile('device_gdtt', 'plug');
$device = device_gdtt_detect();
if ($device['is_mobile']) {
 // Действия для мобильных устройств
}
if ($device['type'] === 'tablet') {
 // Действия для планшетов
}

Функция возвращает массив с ключами:

• type — итоговый тип устройства (строка).
• width — ширина экрана в пикселях (целое число).
• is_mobile, is_tablet, is_desktop_small, is_desktop_medium, is_desktop_large, is_desktop_xlarge — булевы флаги.

4. Бизнес-логика: примеры использования

В этом разделе мы рассмотрим несколько практических сценариев использования плагина в реальных проектах.

4.1. Адаптация интернет-магазина

Предположим, у вас есть интернет-магазин на Cotonti. Вы хотите, чтобы:

• На мобильных устройствах показывалась упрощённая карточка товара (без лишних деталей).
• На планшетах — средняя версия.
• На десктопах — полная версия с дополнительными элементами (например, блоком «Похожие товары»).

Решение: Используйте условия в шаблоне карточки товара:

<!-- IF {PHP.out.divice_display_is_mobile} -->
 <div class="product-card mobile">
 {ITEM_TITLE}
 <p>{ITEM_PRICE}</p>
 </div>
<!-- ELSE -->
 <div class="product-card desktop">
 {ITEM_TITLE}
 <p>{ITEM_DESCRIPTION}</p>
 <p>{ITEM_PRICE}</p>
 <!-- IF {PHP.out.divice_display_is_desktop_medium} OR {PHP.out.divice_display_is_desktop_large} -->
 <div class="related-products">
 {RELATED_PRODUCTS}
 </div>
 <!-- ENDIF -->
 </div>
<!-- ENDIF -->

4.2. Оптимизация рекламных блоков

Вы хотите показывать разные рекламные блоки в зависимости от устройства:

• На мобильных — компактные текстовые объявления.
• На планшетах и десктопах — крупные графические баннеры.

Решение:

<!-- IF {PHP.out.divice_display_is_mobile} -->
 <div class="ad-block-mobile">
 <!-- Текстовое объявление -->
 </div>
<!-- ELSE -->
 <div class="ad-block-desktop">
 <!-- Графический баннер -->
 </div>
<!-- ENDIF -->

4.3. Управление навигацией

Меню сайта должно быть разным для мобильных и десктопов:

• На мобильных — компактное выпадающее меню.
• На десктопах — развёрнутое горизонтальное меню.

Решение:

<!-- IF {PHP.out.divice_display_is_mobile} -->
 <nav class="mobile-menu">
 <!-- Компактное меню -->
 </nav>
<!-- ELSE -->
 <nav class="desktop-menu">
 <!-- Развёрнутое меню -->
 </nav>
<!-- ENDIF -->

4.4. Отключение тяжёлых скриптов на мобильных

Вы хотите, чтобы на мобильных устройствах не загружались тяжёлые скрипты, которые замедляют сайт.

Решение: Используйте условие в шаблоне для подключения скриптов:

<!-- IF !{PHP.out.divice_display_is_mobile} -->
 <script src="heavy-script.js"></script>
<!-- ENDIF -->

Этот скрипт будет загружаться только на планшетах и десктопах.

4.5. Интеграция с плагином Visitor Statistics

Если вы используете плагин Visitor Statistics для сбора статистики, вы можете передавать в него информацию о типе устройства. Например, в файле visitor_stats.global.php можно добавить:

require_once cot_incfile('device_gdtt', 'plug');
$device = device_gdtt_detect();
$visit_data['vs_device_type'] = $device['type'];

Это позволит собирать более точную статистику по устройствам.

5. Отладка и устранение неполадок

Если плагин не работает должным образом, выполните следующие шаги:

5.1. Проверка подключения библиотеки MobileDetect

Добавьте в начало функции device_gdtt_detect():

Cot::$out['gdtt_debug_class'] = class_exists('MobileDetect') ? 'yes' : 'no';

Затем в шаблоне выведите:

<p>MobileDetect: {PHP.out.gdtt_debug_class}</p>

Если отображается no — путь к файлу lib/MobileDetect.php неверный.

5.2. Проверка входных данных

Добавьте в функцию:

Cot::$out['gdtt_debug_hdr'] = $_SERVER['HTTP_SEC_CH_VIEWPORT_WIDTH'] ?? '';
Cot::$out['gdtt_debug_cook'] = $_COOKIE['device_gdtt_w'] ?? '';
Cot::$out['gdtt_debug_width'] = $width;

Выведите эти значения в шаблоне и проверьте, приходят ли данные.

5.3. Проверка кэша

Если у вас включён кэш Cotonti и консолидация head-ресурсов, хук rc может не срабатывать на повторных запросах. В этом случае:

• Отключите кэш Cotonti в настройках.
• Или отключите консолидацию head-ресурсов.
• Или используйте хук global для дублирования логики.

5.4. Проверка типа устройства

Флаги device_type и device_width всегда доступны в шаблонах:

<p>Тип устройства: {PHP.out.device_type}</p>
<p>Ширина экрана: {PHP.out.device_width} px</p>

Используйте их для отладки.

6. Заключение

Плагин Device Detection (GDTT) — это мощный инструмент для адаптации сайта под разные устройства. Он определяет тип устройства посетителя и предоставляет набор флагов для использования в шаблонах. Плагин прост в установке и настройке, но при этом обладает широкими возможностями.

Используйте его для:

• Показа разного контента на разных устройствах.
• Оптимизации рекламных блоков.
• Управления навигацией.
• Отключения тяжёлых скриптов на мобильных.
• Интеграции с другими плагинами.

Плагин полностью совместим с Cotonti CMF и не требует дополнительных зависимостей. Все настройки выполняются через панель администратора, а использование в шаблонах не требует глубоких знаний программирования.

Статья подготовлена на основе исходного кода плагина Device Detection (GDTT) версии 1.0.0. Все технические детали соответствуют фактической реализации.