Fross

Разработка сайта доставки замороженных продуктов Fross

Что сделали

UI Design, UX Design,

Frontend, Backend

hero
Задача

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

О компании

Специализируетcя на оптово-розничной торговле замороженных продуктов: фрукты, овощи, ягоды, пюре, полезные натуральные продукты.

Клиент

Fross

Отрасль

Оптово-розничная торговля

Год запуска

2022

Ключевая идея

Максимально технологичный и воздушный сайт, отражающий лидерство компании в своей отрасли.

Каталог

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

catalog pic
Подборка похожих товаров повышает глубину просмотра
страниц и среднюю продолжительность сеанса
— что положительно влияет на SEO сайта.
phone
Корзина

По клику на иконку корзины появляется предпросмотр товаров.
Можно удалить или изменить их количество.

cart
Вели фотосессию для сайта: придумали единую стилистику фотографий и прописали техническое задание для фотографа.
pause-glyph
Заказы по пути домой

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

mobile
mobile
mobile
mobile
mobile

Реализовали удобное и понятное взаимодействие с адаптивной версией сайта. Вам покажется, что делаете заказ в приложении.

Например, перелистывать слайдер с товарами покупатель может привычным свайпом.

mobile
mobile

Карточки товаров в версии для смартфонов сделали более компактными, но они по прежнему информативны и содержат всё, что нужно для успешного оформления заказа.

mobile
Товары не потеряются даже без авторизации

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

Так же сохраняются введенные данные на странице оформления заказа, что позволяет не тратить лишние время на повторные действия.

storage storage
Скорость разработки

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

speed
Развитие сайта в будущем

Предусмотрели на сайте возможности расширения функционала: сейчас можно платить наличными при получении, при желании можно внедрить онлайн оплату.

Проблемы, с которыми столкнулись и успешно решили
Проблема
Решение
Неочевидный момент при работе с 1С. Оказалось, что если товар в корзине (которая для удаления) то при выгрузке 1С «ругается», что такой товар уже есть.
Настроили систему так, чтобы любые изменения о товаре сразу же выгружались на сайт, что предотвратит возможность покупки товара, которого нет в наличии.
Возможность заказа товаров одновременно в онлайн и офлайн с грамотным обменом остатками.
Переехали с обычного хостинга на VPS и произвели его настройку.
Актуальность данных в корзине, т.к. она хранится на клиенте.
Реализовали проверку корзины при переходе между страницами. Сверяются с бэком количество товаров в корзине и все их свойства.
Высокое требование в ресурсах хостинга у плагина woocomerce.
API отвечающее за обмен заказами между Frontend и Backend.
Реализовано
Настройка остатков

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

remnants
Применяется Docker

Он позволяет производить эмуляцию среды, в которой будет работать сайт. Большинство разработчиков используют Windows. А при разработке – какой-либо эмулятор сервера. После переноса могут быть ситуации, когда код работает не так, как ожидалось, т.к. локальная среда сильно отличалась от среды сервера. В Docker мы настраиваем весьма приближенную версию окружения. Также Docker позволяет быстрее развернуть проект для нового разработчика.

Синхронизация с 1С

Заказчик работает с товарами и заполняет информацию о них в более удобной для него среде, где происходит первичное изменение данных (произошел завоз товаров, эта информация сначала обновляется в 1С, а к нам приходит автоматически. Соответственно пользователи сразу могут заказывать появившиеся товары).

remnants
Технологии
Vue3 Pinia PHP7.4 MySQL WordPress Кастомная тема для WP Docker CI/CD Api (Custom) Woocommerce
Начать проект