Для интернет-магазина электроники E-Store был разработан современный и функциональный сайт, который сочетает в себе элегантный дизайн, удобную навигацию, высокую производительность и безопасное хранение данных покупателей. Структура сайта включает:
- Главная (домашняя) страница.
- Категории товаров.
- Все товары.
- Корзина.
- Детали заказа.
- Админпанель.
Дизайн оформлен в чистой и ненагруженной бело-голубой цветовой палитре, что делает сайт приятным для восприятия и акцентирует внимание пользователей на самих товарах и брендах.
Техническая сторона проекта:
- Бэкенд разработан на мощном PHP-фреймворке Laravel, обеспечивающем надежность и безопасность.
- Фронтенд создан с использованием Filament (админпанель) и Livewire (динамичные компоненты контента).
- Флеш-сообщения реализованы с помощью библиотек SweetAlert и PHPFlasher для удобного уведомления пользователей.
- Стилизация выполнена на базе CSS-фреймворка Tailwind, что позволяет добиться гибкости и адаптивности интерфейса.
- База данных – MySQL, обеспечивающая стабильное хранение и быструю обработку данных.
Домашняя страница
Главная (домашняя) страница сайта разработана так, чтобы с первого взгляда привлекать внимание пользователей и помогать им быстро ориентироваться в ассортименте. Визуальный акцент сделан в верхней части страницы - здесь размещена яркая, эффектная фотография, сопровождаемая броским призывом к действию, который мотивирует посетителей к изучению товаров и совершению покупок. После главного баннера представлены бренды известных производителей. Также на домашней странице расположены категории товаров с интуитивно понятной навигацией. Такая структура делает главную страницу информативной, удобной и визуально привлекательной.
Категории товаров
На этой странице представлен полный ассортимент категорий товаров, доступных в интернет-магазине. Все категории четко структурированы, что позволяет быстро найти нужные товары. Здесь реализован интуитивный интерфейс – оформление страницы позволяет легко ориентироваться даже новым посетителям. Таким, образом, раздел помогает покупателям быстро и удобно находить нужные товары, обеспечивая комфортный процесс выбора и покупки.
Страница с товарами
Страница разработана таким образом, чтобы пользователи могли легко находить нужные товары с помощью удобных фильтров и гибкой системы сортировки. Фильтрация реализована по следующим параметрам: категории, бренды, статус товара (отображение товаров, находящихся в наличии), цена. Также посетители доступна сортировка товаров по двум направлениям: 1) по умолчанию товары сортируются от новых к старым, 2) по цене в порядке возрастания стоимости. Благодаря этим возможностям поиск нужного товара становится интуитивно понятным и удобным, а процесс покупок – быстрым и комфортным.
Карточки товаров
Каждая карточка товара оснащена удобной кнопкой Add to Cart (Добавить в корзину), позволяющей быстро оформить выбранные позиции. При клике на кнопку товар сразу отправляется в корзину, а в навбаре происходит её автоматическое обновление и динамически отображается актуальное количество товаров.
Страница товара
При клике на карточку товара пользователь попадает на индивидуальную страницу товара, где представлена вся необходимая информация для принятия решения о покупке. В подробном описании указаны характеристики, стоимость товара. Реализовано гибкое управление количеством товара – покупатель может выбрать нужное количество единиц перед добавлением в корзину. Для оценки качества и внешнего вида товара создана галерея с его фотографиями.
Корзина
Страница корзины разработана так, чтобы пользователи могли легко просматривать, редактировать и подтверждать свой заказ. Все товары представлены в виде информативной таблицы, включающей фотографии, количество выбранных позиций, цену за единицу и общую стоимость. Покупатель может изменять количество товаров или удалять ненужные позиции в один клик. На странице предусмотрен блок проверки заказа – специальная секция, позволяющая перед оформлением проверить итоговую сумму и убедиться в правильности выбора.
Проверка заказа
Перед покупкой пользователь имеет возможность проверить всю информацию о заказе, убедиться в корректности данных и выбрать удобный способ оплаты. Если неавторизованный пользователь захочет проверить заказ, то при нажатии на кнопку Checkout (Проверить) система автоматически его перенаправляет на страницу входа или регистрации. Для авторизованных пользователей – открывается форма оформления заказа, где необходимо ввести контактные данные и выбрать способ оплаты.
Информация о заказе
После успешного подтверждения заказа пользователь попадает на страницу с информацией о заказе, где отображаются все основные данные о покупке. Есть следующие варианты дальнейших действий: Go back shopping (Вернуться к покупкам) и View My Orders (Посмотреть мои заказы) – открыть страницу со всеми оформленными заказами, где можно отследить их статус и уточнить детали.
Просмотр заказов
Пользователь доступна страница, на которой он может посмотреть список всех своих заказов. Для просмотра подробной информации нужно кликнуть на кнопку View Details (Посмотреть детали). После чего откроется страница с полным описанием заказа. Эта страница позволяет пользователям удобно отслеживать свои покупки и всегда иметь доступ ко всей необходимой информации.
Админпанель
Для удобного управления интернет-магазином разработана админпанель, доступная по адресу: https://eshop.prx.by/admin . Функционал админпанели включает возможность редактировать, добавлять и удалять товары, бренды, категории, пользователей, заказы. В настоящее время полный доступ к функциям админпанели имеет только администратор.
