В течение 6 дней мы создали клон NORDSTROM
Привет,
Меня зовут Пратик, добро пожаловать в мой первый блог, и я проведу вас через 6-дневное путешествие, в котором мы клонировали веб-сайт Nordstrom. Nordstrom, Inc. — американская сеть универмагов класса люкс. Основанная в 1901 году Джоном У. Нордстремом и Карлом Ф. Валлином, она возникла как обувной магазин и превратилась в розничную торговлю полным ассортиментом с отделами одежды, обуви, сумок, ювелирных изделий, аксессуаров, косметики и парфюмерии. По сути, это веб-сайт электронной коммерции.
В настоящее время я изучаю полноценную веб-разработку в Школе Масаи, и в рамках программы недели строительства я вместе с членами моей команды должен был клонировать Nordstrom.com. с использованием HTML, CSS, ванильного JavaScript и манипулирования DOM. Этот блог посвящен нашему путешествию и проблемам, с которыми мы столкнулись при создании проекта.
За созданием этого проекта стояли:
Сначала мы все просмотрели реальный веб-сайт, чтобы понять весь процесс и отметить все важные функции, которые должны были быть реализованы. Ниже приведены 4 основные части веб-сайта:
- Целевая страница.
- Страницы входа и регистрации.
- Список различных продуктов, страницы отдельных продуктов и корзина для покупок.
- Страницы оформления заказа.
После первоначального сканирования веб-сайта и определения различных его частей мы решили разделить вышеперечисленные задачи между всеми четырьмя из нас. Первые два дня были немного сложными, так как мы все клонировали какой-либо веб-сайт в первый раз. Однако нам удалось преодолеть всевозможные выбоины на нашем пути. Когда мы все закончили с отдельными назначенными задачами, мы начали объединять все страницы, и поток был задан. С этого момента мы начали работать над мельчайшими деталями на каждой странице, чтобы сделать ее более аутентичной и удобной для пользователя. Мы определили различные возможности входа/регистрации, правильно структурировали их и поработали над всеми лазейками.
Описание Проекта:
Индивидуальные обязанности:
- Akhil: страницы входа и регистрации
- Pratik: целевые страницы и страницы оформления заказа
- Nikhil: страница сведений о продукте
- Вайшнави: страницы списка продуктов и корзины для покупок
Языки и концепции, которые мы использовали:
- HTML, CSS, ванильный JavaScript
- Манипуляции с DOM
- Хранение данных и выборка данных из локального хранилища
- Модальные окна CSS и z-индекс
Наш репозиторий на GitHub:нажмите здесь
Демонстрация проекта в реальном времени:нажмите здесь
Снимки клонированного веб-сайта:
- Страницы регистрации и входа
Страница регистрации
Страница входа
Макет и функциональность страниц входа и регистрации были реализованы компанией Akhil. Как только пользователь создает учетную запись на странице регистрации, он добавляется в нашу базу данных пользователей в локальном хранилище. Затем они перенаправляются на страницу входа для входа на веб-сайт.
После входа в систему данные пользователя — имя, адрес электронной почты, пароль — сохраняются в локальном хранилище, на которое ссылаются на веб-сайте, чтобы сделать доступными или заблокировать определенные функции.
2. Целевая страница с выпадающей панелью навигации
Целевая страница
Макет и дополнительные функции на целевой странице были реализованы мной. Важной частью этой страницы является панель навигации вверху, на которой отображаются все категории продуктов, ввод для поиска, кнопка учетной записи пользователя и значок корзины.
На панели навигации при наведении курсора на определенную категорию товаров отображается выпадающий раздел со всеми подкатегориями. Пользователь может щелкнуть любого, чтобы просмотреть список продуктов в этой категории.
3. Страница со списком продуктов
Страница со списком продуктов
Вайшнави создал макет и реализовал функциональность на этой странице. Здесь у пользователя есть два варианта сузить свой выбор — сортировка и фильтрация. Выбор сортировки в верхней правой части страницы позволяет сортировать и упорядочивать товары по возрастанию цены или по убыванию цены. Фильтры в левой части страницы можно использовать для выбора конкретных брендов, цветов и типов продуктов.
Модальный список продуктов
Пользователь может нажать на название продукта, чтобы открыть страницу сведений об этом продукте. Если они наводят курсор на какой-либо продукт, отображается кнопка «Быстрый просмотр». При нажатии на нее на экране появляется модальное окно, в котором отображается краткое описание продукта и кнопка «Добавить в корзину», которую пользователь может использовать для непосредственного добавления продукта в свою корзину.
4. Страница сведений о продукте
Страница сведений о продукте
Нихил создал и внедрил функциональные возможности этой страницы. Здесь пользователь может увидеть описание продукта и доступные цветовые варианты. Если они хотят купить продукт, они могут ввести количество в поле количества, а затем нажать кнопку «Добавить в корзину».
Сведения о продукте Модальный
При нажатии кнопки «Добавить в корзину» открывается модальное окно, предоставляющее пользователю возможность посетить страницу «Корзина» или перейти непосредственно к оформлению заказа.
5. Страница корзины для покупок
Страница корзины
Вайшнави реализовал и эту страницу. Здесь будут перечислены все товары, добавленные в корзину. Пользователь может внести изменения в количество каждого продукта или даже удалить продукт из пакета, если пожелает. Если сумка пуста, кнопка оформления заказа не отображается. Кроме того, если пользователь добавил товары в корзину, но не авторизовался на сайте, при нажатии кнопки оформления заказа он перенаправляется на страницу входа. После входа/регистрации продукты, которые они добавили в корзину, становятся доступными для оформления заказа.
6. Страница оформления заказа
Страница оформления заказа
Я реализовал весь раздел оформления заказа. Здесь пользователь может заполнить свой адрес, контактные данные и выбрать способ доставки. Стоимость доставки меняется для разных способов. Пользователь может видеть обновленную цену доставки по своему выбору. После нажатия «Продолжить» пользователь попадет на страницу сведений о карте только в том случае, если он ввел все необходимые данные в адресной строке. На странице оплаты пользователю предлагается ввести данные своей кредитной/дебетовой карты.
Модальная страница оформления заказа
При нажатии на кнопку «Разместить заказ» отобразится модальное окно с созданным идентификатором заказа. Закрытие модального окна перенаправит пользователя на целевую страницу.
Вывод
Мы хотели бы поблагодарить Школу Масаи за предоставленную нам прекрасную платформу для демонстрации наших талантов в веб-дизайне, я лично благодарю всех членов моей команды Ахил Камсала, Nikhil CN и Vaishnavi Kawthankar за их полную поддержку и вклад в создание этого замечательного проекта.
Надеюсь, вам понравилась наша работа. Спасибо, что прочитали с большим терпением. На этом я ухожу. Берегите себя, будьте в безопасности и да будет свет.
