Интернет-магазин Natural History
- Клиент
- Клиент студии · NDA
- Тип проекта
- Laravel / Интеграции
- Период разработки
- 2023–2024
- Доступ
- NDA
- Сайт
- Загрузка…
О проекте
В 2023–2024 годах разработал интернет-магазин редких минералов, окаменелостей, метеоритов и изделий из камня для клиента студии. Выполнил pixel-perfect вёрстку по готовому дизайну и интеграцию с Laravel. Проект участвовал в рейтинге Awwwards. В портфолио представлен под изменённым названием Natural History в рамках NDA.
Что было сделано
- Pixel-perfect вёрстка по предоставленному дизайну и мобильная адаптация
- Интеграция интернет-магазина с Laravel
- Личный кабинет, избранное, подписки на товары и бронирование
- Интеграция оплаты Stripe
- Административный кабинет: товары, статьи и информация на сайте
- Обработка форм обратной связи и передача заявок в CRM
Задача
Разработать интернет-магазин минералов, окаменелостей, метеоритов и изделий из камня для клиента студии. Готовый дизайн требовалось перенести в адаптивную pixel-perfect вёрстку, затем интегрировать её с Laravel и реализовать функциональность магазина.
Ограничения NDA
Проект выполнен в 2023–2024 годах. Название изменено на Natural History. В демонстрации заменены фирменные обозначения, фотографии и контакты. Исходный код серверной части, административный кабинет и данные заказчика не публикуются.
Моя роль в проекте
Я отвечал за вёрстку по предоставленному дизайну и последующую разработку интернет-магазина на Laravel: личный кабинет покупателя, избранное, подписки на товары, бронирование и интеграцию оплаты Stripe.
На стороне управления сайтом разработал административный кабинет для заполнения товаров, статей и информации на страницах. Также реализовал обработку форм обратной связи и передачу обращений в CRM. Дизайн был подготовлен студией.
Концепция магазина
Сайт объединял визуальную подачу редких экспонатов и функции интернет-магазина. Посетитель знакомился с коллекцией, выбирал интересующие позиции и переходил к действиям с товаром через каталог и личный кабинет.
Разработку разделил на два этапа: точная реализация готовых макетов и подключение интерфейса к данным и логике магазина на Laravel.
Pixel-perfect вёрстка
Перенёс типографику, размеры, отступы и расположение элементов из макетов в страницы сайта. Подготовил главную, каталог, карточки товаров и информационные разделы, адаптировал их для мобильных устройств.
Интеграция с Laravel
Связал готовую вёрстку с товарами и контентом магазина. Разработал пользовательскую и административную части, подключил оплату Stripe и обработку обращений с сайта.
Сценарий для покупателя
1. Выбор экспоната
Посетитель открывает раздел коллекции и переходит в карточку интересующего товара. Фотографии и описание помогают ознакомиться с экземпляром перед покупкой.
2. Избранное и подписка
Заинтересовавшие позиции можно сохранить в избранном и вернуться к ним в личном кабинете. Для выбранного товара также предусмотрена возможность подписаться на него.
3. Бронирование и оплата
Покупатель может забронировать выбранный товар. Для оплаты в интернет-магазине подключён Stripe. Эти действия связаны с товарами и пользовательской частью проекта.
Управление контентом и заявки
Административный кабинет позволял команде заказчика самостоятельно заполнять и обновлять товары, публиковать статьи и менять информацию на сайте. Содержимое выводилось через подготовленные шаблоны, сохраняя оформление предоставленного дизайна.
Формы обратной связи связал с CRM: обращение обрабатывалось на стороне сайта и передавалось в систему для дальнейшей работы с клиентом. Управление каталогом, публикациями и заявками стало частью общей реализации магазина.
Что показывает демонстрация
В портфолио доступна отдельная версия внешнего интерфейса: главная страница, каталог, карточки товаров, информационные разделы и анимации. Первый экран этой версии показан в конце статьи.
Демонстрация подготовлена с заменёнными материалами для публикации в рамках NDA. Платежи, отправка заявок и закрытые кабинеты в неё не включены.
Посмотреть сайтРезультат
Реализовал адаптивную вёрстку по готовому дизайну и интегрировал её в интернет-магазин на Laravel. Покупатели получили личный кабинет и возможности для работы с выбранными товарами, команда заказчика, инструменты управления ассортиментом и содержимым сайта.
Проект создавался как конкурсная работа для клиента студии и участвовал в рейтинге Awwwards. Моя часть проекта охватывала frontend-разработку, back-end и интеграции со Stripe и CRM.
