|
1. Предыстория. 2. Что хотел клиент 3. Часть 1. Подготовка спецификации и редизайн 4. Часть 2. Каталог сайта 5. Часть 3. Карта и таблица запчастей 6. Итог |
Предыстория
Компания Заказчика занимается производством и дистрибуцией крепежных элементов и инструментов. Основной его клиент – это средние и крупные производства.
Изначально сайт Заказчика имел чисто брендовую, представительскую задачу, но со временем у него появилась необходимость перевести ресурс в плоскость e-commerce.
Что хотел клиент
- Разработать сайт с каталогом;
- Разработать наглядную таблицу запчастей инструмента;
- Разработать динамический чертеж товара, позволяющий покупать нужную запчасть в два клика.
У Вас похожий проект или аналогичные задачи?
Давайте обсудим
Этапы решения
Часть 1. Подготовка спецификации и редизайн:
На первом этапе мы обсудили с клиентом основные задачи и подготовили спецификацию.
После этого мы провели редизайн основных контентных страниц на базе 1С Битрикс: Управление сайтом.
Часть 2. Каталог сайта:
После этого мы приступили к работе с каталогом.
У Заказчика использовалась нетиповая 1С, для которой не было стандартного модуля обмена. Поэтому для экономии бюджета и снижения сроков релиза было принято решение отказаться от интеграции с 1С, загрузив каталог стандартным экспортом из .csv 1С Битрикс.
На сайте клиента предполагалось 3 основных ветки каталога:
- Инструмент;
- Ремкомплекты и аксессуары;
- Запчасти.
Первые 2 ветки каталога не предполагали большого объема номенклатуры. Поэтому для них было решено использовать классическую механику торгового каталога с карточками товара и умным фильтром.
Ветка Запчастей предполагала большой объем однотипной номенклатуры. Для того, чтобы пользователю было проще работать с подбором запчастей, было принято решение отказаться от классического каталога и использовать таблицы и карты (на основании чертежей) запчастей, размещаемых прямо на странице инструмента.
Настроив классический каталог мы перешли к реализации таблицы и карты запчастей.
Часть 3. Карта и таблица запчастей:
В основу карты запчастей легли чертежи инструмента в .svg-формате.
Наши специалисты разработали механику разметки исходного файла для выделения активных элементов. После этого началась разработка со стороны сайта:
- Разработан блок для загрузки подготовленной .svg-карты;
- Разработан блок для привязки к карте запчастей из каталога сайта;
- Реализована и адаптирована к мобильным устройствам визуальная часть карты;
- Реализована механика добавления товара из всплывающего блока в стандартную корзину сайта.
В итоге на вкладке «Запчасти» в карточке товара начал отображаться чертеж, отображающий при клике основную информацию:
- Название запчасти;
- Артикул;
- Стоимость;
- Количество запчастей для покупки;
- Кнопку «В корзину».
Для удобства работы запчасти было решено дублировать таблицей.
Для более гибкого управления контентом таблица была сделана независимой от карты чертежа - данные элементы можно использовать как вместе, так и по отдельности.
После разработки и тестирования получилась крайне простая в управлении система. Контент менеджеру достаточно было указать у запчасти корректное название инструмента, после этого система автоматически находила все нужные взаимосвязи и строила таблицу.
Итог
В результате работы получился удобный и функциональный сайт, позволяющий быстро найти как инструмент, так и необходимые для него запчасти и аксессуары.
