Как мы создавали интернет-магазин Столичной ювелирной фабрики

Цель – создать продающий сайт на CMS Bitrix с уникальным дизайном, ориентированным на ювелирную продукцию, с широким функционалом и синхронизацией с индивидуализированной версией 1С.

Проект был сдан в 2017 году. Больше мы его не поддерживали и не дорабатывали. Сейчас сайт может выглядеть и работать иначе.

Точка старта

Началом активного подключения электронной коммерции Столичной Ювелирной Фабрикой можно считать площадку на prom.ua. Со временем пришло решение создать интернет-магазин с нуля. Он должен был отличаться от шаблонного полной индивидуализацией, соответствием бренду и продаваемым товарам.

Но первая попытка сделать сайт затянулась и окончилась безрезультатно. Поэтому в «Красный хамелеон» ребята из Столичной Ювелирной Фабрики пришли с уже начатым проектом. Это обусловило особенность круга задач, с которыми должны были справиться наши разработчики.

Поставленные задачи

• Доработка дизайна
• Тестирование работы шаблона и уже созданного функционала
• Доработка отсутствующих и некорректно работающих функций
• Организация удобной структуры и детализированных фильтров
• Обеспечение удобного и интуитивно понятного вывода товаров
• Проработка формы заказа, функциональности корзины и личного кабинета

Всего расширенное техническое задание включало более 170 задач, которые наши разработчики должны были реализовать.

Как мы создавали ювелирный интернет-магазина: Что было сделано

Дизайн

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

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

При выводе позиций на страницах каталога организованы флажки: «Хит», «Новинка», «Акция -ххх грн», процент скидки. Предусмотрена возможность добавления и редактирования элементов через админку.

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

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

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

Вывод товара

Страница вывода товара создана с учетом пользовательского опыта. Предусмотрены:

• изображения товара;
• визуальный блок с характеристиками изделия;
• до 4 кнопок для покупки позиции («Купить», «Плати позже», «Купить в кредит» и «Купить в 1 клик») или добавления в «Избранное»;
• доступ к информации о доставке и оплате, а также возможность получить консультацию;
• визуальный блок преимуществ покупки в интернет-магазине Столичной Ювелирной Фабрики;
• вкладки с описанием, подробными характеристиками и отзывами;
• блок с просмотренными товарами.

На страницах товаров добавлен удобный функционал комплектов. Разработчики взяли за основу стандартный модуль для «1С: Битрикс» и доработали его функционал и внешний вид под проект. Блок отображается с позициями, которые входят в соответствующий комплект.

Комплект формируется товароведом на стороне 1С и выгружается из базы в HighLoad-блоки, после чего создаются комплекты Битрикс. В каждую подборку может входить до 4 товаров.

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

Поиск и фильтры

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

• товары по релевантности (от 100% соответствия запросу и ниже);
• статьи.

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

Личный кабинет

Проработан функционал персональной области интернет-магазина. Здесь пользователь может:

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

Заказ товара

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

Настроено отображение заказов в личном кабинете, передача в админку, экспорт.

Предусмотрена возможность быстрого заказа – «Купить в 1 клик». При нажатии на кнопку появляется попап-форма, в которой пользователю вместо оформления заказа предлагается просто ввести имя и номер телефона.

Разработан дизайн писем-оповещений об оформлении заказа на сайте.

SEO

• Добавлены META-теги в шаблон и возможность их редактирования в административной панели.
• Организован вывод SEO-текста на страницах.
• Добавлены цели в Google Analytics.
• Установлены канонические адреса страниц.
• В ссылках на служебные страницы установлен rel=«nofollow», а для материалов, которые не должны индексироваться в шапку, добавлен noindex.
• Настроены редиректы с www.
• Создана эффективная 404-страница.
• Проработана пагинация.

Для продвижения сайта в поиске по низкочастотным запросам внедрен умный SEO-фильтр из модуля «Сотбит». Под каждый фильтр предусмотрена своя индексируемая посадочная страница.

Вызовы

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

Выводы

Для разработчиков «Красного хамелеона» нормальная практика – брать сложные проекты и качественно их реализовывать.

В итоге мы реализовали то, что компания не могла получить в течение довольно долгого времени, – создали крутой современный сайт с уникальным и 100% адаптивным дизайном. Интернет-магазин https://stolychnashop.com.ua/ua/ полностью соответствует требованиям и виденью заказчиков, а главное – максимально комфортно обеспечивает потребности посетителей и постоянных клиентов.