Разработка интернет-магазина мебели Blest

Blest – масштабный проект по разработке интернет-магазина мебели на 1С-Битрикс с нуля.

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

Верстка

Дизайн интернет-магазина разрабатывался специально для Blest.ua. Клиент предоставил полный комплект макетов для верстки шаблона.

Наш frontend-разработчик верстал HTML-шаблоны в технике Pixel Perfect.

Pixel Perfect верстка – способ написания структуры HTML-кода, позволяющая готовому HTML-шаблону максимально соответствовать оригинальным PSD-макетам «пиксель в пиксель».

Для проекта были созданы шаблоны внушительного перечня страниц:

Тестировщики проверяли каждый HTML-шаблон на соответствие и полное совпадение с макетами дизайна.

Для обеспечения полной адаптивности сайта проводили тестирование на большом количестве разрешений экранов, устройств и браузеров:

Интеграция верстки и создание функционала

Соблюдение идеологии CMS

Проект разработан по всем канонам CMS 1С-Битрикс: построение шаблона, кастомизация шаблонов компонентов, использование API CMS для расширения нужного функционала в шаблонах компонентов.

На сайте поддерживается в полной мере технология «Эрмитаж». Благодаря этому обеспечивается удобство редактирования контента интернет-магазина на лету без привлечения программиста или менеджера проекта.

Сайт работает на актуальном и рекомендуемом создателями CMS 1С-Битрикс программном обеспечении с подходящими характеристиками сервера.

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

Интернет-магазин прошел проверку «Монитор качества» Битрикс и успешно сдан.

Удобство управления и настроек интернет-магазина

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

Были разработаны административные страницы:

• для быстрых действий по смене ряда опций для элементов товарного инфоблока;

• для импорта позиций из файла определенного формата.

Многоязычность

На этапе разработки интернет-магазина была внедрена многоязычность.

Функция организована без дублирования инфоблоков и свойств.

Такой подход имеет два весомых преимущества:

• не дает раздуваться базе данных веб-ресурса;

• исключает сложности содержания и контроля инфоблоков администратором сайта.

Выбор местоположения

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

Геолокация связывается со штатным функционалом установления местоположения CMS, что в свою очередь дает «из коробки» возможность гибко настраивать службы доставок, оплат и вывод свойств заказа под определенные регионы и не только.

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

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

Шапка и подвал

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

Как и с прочими элементами шаблона, обеспечили их полную адаптивность.

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

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

Как правило, в 1С-Битрикс оно формируется динамически (автоматически выводятся подразделы). На проекте Blest сделали более гибкий вариант, позволяющий добавлять любые нужные ссылки. Для этого подменю задано информационным блоком, элементы которого выводятся в нужном разделе главного меню.

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

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

Все элементы могут редактироваться администратором сайта или контент-менеджером из админки.

Главная

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

Верхний слайдер, преимущества, блок «Лучшие предложения» и текст полностью управляются из административной части.

Акции и новости выводятся из соответствующих разделов интернет-магазина. При этом акционные предложения соответствуют выбранному или указанному местоположению пользователя. Так, контент этого блока для Одессы может отличаться от Киева, Харькова и других городов.

Фиксированное меню «Каталог товаров» для десктопных устройств на мобайле сделан в форме слайдера иконок, соответствующих разделам.

Блок «Лучшие предложения»

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

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

Реализовано большое количество стикеров, которые могут выводиться на товарах в этом блоке: Акция, % скидки, Подарок, Топ продаж и другие. Для массового управления плашками на карточках товаров создана специальная страница настроек в административной части. Можно фильтровать товарные позиции, работать с отдельными или всеми сразу элементами списка. Здесь же можно управлять записями, выводимыми в блоке «Лучшие предложения».

На этапе разработки этого блока настроены цепочки условий, при которых товар доступен для онлайн-покупки.

Карточка товара в листинге и блоках

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

Каталог

В каталоге предусмотрены традиционные инструменты для повышения удобства поиска подходящего товара:

