bloger-trip

bloger-trip

Веб-разработка

Платформа: Joomla 4 (без интернет-магазина).

Тема: кастомная тема BT Custom (разработка под бренд bloger-trip.ru — авторские туры по Африке, Азии и Латинской Америке).

Что сделано

Главная и навигация

Главная с hero-блоком: фоновое изображение из кастомного поля материала (hero_image), заголовок «Туда, где не был», подзаголовок «Авторские путешествия по Африке, Азии и Латинской Америке», кнопка «Ближайшие туры» (якорь на #home-calendar). Шапка с логотипом (SVG) и навигацией (Календарь туров, Об авторе, Вопросы-ответы, Отзывы, Блог, Контакты), бургер-меню на мобильных с блокировкой скролла (main.js). Резиновая вёрстка, CSS-переменные (—dark, —light, —accent, —functional), шрифт Manrope (Google Fonts). Для каждой страницы — единый index.php с условным выводом контента (главная / статья / контакты).

Календарь туров и карточки туров

Блок «Календарь туров» на главной: выборка статей из категории «Туры» (catid=60) с полями tour_start_date, tour_end_date, departure_date, group_seats, group_full, cover_image, short_description; поддержка тега «предзапись» (отдельная кнопка «Оставить заявку» и бейдж). Сортировка: сначала туры с предзаписью, затем по дате. Карточки с датами (date-chip), описанием, кнопками «Забронировать» / «Подробнее» / «Оставить заявку». Ссылка «Посмотреть все туры» на /calendar.html.

Страница тура (layout=tour)

Полноценный шаблон тура (tour.php): загрузка полей из группы «Туры» и по категории статьи (Joomla Custom Fields), хелперы для вариантов имён (подчёркивание/дефис), нормализация media-полей (JSON/строка). Блоки: даты, программа, размещение (subform: слайды/изображения), что включено/не включено, FAQ по туру (subform), стоимость, форма бронирования. UTF-8 для всех текстовых полей, работа с БД через setQuery.

Бронирование и формы

Модальное окно бронирования (id=»booking-modal»): форма с полями имя, телефон, email, скрытые article_id и dates, чекбокс согласия на обработку персональных данных, CSRF (Joomla Session::checkToken). Отправка через POST в index.php (booking_request), валидация на клиенте и сервере (телефон, email, согласие), ответ JSON (ok/error). Учёт статуса тура: «Лист ожидания», количество мест (бейдж в модалке). Универсальный обработчик форм (global_form_mail): привязка ко всем формам через MutationObserver, отправка полей на email (form_id, form_name, form_subject, page_title), показ модалки «Спасибо! Заявка отправлена». Подписка в футере (email_subscribe): отдельный handler, модалка «Путешествие начинается!». Контактная форма на странице контактов (contact_form): имя, телефон, email, сообщение, отправка на mohatma@yandex.ru. Во всех формах — проверка согласия и валидация телефона/email.

Блог и статьи

Маршрутизация статей по alias: avtor → avtor.php (Об авторе), otzyv → otzyv.php (Отзывы), tury → faq.php (Вопросы-ответы), stati → blog-page.php (лента блога), остальные статьи блога — default.php. Категория блога (category/blog): фильтр по категориям (кроме catid=60), поиск, пагинация, карточки статей с изображением (поле main_image или стандартные images), датой, ссылкой. Исключение из выборки материалов с alias home / glavnaya-stranitsa.

Страница контактов

Отдельный layout (contact.php): вывод контента статьи и форма обратной связи; обработка contact_form в начале файла, редирект/JSON без перезагрузки по сценарию.

Секции главной

Hero, блок «Автор туров — Алексей Скрипко» (author_image из полей или дефолт), календарь туров, «Как отправиться в тур» (steps-timeline: прогресс-бар и нумерованные шаги с анимацией по IntersectionObserver в main.js), отзывы (Swiper), FAQ, блок про Telegram-канал.

Дополнительно

Плавающая кнопка «Связаться» (floating-contact): раскрывающееся меню (Telegram, WhatsApp). Галереи: Fancybox (data-fancybox, без подписей). Карусель Telegram: Embla Carousel + EmblaCarouselAutoplay. Страница 404 (error.php) в стилистике темы с header/footer. Принудительная UTF-8 в шаблоне (headers, mb_internal_encoding), отключение кэша в dev-окружении. Yandex.Metrika (webvisor, clickmap, accurateTrackBounce, trackLinks).

Стек

PHP, Joomla 4, кастомная тема BT Custom (HTML/CSS/JS), встроенные Custom Fields (в т.ч. subform для FAQ, размещения, отзывов). Обработка форм и отправка писем — в index.php и контактном layout; Swiper, Fancybox, Embla Carousel подключаются с CDN. Шрифты: Manrope (Google Fonts). Стили: один основной style.css с переменными и компонентами.