Интернет-магазин электротоваров с их импортом через API
Интернет-магазины — одно из важных и масштабных направлений деятельности нашей компании. Мы занимаемся их разработкой, запуском, продвижением и администрированием. И хотя за годы работы у нас выработались четкие алгоритмы разработки, мы всегда рады нестандартным задачам от клиента. Сегодня тот самый случай.
К нам обратился клиент со следующей задачей: разработать удобный интернет-магазин электротоваров, каталог которого будет регулярно обновляться по API из каталога поставщика. API — программный интерфейс, выступающий в роли посредника: он позволяет сервисам взаимодействовать, получая доступ и обмениваясь данными.
Давайте посмотрим, что получилось снаружи и как это всё работает изнутри.
Дизайн
Сайт встречает нас стильным и функциональным дизайном. Сдержанные тона, акционные баннеры, рекомендуемые товары с качественными фото — каждый из элементов способствует скорейшему переходу посетителя к предлагаемой продукции.
Страница с товаром предоставляет максимум информации: начиная фотографиями с описанием, заканчивая подробными техническими характеристиками и прикреплёнными инструкциями в pdf-формате. В какой бы части страницы вы не находились, вы всегда можете сразу же оформить заказ благодаря зафиксированному справа блоку с краткой информацией, ценой и кнопкой покупки.
Навигация
Так как общее количество позиций в магазине достигает 15 тысяч, необходимо помочь покупателю найти нужный ему товар. Для этого был разработан удобный многоуровневый каталог. Перейти в него можно из шапки сайта или бокового «гамбургер-меню». Так как некоторые категории насчитывают более 1000 товаров, они дополнительно разбиты на подкатегории. Каждая из них сопровождается счётчиком количества товаров внутри и наглядной фотографией.
Отдельно стоит отметить страницы брендов, которые помогают помогают найти продукцию конкретного производителя. Помимо логотипа и описания бренда здесь располагается перечень всех имеющихся товаров с удобной фильтрацией по группе товаров.
Поиск
Если посетитель ищет что-то конкретное — он может воспользоваться поиском, расположенным в шапке рядом с логотипом. Поиск работает по AJAX: без перезагрузки страницы он выводит запрашиваемые товары вместе с изображениями и ценами. Посетитель может сразу перейти к нужному товару, без лишнего экрана с перечнем результатов.
Можно даже не вводить руками название нужного товара, а просто нажать на микрофон в поле ввода и произнести — через пару секунд все доступные варианты отобразятся удобным списком.
Во время тестирования работы поиска мы выявили, что ресурсов хостинга недостаточно. Из-за нехватки оперативной памяти результаты загружались слишком долго, а иногда и вовсе отсутствовали. Наши программисты оптимизировали этот процесс, добившись быстрой и эффективной работы сайта в текущем серверном окружении.
Импорт товаров через API
Магазин RPЭЛЕКТРО предлагает своим покупателям широкий ассортимент электротехнической продукции. Однако предлагаемые товары не были заведены в 1С и не содержались в excel-файле. Как уже упоминалось ранее, особенность этого случая в том, что весь ассортимент заказчику необходимо было импортировать с сайта поставщика с помощью API.
Поэтому мы написали скрипт, выполняющий эту задачу: обращаясь к API поставщика, он забирает информацию о товаре и корректно импортирует её на сайт. Скрипт забирает максимальное количество данных: название, артикул, описание, технические характеристики, фотографии, цены, актуальные остатки… Также на сайт полностью переносится структура каталога поставщика.
Помимо первоначальной выгрузки в дальнейшем этот скрипт использовался для регулярного обновления каталога. В процессе разработки пришлось учесть множество деталей. Например, для оптимизации производительности скрипт не импортирует сразу всю базу данных из 15 000 товаров, а работает по расписанию отдельными итерациями, не приводя к зависанию.
Определения местоположения и мультирегиональность
Так как у компании имеются три филиала в разных городах, мы сделали сайт мультирегиональным. Во время первого посещения у пользователя автоматически определяется местоположение и определяется какой из филиалов магазина ближайший к нему. Для каждого из вариантов были созданы отдельные поддомены.
Визуально и функционально различий между ними нет, разница лишь в наполнении:
- контакты и адреса подменяются на актуальные;
- товары с актуальным наличием для конкретного региона;
- персонализированный расчёт и конфигурация доставки.
Также немаловажен тот факт, что поддомены для отдельных городов положительно влияют продвижение каждого из региональных сайтов. Внедрённая мультирегиональность позволяет делать отдельные шаблоны метатегов для каждого региона. Вместе с подменой контента это открывает широкие возможности для продвижения сайта в локальной выдаче Google и Яндекс.
Адаптивность
В лучших традициях разработки в Webnauts каждый сайт прекрасно смотрится как на ноутбуках, так и на планшетах и телефонах. Все блоки сайта автоматически перестраиваются для удобства изучения и покупки товаров.
Итог
Нам удалось решить все поставленные задачи и даже более. Был разработан функциональный интернет-магазин с ёмким каталогом товаров, который обновляется автоматически и не требует постоянного администрирования. С помощью удобной структуры или быстрого поиска клиент может найти нужный товар, увидеть актуальные данные о его наличии в ближайшем из филиалов и оплатить любым удобным способом: наличными или через Яндекс.Кассу. Посмотреть на результат и прикупить что-то для себя можете здесь — https://rpelektro.ru/.
