Создания сайта для KT&G (ESSE)

Клиент сформулировал цель лаконично: поддержать имидж KT&G как мирового лидера в своём сегменте. Из этой цели вытекал весь пул задач:

создать современный, стильный, динамичный сайт с актуальным дизайном;

выстроить закрытую зону для партнёров (esse-club) и отдельный личный кабинет для конечных пользователей;

реализовать каталог продуктовых линеек с прицелом на будущий оптовый интернет-магазин;

закрыть страницы с табачной продукцией за авторизацией с верификацией возраста;

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

Архитектура сайта

Структура проекта была спроектирована вокруг трёх типов пользователей: гость, авторизованный пользователь и партнёр. Каждый видит свой набор разделов.

Публичная часть (доступна всем):

• Главная страница

• Новости и акции

• Вакансии

• Контакты

Закрытая пользовательская зона (требует регистрации с верификацией):

• Каталог продукции (6 линеек ESSE)

• Технологии

• Личный кабинет

Партнёрский кабинет esse-club (закрыт от индексации, отдельная регистрация):

• Новости и спецпредложения для партнёров

• Данные компании (просмотр и редактирование)

• Опросы

• Вопросы и ответы

  Дизайн и вёрстка

  Визуальная концепция строилась вокруг образа «утончённости и современного дизайна» — ключевого слогана бренда ESSE. Дизайнеры ориентировались на референсы, предоставленные клиентом, и на эстетику fashion/lifestyle брендов: тёмный фон, крупная типографика, воздушные отступы, минимум текста — максимум атмосферы.

  Главная страница получила:

  • полноэкранный hero-блок со слоганом и динамичной визуализацией;

  • карусель промо-баннеров (акции, промокоды);

  • графическую плитку навигации по разделам;

  • блоки анонсов новостей, акций и горящих вакансий — с расстановкой по посещаемости (более кликаемые блоки поднимались выше).

  Вёрстка — адаптивная, с четырьмя брейкпоинтами: до 767 px, от 768 px, от 992 px, от 1200 px. Flash не использовался; стек фронтенда — HTML5, CSS3, jQuery. Шапка при скролле сворачивается, мобильное меню реализовано через «гамбургер» слева.

  Кроссбраузерность обеспечивалась по матрице: Chrome 50+, Firefox 46+, IE 10+, Safari 9+, Opera 37+, Яндекс.Браузер 16+, а также мобильные Chrome и Safari (iOS 8+), Opera Mini и Android Browser (4.4+).

  ---

  Регистрация и верификация возраста

  Один из нетривиальных блоков проекта — регистрация с подтверждением личности. Требование было продиктовано законодательными ограничениями на рекламу табака: страницы с продукцией должны быть доступны только совершеннолетним верифицированным пользователям.

  Форма регистрации включала: имя, фамилию, дату рождения, email, город, пароль. Плюс — быстрый вход через VK и Facebook.

  После базовой регистрации пользователь попадал в двухэтапный сценарий верификации:

  1. Загрузка фото паспорта — через файловый загрузчик или снимок с веб-камеры прямо в браузере.

  2. Отложенное подтверждение — пользователь получал 14 дней «пробного» доступа. По истечении срока без верификации доступ к закрытым разделам блокировался.

  Статусная модель: «не подтверждён» → «ожидает верификации» → «подтверждён». Соответствующие баннеры и редиректы настраивались через Битрикс-события.

  ---

  Каталог продукции

  Шесть линеек ESSE — Основная, Премиальная, Exchange, Café, Mini и Blooming — были реализованы на базе модуля «Интернет-магазин» Битрикса. Это принципиальное решение: в будущем клиент планировал добавить возможность оптовых заказов, и нативный модуль давал этот задел без переработки архитектуры.

  Каждая линейка — отдельный раздел каталога с карточками товаров, которые администратор наполняет через стандартную админ-панель. Раздел полностью закрыт за авторизацией; гость видит лишь форму входа/регистрации.

  ---

  Партнёрский кабинет

  Esse-club — это отдельная подсистема внутри сайта с собственной регистрацией. Партнёр при регистрации указывал тип и название компании, города работы, контакты. После одобрения администратором он получал доступ к закрытому разделу с новостями, спецпредложениями и обучающими материалами.

  Личный кабинет партнёра включал блоки: данные компании (с возможностью редактирования), актуальные акции, вопросы и ответы. Раздел был закрыт от поисковой индексации через robots.txt и мета-теги.

  

  ---

  Система опросов

  Требование клиента — вовлекать аудиторию через опросы с вознаграждением (стикеры для мессенджеров). Было реализовано три типа:

  В письме — один вопрос, варианты ответа в виде ссылок с uid, стилизованных под кнопки. Клик открывал страницу с подтверждением, голос фиксировался в базе.

  На отдел

  ьной странице — полноценный опросник с вопросами в свободной и закрытой форме.

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

  Все результаты агрегировались в административной панели в виде таблицы и выгружались в форматах XLS и CSV.

  ---

  Вакансии

  Раздел реализован как гибрид: список вакансий со ссылками на hh.ru и собственная форма обратной связи с возможностью прикрепить резюме до 20 МБ. Горящие вакансии отмечались специальной иконкой. Приветственный текст и список вакансий редактировались из административной панели.

Проект охватил весь спектр задач — от визуального ребрендинга до сложной логики доступа и верификации пользователей. 1С-Битрикс в редакции «Бизнес» выступил полноценной основой: штатные модули закрыли 80% функциональных требований, а кастомная разработка была сосредоточена на специфических для бренда сценариях — верификации паспорта, системе опросов и партнёрском клубе.

Сайт поддерживает два языка, корректно работает на всём спектре устройств и браузеров, а каталог продукции уже готов к расширению до полноценного оптового B2B-магазина.