Web-агентство Red Chameleon
+38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
Заказать обратный звонок
О нас
  • Отзывы
  • Партнеры
  • Наши клиенты
  • Вакансии
Портфолио
Создание сайтов
  • Создание интернет-магазина
  • Разработка интернет-магазина на PrestaShop
  • Разработка сайтов на Laravel
  • Создание сайта на Wordpress
  • Разработка сайтов на YII2
  • Разработка сайтов на Symfony
Поддержка сайта
  • Доработка сайта
Контакты
Блог
Ещё
    +38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
    • О нас
      • Назад
      • Отзывы
        • Партнеры
          • Наши клиенты
            • Вакансии
            • Портфолио
            • Создание сайтов
              • Назад
              • Создание интернет-магазина
                • Разработка интернет-магазина на PrestaShop
                  • Разработка сайтов на Laravel
                    • Создание сайта на Wordpress
                      • Разработка сайтов на YII2
                        • Разработка сайтов на Symfony
                        • Поддержка сайта
                          • Назад
                          • Доработка сайта
                          • Контакты
                          • Блог
                          • Веб-студия
                          • Проекты
                          • Разработка интернет-магазина мебели Blest

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

                          https://blest.ua/ – масштабный проект по разработке интернет-магазина мебели на 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 месяцев. Весь предусмотренный функционал работает, как задумывалось.

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


                          Отзыв клиента
                          Отзыв Р. Степановского
                          Отзыв Р. Степановского
                          Директор департамента маркетинга и продаж

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

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

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

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

                          Мы продолжаем взаимодействие с Красным хамелеоном и рады, что нашли по-настоящему надежного бизнес-партнера.

                          otzyv Blest

                          Давайте обсудим ваш проект
                          Оставьте заявку, и мы свяжемся с вами

                          Сайт защищен reCAPTCHA, используются
                          Политика конфиденциальности и Условия пользования Google.

                          О веб-студии
                          Портфолио
                          Вакансии
                          Контакты
                          Блог
                          Создание сайтов
                          Разработка сайтов на Laravel
                          Разработка сайтов на Symfony
                          Разработка сайтов на YII2
                          Создание сайта на WordPress
                          Разработка интернет-магазинов
                          Создание интернет-магазина на Prestashop
                          Разработка b2b-сайтов и порталов
                          Разработка личного кабинета
                          Поддержка сайтов
                          Доработка сайтов
                          Перенос сайтов с Битрикс на другую платформу
                          Синхронизация с ERP-системами

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


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