Сайт с прочностью керамогранита: разработка интернет-магазина Technotile

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

Разработка интернет-магазина на «Битрикс» с импортом каталога из «1С», иерархической структурой разделов, многоценовой механикой и системой скидок для оптовиков.

Особенности проекта

Проект для «ТехноТайл» включал типичные задачи для e-commerce строительных материалов, но с рядом важных нюансов.

Каталог и фильтрация

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

Интеграция с «1С»

Для корректного отображения ассортимента реализовали кастомную выгрузку из «1С» — с учетом характеристик и актуальных остатков.

Личный кабинет и корзина

Спроектировали понятный сценарий оформления заказа и удобный личный кабинет с простой регистрацией.

Цены и логика заказа

Реализовали гибкую систему:

• цены зависят от региона и объема закупки;
• поддержка розницы и опта;
• заказ в разных единицах: м², коробки, паллеты или отдельные образцы.

Так сформировали основу для дальнейшей разработки проекта.

Прототипы и структура

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

Прототипы страниц

Разработали прототипы — схемы страниц, которые показывают расположение блоков, изображений и текстового контента.

Схематические шаблоны дают первое представление о будущем сайте. На их основе создается дизайн-концепция: подбираются цвета, шрифты, варианты оформления блоков.

Финальный дизайн

После серии согласований утвердили финальный вариант внешнего вида страниц.

Логика каталога и поиск

Широкий ассортимент определил архитектуру сайта и подход к разработке. Ключевой задачей стал корректный импорт данных из «1С» в «Битрикс».

Для этого реализовали две выгрузки:

• коллекции (как отдельные разделы);
• конкретные товарные позиции.

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

С точки зрения пользовательского опыта, важно добиться интуитивного понимания у клиента: как работать с каталогом и где искать нужный товар. Для этого у поиска на сайте есть несколько точек входа:

Поисковая строка в хедере, или шапке сайта

Для тех, кто точно знает, что нужно, знаком с коллекциями и наименованиями. 

Быстрая фильтрация в каталоге

Здесь можно значительно сузить поиск, если выбрать нужный размер, фактуру, цвет или тип поверхности.

Расширенный поиск

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

Выбор по производителю

Когда посетителя интересуют материалы конкретного поставщика, но с коллекцией он еще не определился.

Иерархия коллекций

Товары на сайте организованы по иерархической модели: каждая позиция входит в коллекцию. Структура работает по принципу «матрешки» — от общего к частному.

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

Дополнительные сценарии выбора

Помимо основной структуры каталога добавили альтернативные пути навигации. На страницах коллекций появились блоки «Похожие коллекции», а в карточках товаров — аналоги.  

Также разработали справочник интерьеров, чтобы пользователь мог увидеть, как плитка выглядит в готовом пространстве и проще принять решение.

Компактная подача характеристик

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

Функционал карточки

Инструменты выбора

В карточке товара добавили поле с оптовой скидкой — покупатель сразу видит выгоду при заказе большого объема.

• избранное для товаров и коллекций;
• сравнение с акцентом на различия;
• историю просмотров с сортировкой по времени.

Рекомендации при оформлении

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

Например, при выборе плитки система автоматически рассчитывает необходимое количество клея и предлагает добавить его в блоке «Вам может понадобиться».

Оформление заказа

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

Неавторизованные пользователи видят розничные цены для Москвы — это стимулирует регистрацию. Тем более процесс максимально простой: по email или через Google.

В личном кабинете доступны основные разделы: персональные данные, спецпредложения и история заказов.  

Форма заказа

На этапе оформления пользователь заполняет короткую форму с учетом типа клиента — физическое или юридическое лицо.

Доступен выбор способа доставки и оплаты, что делает процесс заказа быстрым и удобным.  

Удобный и функциональный сайт

Теперь у «ТехноТайла» функциональный и удобный сайт с понятной структурой каталога, продуманной навигацией и гибкой системой фильтрации и поиска.

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

На техническом уровне реализован стабильный импорт товаров из «1С», учтена политика многоценовости и разработана механика расчета цены за образец и скидок для оптовиков. Проект оптимизирован для поисковых систем.