• фильтр по характеристикам (можно выбирать один или несколько параметров, по которым сформируется список индивидуально подобранных товаров);

• сортировки (выбраны наиболее используемые посетителями интернет-магазинов варианты: по популярности, возрастанию и снижению цены).

Добавлен блок для запроса индивидуальной скидки.

Карточка товара

На детальной странице товара вывели слайдер с изображениями товара и возможностью выбора цвета основного материала.

Для экономии места на сервере реализовали механизм перекрашивания изображения в выбранный цвет на лету через canvas. На сайт загружена обесцвеченная картинка.

При нажатии на значок цвета JavaScript в элементе <canvas> создает картинку по маске из загруженной, затем перекрашивает ее и соединяет с оригиналом, выдавая ссылку в base64.

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

Для товаров в наличии предусмотрено два варианта заказа:

• через корзину;

• в 1 клик (отправка номера телефона для обратной связи с менеджером и оформления заказа по звонку).

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

В табах выводится важнейшая информация о товаре:

• описание;

• характеристики;

• оплата и доставка;

• гарантия;

• отзывы с возможностью добавить свой.

На проекте внедрен отличный от штатного механизм отзывов посетителей с возможностью вложенных ответов и модерации.

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

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

Корзина выполнена в форме удобной панели, которая появляется при клике на иконку в шапке либо при добавлении товара (по кнопке Купить на карточке товара). В ней отображаются добавленные товары с ценами и общей суммой заказа.

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

Процесс оформления состоит из 3 шагов:

• внесение данных о клиенте (постоянный покупатель может авторизоваться и выбрать нужный профиль);

• выбор способа и адреса доставки (предусмотрено 6 вариантов: самовывоз из шоурума, службы «Новая почта», «Укрпочта», Justin, курьеры Blest и «Новой почты»);

• выбор способа оплаты (наличными, онлайн, по счету, кредит и «Оплата частями»).

Блог и акции

На странице блога добавлена сортировка статей и возможность выбора интересующей категории.

На странице статей блога (информационный блок) планировалась возможность вставки нескольких слайдеров картинок и файлов видео. Штатными функциями 1С-Битрикс реализовать такой вывод публикации невозможно. Наши разработчики добавили обработку специальных тегов, добавляемых в нужные места текста. Инструмент при формировании страницы заменяет такие ключевые слова соответствующими компонентами. Конкретные выводимые элементы указываются при редактировании статей непосредственно в административной части сайта.

На страницах новостей внедрена возможность расшаривания материалов сайта без сторонних сервисов-скриптов.

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

Магазины

На странице можно выбрать нужный магазин или отделение Blest на Google-карте. 

Для быстрого и удобного поиска нужного предложен фильтр по стране и городу.

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

Также есть возможность отфильтровать магазины по наличию изделий из конкретных линеек продукции Blest.

Ускорение сайта

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

• обеспечили вывод изображений в облегченном для веб формате WEBP, если браузер посетителя поддерживает формат изображений;

• оптимизировали HTML-структуру: убрали неиспользуемые и редко используемые формы и блоки, засорявшие код страницы, они вызываются только в нужный момент и в нужном месте для посетителя;

• внедрили отложенную загрузку сторонних JS-скриптов;

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

SEO и прочие работы по интернет-магазину

По техническому заданию от оптимизаторов выполнили комплекс работ по технической SEO-оптимизации, выводу необходимой информации в коде страницы и формированию данных под поставленные задачи.

Кроме этого, в рамках проекта создано ряд контентных страниц с полезной информацией для посетителя, страницы линеек продукции Blest, дисконтных товаров.

На сайте внедрена авторизация/регистрация пользователей через социальную сеть Facebook и через Google-аккаунт.

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

Результат

Мы уложились в весьма сжатые сроки, установленные клиентом на разработку масштабного интернет-магазина с уникальным дизайном. И 7 октября 2020 года запустили рабочий сайт.

На разработку интернет-магазина ушло почти 6 месяцев. Весь предусмотренный функционал работает, как задумывалось.

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