https://blest.ua/ – масштабный проект по разработке интернет-магазина мебели на 1С-Битрикс с нуля.
Для его реализации мы разработали 15 детальных технических заданий на верстку и 14 на программирование. В каждом из них для каждой страницы, блока и функции расписаны конкретные задачи для разработчиков.
Дизайн интернет-магазина разрабатывался специально для Blest.ua. Клиент предоставил полный комплект макетов для верстки шаблона.
Наш frontend-разработчик верстал HTML-шаблоны в технике Pixel Perfect.
Для проекта были созданы шаблоны внушительного перечня страниц:
Тестировщики проверяли каждый HTML-шаблон на соответствие и полное совпадение с макетами дизайна.
Для обеспечения полной адаптивности сайта проводили тестирование на большом количестве разрешений экранов, устройств и браузеров:
Экраны:
Браузеры:
Операционные системы:
Проект разработан по всем канонам CMS 1С-Битрикс: построение шаблона, кастомизация шаблонов компонентов, использование API CMS для расширения нужного функционала в шаблонах компонентов.
На сайте поддерживается в полной мере технология «Эрмитаж». Благодаря этому обеспечивается удобство редактирования контента интернет-магазина на лету без привлечения программиста или менеджера проекта.
Сайт работает на актуальном и рекомендуемом создателями CMS 1С-Битрикс программном обеспечении с подходящими характеристиками сервера.
Проект постоянно получает штатные обновления движка, которые можно устанавливать без опасения потерять внесенные изменения.
Интернет-магазин прошел проверку «Монитор качества» Битрикс и успешно сдан.
Некоторые данные публичной части сайта были вынесены в специально разработанный модуль настроек сайта, в котором администратор сайта быстро и просто меняет нужные данные в определенных местах.
Были разработаны административные страницы:
На этапе разработки сайта была внедрена многоязычность.
Функция организована без дублирования инфоблоков и свойств.
Такой подход имеет два весомых преимущества:
Для проекта создан обработчик геолокации по определению местоположения пользователя, которое влияет на вывод контента на сайте.
Геолокация связывается со штатным функционалом установления местоположения CMS, что в свою очередь дает «из коробки» возможность гибко настраивать службы доставок, оплат и вывод свойств заказа под определенные регионы и не только.
Дополнительно на сайте реализован функционал выбора города вручную. Его автоматическое определение или принудительное указание важно для отображения товаров, акций, вариантов и служб доставки в зависимости от их наличия в населенном пункте.
Можно кликнуть на один из предложенных либо начать вводить название и выбрать нужный из выпадающего списка.
Сквозные блоки для всех страниц сайта.
Как и с прочими элементами шаблона, обеспечили их полную адаптивность.
Шапка содержит необходимый набор информации и возможностей для интернет-магазина: меню, поиск, корзину и избранное, вход в личный кабинет или данные об авторизованном пользователе, номер телефона и функционал заказа обратной связи, а также ссылку на страницу выбора магазина или склада самовывоза.
Реализовали нестандартный функционал для подменю главного меню.
Как правило, в 1С-Битрикс оно формируется динамически (автоматически выводятся подразделы). На проекте Blest сделали более гибкий вариант, позволяющий добавлять любые нужные ссылки. Для этого подменю задано информационным блоком, элементы которого выводятся в нужном разделе главного меню.
Главное меню на страницах для небольших устройств реализовано через классический «гамбургер». При нажатии выезжает фиксированный по высоте блок, где постоянно видны логотип и строка выбора города. В меню для смартфонов отображены все элементы, представленные в декстопной шапке.
В футере расположили блок с телефонами, изображение карты, при клике на которое пользователь переходит на страницу выбора магазина, нижнее меню (скрывающееся во вкладках на мобильной версии), форму подписки, иконки платежных систем и социальных сетей, а также подпись сайта.
Все элементы могут редактироваться администратором сайта или контент-менеджером из админки.
На главной странице выведены основные блоки, представляющие компанию и продукцию бренда Blest.
Верхний слайдер, преимущества, блок «Лучшие предложения» и текст полностью управляются из административной части.
Акции и новости выводятся из соответствующих разделов интернет-магазина. При этом акционные предложения соответствуют выбранному или указанному местоположению пользователя. Так, контент этого блока для Одессы может отличаться от Киева, Харькова и других городов.
Фиксированное меню «Каталог товаров» для десктопных устройств на мобайле сделан в форме слайдера иконок, соответствующих разделам.
Создали блок для вывода на главной странице избранных товаров: Популярные, Новинки, Скидки.
Управление показом товаров в табах Популярные и Новинки осуществляется со страниц редактирования карточек в административной части сайта. В Скидки автоматически попадают товары, цена которых снижена.
Реализовано большое количество стикеров, которые могут выводиться на товарах в этом блоке: Акция, % скидки, Подарок, Топ продаж и другие. Для массового управления плашками на карточках товаров создана специальная страница настроек в административной части. Можно фильтровать товарные позиции, работать с отдельными или всеми сразу элементами списка. Здесь же можно управлять записями, выводимыми в блоке «Лучшие предложения».
На этапе разработки этого блока настроены цепочки условий, при которых товар доступен для онлайн-покупки.
На каждой карточке товара в блоках с лучшими предложениями, похожими товарами, а также в списке позиций каталога и на странице результатов поиска вместо классического статичного изображения реализован слайдер. В него выводятся все загруженные для каждого товара картинки.
В каталоге предусмотрены традиционные инструменты для повышения удобства поиска подходящего товара:
Добавлен блок для запроса индивидуальной скидки.
На детальной странице товара вывели слайдер с изображениями товара и возможностью выбора цвета основного материала.
Для экономии места на сервере реализовали механизм перекрашивания изображения в выбранный цвет на лету через canvas. На сайт загружена обесцвеченная картинка.
При нажатии на значок цвета JavaScript в элементе <canvas> создает картинку по маске из загруженной, затем перекрашивает ее и соединяет с оригиналом, выдавая ссылку в base64.
Кнопки блока целевого действия зависят от наличия и потенциальной доступности выбранной позиции.
Для товаров в наличии предусмотрено два варианта заказа:
Для дисконтных товаров реализована возможность забронировать. Если продукция снята с производства организован вывод кнопки обратной связи. А для позиций, которые только планируется выпустить в продажу, посетитель видит кнопку предзаказа.
В табах выводится важнейшая информация о товаре:
На проекте внедрен отличный от штатного механизм отзывов посетителей с возможностью вложенных ответов и модерации.
На карточке реализована внутренняя перелинковка с другими товарами из той же линейки, похожими предложениями.
Корзина выполнена в форме удобной панели, которая появляется при клике на иконку в шапке либо при добавлении товара (по кнопке Купить на карточке товара). В ней отображаются добавленные товары с ценами и общей суммой заказа.
Форма оформления заказа реализована на одной странице. В нее добавлен блок с товарами в корзине, полями для ввода кода на скидку и дополнительной важной информации.
Процесс оформления состоит из 3 шагов:
На странице блога добавлена сортировка статей и возможность выбора интересующей категории.
На странице статей блога (информационный блок) планировалась возможность вставки нескольких слайдеров картинок и файлов видео. Штатными функциями 1С-Битрикс реализовать такой вывод публикации невозможно. Наши разработчики добавили обработку специальных тегов, добавляемых в нужные места текста. Инструмент при формировании страницы заменяет такие ключевые слова соответствующими компонентами. Конкретные выводимые элементы указываются при редактировании статей непосредственно в административной части сайта.
На страницах новостей внедрена возможность расшаривания материалов сайта без сторонних сервисов-скриптов.
По аналогии с блогом создана и страница списка акций с сортировками по популярности и дате начала. В акциях указываются даты начала и окончания действия, а также город, в котором она актуальна. Эти параметры определяют вывод конкретных элементов инфоблока в соответствующих блоках на сайте.
На странице можно выбрать нужный магазин или отделение Blest на Google-карте.
Для быстрого и удобного поиска нужного предложен фильтр по стране и городу.
В подробном списке отображаются актуальные для выбранного населенного пункта точки с адресами, телефонами и временем работы.
Также есть возможность отфильтровать магазины по наличию изделий из конкретных линеек продукции Blest.
В ходе работы над проектом уделили внимание оптимизации скорости загрузки сайта:
По техническому заданию от оптимизаторов выполнили комплекс работ по технической SEO-оптимизации, выводу необходимой информации в коде страницы и формированию данных под поставленные задачи.
Кроме этого, в рамках проекта создано ряд контентных страниц с полезной информацией для посетителя, страницы линеек продукции Blest, дисконтных товаров.
На сайте внедрена авторизация/регистрация пользователей через социальную сеть Facebook и через Google-аккаунт.
Разработчики произвели частичный импорт товарных позиций со старого сайта клиента. С предыдущего проекта спарсили изображения товаров, чтобы упростить работу контент-менеджерам. Собрали и структуру старого сайта для простановки переадресаций на новые URL.
Мы уложились в весьма сжатые сроки, установленные клиентом на разработку масштабного интернет-магазина с уникальным дизайном. И 7 октября 2020 года запустили рабочий сайт.
На разработку интернет-магазина ушло почти 6 месяцев. Весь предусмотренный функционал работает, как задумывалось.
Мы продолжаем сотрудничество с клиентом и далее, совершенствуем проект и расширяем его возможности.
Мы благодарны команде веб-агентства Красный хамелеон за профессиональный подход и качественную реализацию проекта.
Перед агентством стояла довольно сложная задача – поднять новый интернет-магазин с уникальным дизайном. И важно было уложиться в минимально возможные сроки.
В результате сотрудничества с веб-студией мы получили сайт именно таким, которым его представляли при заказе разработки. Программисты сделали шаблоны страниц под разные устройства по макетам дизайнера и обеспечили проект всеми необходимыми функциями.
Хотим отдельно отметить взаимодействие с менеджером. Благодаря глубокому погружению в проект мы получили не только надежного представителя наших интересов в команде веб-студии, но и опытного помощника.
Мы продолжаем взаимодействие с Красным хамелеоном и рады, что нашли по-настоящему надежного бизнес-партнера.