Web-агентство Red Chameleon
Разработка и поддержка eCommerce-проектов
095 520-30-05, 096 520-30-05 viber-logo telegram-logo whatsapp-logo hello@redchameleon.com.ua

gold-partner
Заказать звонок
О нас
  • Отзывы
  • Документы
  • Партнеры
  • Наши клиенты
  • Вакансии
  • Вопрос ответ
Портфолио
Создание сайтов
  • Создание интернет-магазина
  • Разработка интернет-магазина на Битрикс
  • Создание сайтов на Битрикс
  • Разработка сайтов на Laravel
Поддержка сайта
  • Доработка сайта
  • Поддержка Битрикс
  • Доработка сайта на Битрикс
  • Интеграция сайта с 1С
Готовые интернет-магазины
  • Готовые сайты
Лицензии Битрикс
  • Битрикс24 CRM
Контакты
Блог
Ещё
    095 520-30-05, 096 520-30-05
    • О нас
      • Назад
      • О нас
      • Отзывы
      • Документы
      • Партнеры
      • Наши клиенты
      • Вакансии
      • Вопрос ответ
    • Портфолио
    • Создание сайтов
      • Назад
      • Создание сайтов
      • Создание интернет-магазина
      • Разработка интернет-магазина на Битрикс
      • Создание сайтов на Битрикс
      • Разработка сайтов на Laravel
    • Поддержка сайта
      • Назад
      • Поддержка сайта
      • Доработка сайта
      • Поддержка Битрикс
      • Доработка сайта на Битрикс
      • Интеграция сайта с 1С
    • Готовые интернет-магазины
      • Назад
      • Готовые интернет-магазины
      • Готовые сайты
    • Лицензии Битрикс
      • Назад
      • Лицензии Битрикс
      • Битрикс24 CRM
    • Контакты
    • Блог
    • 095 520-30-05
      • Назад
      • Обратная связь
      • 095 520-30-05
      • 096 520-30-05
      • Заказать звонок
    Будьте на связи
    Украина, 02094, г. Киев, ул. Беломорская, д. 1А
    hello@redchameleon.com.ua
    • Facebook
    • Telegram
    • Веб-студия
    • Проекты
    • Разработка интернет-магазина мебели Blest

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

    • Blest-case
    Сайт
    https://blest.ua/
    Дата
    26.11.2020
    Заказать проект
    Задать вопрос
    Наши специалисты ответят на любой интересующий вопрос по проекту

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

    Blest-case

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

    Кейс Разработка интернет-магазина мебели – пример ТЗ

    Верстка

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

    Кейс Разработка интернет-магазина. Макеты индивидуального дизайна

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

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

    Кейс Разработка интернет-магазина на Битрикс. Верстка Pixel Perfect

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

    • главная;

    • страница линеек;

    • листинг (список) товаров;

    • Акции;

    • Дисконт;

    • листинг и записи блога;

    • результаты поиска;

    • карточка товаров;

    • корзина и оформление заказа;

    • личный кабинет;

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

    • Магазины и контакты;

    • О нас;

    • Дизайнерам и партнерам;

    • Гарантии;

    • конфигуратор мебели.

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

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

    Экраны:

    • 320px
    • 375px
    • 768px
    • 1024px
    • 1440px
    • 1368px
    • 1920px

    Браузеры:

    • Chrome
    • FireFox
    • Opera
    • Safari (Mac\iOS)
    • Edge

    Операционные системы:

    • Windows
    • macOS
    • Android
    • iOS

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

    Соблюдение идеологии 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-скриптов;

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

    Кейс. Ускорение сайта интернет-магазина по PageSpeed/

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

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

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

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

    Кейс. Разработка интернет-магазина. Как сделать авторизацию на сайте

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

    Результат

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

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

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


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

    Услуги
    Разработка интернет-магазина на Битрикс
    Разработка интернет-магазина на Битрикс
    Разработка сайтов на Laravel
    Разработка сайтов на Laravel
    Поддержка сайта на Битрикс
    Поддержка сайта на Битрикс
    Интеграция сайта с 1С
    Интеграция сайта с 1С

    Следующий проект Назад к списку
    Купить Битрикс
    Купить Битрикс24
    Разработка сайтов
    Сайты на Битрикс
    Разработка интернет-магазинов
    Интернет-магазины на Битрикс
    Разработка сайтов на Laravel
    Поддержка сайтов
    Поддержка Битрикс
    Доработка сайтов
    Доработка Битрикс
    Оптимизация скорости
    Аудит производительности и безопасности сайта
    Синхронизация с 1С
    Перенос сайта на Битрикс с Wordpress, Joomla и других CMS
    Перенос сайтов на Битрикс на другой хостинг или домен

    Карта сайта
    Оплата и расчеты
    Гарантии
    Наши контакты


    +38 (095) 520-30-05
    +38 (096) 520-30-05
    hello@redchameleon.com.ua
    Украина, 02094, г. Киев, ул. Беломорская, д. 1А
    • Facebook
    • Telegram
    • Viber
    WEB-агентство Красный Хамелеон
    WEB-агентство Красный Хамелеон. Разработка интернет-магазинов на Битрикс
    в Украине: Киев, Харьков, Одесса, Днепр, Львов. 2013-2021
    © Все права защищены.
    gold-partner