Сайт для интернет-магазина PROинструмент
Компания «PROинструмент» занимается оптово-розничными продажами инструментов, оснастки, строительного оборудования и аксессуаров к нему. Каталог товаров насчитывает тысячи позиций от отечественных и зарубежных производителей.
Нашей задачей была разработка функционального интернет-магазина с удобной навигацией, с адаптацией для просмотра с различных устройств.
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-home-desktop.webp)
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-home-mobile.webp)
Кроме того, было необходимо организовать синхронизацию интернет-магазина с учетной системой 1С заказчика:
- разработать систему каталога для интернет-магазина, оптимизированную под задачи SEO и позволяющую без труда найти нужный товар;
- добавлять на сайт новые категории товаров из 1С;
- обновлять данные по категориям, если они изменились в 1С;
- добавлять на сайт новые товары из 1С;
- обновлять данные по товарам, если они изменились в 1С (наименование, описание, цены, остатки, характеристики товара);
- разработать инструменты для оперативного выявления на сайте товаров, у которых заполнены не все данные.
Дизайн
Наш штатный дизайнер разработал стиль сайта, в котором используются фирменные цвета компании: черный, оранжевый и белый.
Для привлечения внимания разместили в баннерной зоне главной страницы анимацию работающей ручной циркулярной пилы.
При разработке баннеров для баннерной зоны также старались использовать фирменные цвета компании.
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-home_banner_1.webp)
На главной странице разместили блоки с презентациями товаров из выбранных категорий в виде слайдеров.
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-categories_present.webp)
Меню каталога товаров
Каталог товаров всегда доступен посетителю сайта. Кнопка раскрытия каталога находится в шапке сайта, которая фиксируется вверху экрана при прокрутке страницы. А на смартфонах дополнительно размещена нижняя панель для доступа к важным элементам интернет-магазина.
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-catalog-desktop.webp)
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-catalog-mobile.webp)
Поиск и отбор товаров в каталоге интернет-магазина
Поле для поиска товаров также размещено в зафиксированной вверху экрана шапке сайта и всегда доступно посетителю. Подбор результатов поиска начинается после ввода 3 символов. В результаты поиска выводятся категории и товары, подходящие под условие поиска.
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-search_result.webp)
А для отбора товаров по характеристикам и(или) цене на странице категории товаров есть фильтр товаров. Можно отсортировать товары по названию, по возрастанию или убыванию цены.
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-category-desktop.webp)
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-category-mobile.webp)
Индивидуальные списки посетителя
Любой посетитель сайта может сформировать собственные списки товаров. Данные об отобранных товарах хранит браузер посетителя. Эти данные хранятся месяц, что позволяет вернуться к этим спискам позже, при следующем посещении.
Товары в избранном
Это просто список товаров. Любой товар можно добавить в этот список, кликнув на соответствующем значке рядом с изображением товара.
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-wishlist-desktop.webp)
Сравнение товаров
На странице сравнения выбранных товаров отображаются оформленные таблицей характеристики товаров. Сам список товаров с характеристиками выполнен в виде слайдера, который подстраивается под ширину экрана на разных устройствах. Он фиксируется вверху страницы, чтобы было удобно просматривать и сравнивать большой список характеристик. Список характеристик можно прокручивать вверх-вниз.
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-product-compare-desktop.webp)
Личный кабинет
Посетитель сайта может зарегистрироваться и получить доступ к личному кабинету. Зарегистрироваться можно как физическое или юридическое лицо. Это учитывается при обработке заказа отделом продаж.
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-registration.webp)
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-account-desktop.webp)
![](https://rus-technologia.ru/wp-content/uploads/2024/04/portfolio-proinstrument-account-mobile.webp)
В итоге получился интернет-магазин с удобным интерфейсом, который будет понятен любому клиенту. Его дизайн не отягощен излишними элементами и позволяет легко найти и заказать нужный товар.