Интернет-магазин крепежа и инструмента Hardwick на 1с-битрикс

Предыстория

Компания Заказчика занимается производством и дистрибуцией крепежных элементов и инструментов. Основной его клиент – это средние и крупные производства.

Изначально сайт Заказчика имел чисто брендовую, представительскую задачу, но со временем у него появилась необходимость перевести ресурс в плоскость e-commerce.

Что хотел клиент

• Разработать сайт с каталогом;
• Разработать наглядную таблицу запчастей инструмента;
• Разработать динамический чертеж товара, позволяющий покупать нужную запчасть в два клика.

Этапы решения

Часть 1. Подготовка спецификации и редизайн:

На первом этапе мы обсудили с клиентом основные задачи и подготовили спецификацию.

После этого мы провели редизайн основных контентных страниц на базе 1С Битрикс: Управление сайтом.

Часть 2. Каталог сайта:

После этого мы приступили к работе с каталогом.

У Заказчика использовалась нетиповая 1С, для которой не было стандартного модуля обмена. Поэтому для экономии бюджета и снижения сроков релиза было принято решение отказаться от интеграции с 1С, загрузив каталог стандартным экспортом из .csv 1С Битрикс.

На сайте клиента предполагалось 3 основных ветки каталога:

• Инструмент;
• Ремкомплекты и аксессуары;
• Запчасти.

Первые 2 ветки каталога не предполагали большого объема номенклатуры. Поэтому для них было решено использовать классическую механику торгового каталога с карточками товара и умным фильтром.

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

Настроив классический каталог мы перешли к реализации таблицы и карты запчастей.

Часть 3. Карта и таблица запчастей:

В основу карты запчастей легли чертежи инструмента в .svg-формате.

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

1. Разработан блок для загрузки подготовленной .svg-карты;
2. Разработан блок для привязки к карте запчастей из каталога сайта;
3. Реализована и адаптирована к мобильным устройствам визуальная часть карты;
4. Реализована механика добавления товара из всплывающего блока в стандартную корзину сайта.

В итоге на вкладке «Запчасти» в карточке товара начал отображаться чертеж, отображающий при клике основную информацию:

• Название запчасти;
• Артикул;
• Стоимость;
• Количество запчастей для покупки;
• Кнопку «В корзину».

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

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

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

Итог

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