-
Notifications
You must be signed in to change notification settings - Fork 0
Frontend
Цей документ описує структуру, дизайн і функціональність веб-застосунку для інтернет-магазину.
Використані технології
- HTML
- CSS
- JS
- HTMX
Сторінка входу слугує точкою входу для користувачів для отримання безпечного доступу до їхніх індивідуальних облікових записів у веб-застосунку інтернет-магазину. З огляду на те, що платформа може містити конфіденційні дані користувачів, такі як особиста інформація, історія замовлень та способи оплати, безпечний та інтуїтивно зрозумілий процес входу має важливе значення. Ця сторінка дозволяє користувачам вводити свої облікові дані, підтверджувати свою особу та отримувати доступ до своїх персоналізованих інформаційних панелей, де вони можуть виконувати різні завдання, такі як перегляд продуктів, розміщення замовлень та відстеження відправлень.
Коли користувач вперше переходить на сторінку входу, він бачить форму, яка містить наступні поля:
- Поле адреси електронної пошти: Поле для введення адреси електронної пошти користувача.
- Поле "Пароль": Поле для введення пароля користувача.
Обидва поля є обов'язковими і включають перевірку HTML5 на стороні клієнта:
- Email: У полі для введення адреси електронної пошти використовується HTML-атрибут type="email", щоб переконатися, що користувач вводить коректний формат адреси електронної пошти.
- Пароль: Поле для введення пароля має тип type="password", щоб приховати символи при введенні.
- Бібліотека HTMX перехоплює подію відправлення форми і робить асинхронний HTTP POST запит до бекенду Django за адресою /api/signin/.
- HTMX гарантує, що відправлення форми не призводить до повного перезавантаження сторінки, покращуючи користувацький досвід.
- Сервер перевірить облікові дані. Якщо вони невірні, повертається відповідь у форматі JSON зі статусом "помилка". HTMX відреагує на це, відобразивши повідомлення про помилку на формі.
- Якщо облікові дані правильні, сервер створить новий сеанс користувача і поверне статус "успіх" у відповіді JSON.
- Після успішного входу в систему, HTMX ініціює перенаправлення на стороні клієнта на інформаційну панель користувача або на попередньо відвідану сторінку, якщо це можливо.
Якщо сервер повертає помилку або якщо відправка форми не вдається з будь-якої причини, повідомлення про помилку буде відображено на самій формі, інформуючи користувача про те, що пішло не так. Це також буде оброблятися асинхронно за допомогою HTMX, щоб забезпечити безперебійну роботу користувача.
HTML-сторінка для функції входу розділена на кілька розділів, включаючи заголовок, форму і нижній колонтитул. Елементи мають ідентифікатори та класи, які відповідають атрибутам CSS та HTML.
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Sign In</title>
<link rel="stylesheet" href="css/signin.css">
</head>
<body>
<div id="signin-container">
<form hx-post="/api/signin/" hx-swap="outerHTML">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Sign In">
</form>
</div>
</body>
</html>
HTMX використовується для асинхронної обробки відправлення форми. Коли форма відправляється, HTTP POST-запит надсилається на кінцеву точку /api/signin/ без необхідності повного перезавантаження сторінки. Це покращує взаємодію з користувачем.
Приклад:
<form hx-post="/api/signin/" hx-swap="outerHTML">
<!-- form content -->
</form>
Стилістика міститься в окремому CSS-файлі.
Приклад:
#signin-container {
width: 300px;
margin: auto;
}
label, input {
display: block;
margin-bottom: 10px;
}
Сторінка реєстрації відіграє важливу роль у залученні нових користувачів до веб-застосунку інтернет-магазину. З огляду на те, що електронна комерція є дуже персоналізованою, кожен користувач потребує окремого облікового запису для управління своїми замовленнями, перегляду рекомендацій щодо товарів, збереження обраних товарів та безпечної роботи з платіжними системами. Сторінка реєстрації призначена для того, щоб дозволити новим користувачам легко і безпечно створювати власні облікові записи, створюючи основу для персоналізованого шопінгу.
Коли користувач вперше заходить на сторінку реєстрації, він бачить просту, не перевантажену форму, що складається з наступних полів для введення даних:
- Поле адреси електронної пошти: Слугує унікальним ідентифікатором для кожного користувача.
- Поле "Пароль": Для встановлення надійного пароля для облікового запису.
- Поле "Підтвердити пароль": Для підтвердження правильності введеного пароля.
- Перевірка електронної пошти: Адреса електронної пошти є обов'язковою і повинна відповідати стандартному формату електронної пошти ([email protected]). Використовується атрибут HTML5 type="email" для перевірки на стороні клієнта.
- Перевірка пароля: Поле пароля також є обов'язковим. Воно встановлюється як type="password", щоб введені символи були приховані, забезпечуючи базовий рівень безпеки.
- Підтвердити перевірку пароля: Це поле має збігатися з початковим полем пароля, щоб переконатися, що користувач не зробив помилки при введенні пароля. З метою безпеки воно також встановлюється як type="password".
Коли користувач натискає кнопку "Зареєструватися" після заповнення форми HTMX перехоплює цю подію і надсилає асинхронний HTTP POST запит до бекенду Django за адресою /api/register/. HTMX гарантує, що відправка форми обробляється без перезавантаження сторінки, забезпечуючи тим самим безперебійну роботу користувача.
- Внутрішній сервіс перевіряє електронну пошту та паролі. Якщо будь-яке з полів є недійсним, повертається відповідь у форматі JSON зі статусом "помилка".
- Перевірка на дублювання. Бекенд перевірить, чи адреса вже зареєстрована. Якщо це так, буде повернуто повідомлення про помилку.
- Якщо перевірка пройшла успішно і дублікатів не знайдено, буде створено новий обліковий запис користувача. Відповідь у форматі JSON зі статусом "success" буде надіслано назад на фронт-енд.
- Після успішної реєстрації HTMX на стороні клієнта перенаправляє користувача на сторінку "Дякуємо за реєстрацію" та безпосередньо на його нову панель користувача.
Помилки на стороні сервера: Якщо серверна валідація не пройшла успішно або імейл вже зареєстровано, повідомлення про помилку буде відображено безпосередньо у формі без перезавантаження сторінки, завдяки HTMX. Помилки на стороні клієнта: Якщо валідація на стороні клієнта не пройшла успішно (наприклад, неправильний формат електронної пошти або не збігаються паролі), форма відобразить попереджувальне повідомлення без відправки даних на сервер.
HTML-сторінка для функції входу розділена на кілька розділів, включаючи заголовок, форму і нижній колонтитул. Елементи мають ідентифікатори та класи, які відповідають атрибутам CSS та HTML. Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" href="css/registration.css">
</head>
<body>
<div id="registration-container">
<form hx-post="/api/register/" hx-swap="outerHTML">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="passwordConfirm">Confirm Password:</label>
<input type="password" id="passwordConfirm" name="passwordConfirm" required>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
HTMX використовується для асинхронної обробки відправлення форми. Коли форма відправляється, HTTP POST-запит надсилається на кінцеву точку /api/register/ без необхідності повного перезавантаження сторінки. Це покращує взаємодію з користувачем. Приклад:
<form hx-post="/api/register/" hx-swap="outerHTML">
<!-- form content -->
</form>
Стилістика міститься в окремому CSS-файлі. Приклад:
#registration-container {
width: 300px;
margin: auto;
}
label, input {
display: block;
margin-bottom: 10px;
}
Ця документація містить вичерпний посібник з розробки інтерфейсу домашньої сторінки для веб-застосунку інтернет-магазину. Головна сторінка - це зона, з якої користувачі починають свою подорож до магазину. Ця сторінка містить кілька віджетів, включаючи "Товари на розпродажі", "Популярні товари" і "Рекомендовані товари", а також маркетинговий банер у верхній частині. Ми використовуємо HTMX для асинхронних фронтенд-функцій та Python Django для внутрішньої логіки.
Головна сторінка слугує початковою платформою, з якої користувач починає свою подорож до інтернет-магазину. Головна сторінка має на меті залучити користувачів, представляючи їм різноманітні варіанти продуктів, що відповідають їхнім потребам та інтересам, заохочуючи їх до подальшого вивчення та здійснення покупок. Це важливо як для залучення, так і для збільшення продажів.
Коли користувач вперше потрапляє на головну сторінку, основні елементи, які повинні завантажитися, це:
- Маркетинговий банер: Візуально привабливий банер, що відображає рекламні акції, анонси або популярні продукти.
- Віджети: До них відносяться розділи "Товари на розпродажі", "Популярні товари" та "Рекомендовані товари". Кожен розділ повинен відображати колекцію реальних товарів з цінами та кнопками "Купити".
Коли користувач потрапляє на головну сторінку, HTMX асинхронно отримує дані для кожного віджета з відповідних кінцевих точок API. Це забезпечує швидке завантаження сторінки та покращує користувацький досвід, пришвидшуючи початкове завантаження сторінки.
Маркетинговий банер Маркетинговий банер служить для наступних цілей:
- Реклама: Відображення поточних розпродажів, акцій або подій.
- Залучення користувачів: Заохочення користувачів до вивчення товарів або нових надходжень.
Товари на розпродажі Цей віджет приваблює користувачів, пропонуючи товари зі знижкою. Цей розділ можна оновлювати вручну або отримувати з автоматично оновлюваної таблиці бази даних товарів на розпродажі.
Популярні товари Відображає список товарів, які наразі в тренді на основі реальних даних. Популярність може бути визначена на основі продажів, переглядів або комбінації факторів.
Рекомендовані товари для вас Надає персоналізовані пропозиції. Цей розділ з'являється, тільки якщо користувач увійшов в систему. Розділ працює на основі персоналізованого алгоритму: Рекомендації генеруються на основі поведінки користувача, його минулих покупок та інших даних.
Кожен віджет повинен мати:
- Зображення товару: Чітке зображення товару з високою роздільною здатністю.
- Назва продукту: Назва товару.
- Ціна: Поточна ціна товару.
- Кнопка "Купити": Зрозуміла та доступна кнопка для додавання товару до кошика.
Однією з найважливіших функціональних можливостей на головній сторінці є функція пошуку, стратегічно розташована у верхній частині сторінки для максимальної видимості та доступності. Ця функція складається з поля для введення тексту, яке дозволяє користувачам швидко шукати продукти в різних категоріях. Коли користувачі починають вводити текст, HTMX використовується для асинхронних запитів до внутрішнього API Python Django, отримуючи релевантні результати пошуку в режимі реального часу. Ці результати можуть з'являтися у випадаючому списку безпосередньо під полем пошуку або відображатися як частина більш повної сторінки результатів пошуку. Функція пошуку покращує взаємодію з користувачем, забезпечуючи ефективний, плавний і швидкий спосіб пошуку конкретних товарів без необхідності переходити через кілька сторінок або категорій. Вона має на меті зробити процес покупок більш цілеспрямованим і персоналізованим, тим самим заохочуючи користувачів здійснювати покупки.
Кожна кнопка "Купити" оснащена HTMX атрибутами, які при натисканні будуть:
- Надіслати асинхронний POST-запит на кінцеву точку /api/add_to_cart/.
- Отримає відповідь у форматі JSON від сервера.
- Оновить іконку кошика або кількість кошиків на головній сторінці, щоб відобразити новий товар, і все це без перезавантаження сторінки.
- Успіх: Коли товар успішно додано до кошика, невелике сповіщення або зміна іконки кошика має підтвердити цю дію.
- Помилка: Якщо операція не вдалася (наприклад, через проблеми з мережею або помилки сервера), користувачеві має з'явитися повідомлення з проханням повторити спробу.
Головна сторінка містить кілька основних блоків:
- Пошук: поле вводу пошуку, яке автоматично шукатиме товари щойно користувач почав вводити символи.
- Маркетинговий банер: Для реклами поточних акцій або оголошень.
- Віджет товарів на розпродажі: Показує товари, на які в даний момент діє знижка.
- Віджет популярних товарів: Показує товари, які наразі є популярними.
- Віджет "Рекомендовані товари для вас": Для надання персоналізованих рекомендацій, якщо користувач увійшов в систему.
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<!-- Search Feature -->
<div id="search-container">
<input type="text" id="product-search" placeholder="Search products..." hx-get="/api/search/" hx-trigger="keyup delayed:300ms">
</div>
<!-- Marketing Banner -->
<div id="marketing-banner">
<!-- Marketing banner content -->
</div>
<!-- Items on Sale Widget -->
<div id="items-on-sale" hx-include="/api/items_on_sale/">
<!-- Items on sale will be populated here -->
</div>
<!-- Popular Items Widget -->
<div id="popular-items" hx-include="/api/popular_items/">
<!-- Popular items will be populated here -->
</div>
<!-- Recommended Items for You Widget -->
<div id="recommended-items" hx-include="/api/recommended_items/">
<!-- Recommended items will be populated here -->
</div>
</body>
</html>
HTMX відіграє центральну роль у покращенні користувацького досвіду, дозволяючи виконувати асинхронні операції на головній сторінці. Ось як це працює для різних функціональних можливостей:
- Завантаження віджетів: Для кожного з віджетів продуктів, таких як "Товари на розпродажі", "Популярні товари" та "Рекомендовані товари для вас", ми використовуємо атрибут hx-include в HTMX. Цей атрибут вказує кінцеву точку API Django, з якої потрібно отримати вміст віджету. Коли завантажується головна сторінка, HTMX автоматично отримує ці дані асинхронно, заповнюючи кожен віджет без необхідності повного перезавантаження сторінки. Наприклад, для віджета "Товари на продаж" це виглядає наступним чином
<div id="items-on-sale" hx-include="/api/items_on_sale/">. - Додати в кошик: Кожна кнопка містить атрибути hx-post та hx-swap. Коли користувач натискає кнопку "Купити", робиться асинхронний POST-запит до кінцевої точки /api/add_to_cart/ Django, який додає елемент до кошика. Атрибут hx-swap дозволяє поміняти місцями новий лічильник кошика або іконку на сторінці без повного перезавантаження.
- Функція пошуку: Коли користувач починає вводити текст, HTMX запускає асинхронні GET-запити до кінцевої точки пошукового API Django. API повертає список відповідних елементів, які можна динамічно відображати у випадаючому списку або в окремій області результатів пошуку. Ми можемо використовувати атрибут hx-trigger в HTMX, щоб вказати, що це повинно відбуватися щоразу, коли користувач вводить новий символ або після короткої затримки відбиття, наприклад, так:
<input type="text" hx-get="/api/search/" hx-trigger="keyup delayed:300ms">.
Стилістика міститься в окремому CSS-файлі. Приклад:
#marketing-banner {
/* Styles for marketing banner */
}
#items-on-sale, #popular-items, #recommended-items {
/* Styles for widgets */
}