Skip to content

Frontend

Jump to bottom
a.perevoznyi edited this page Sep 21, 2023 · 10 revisions

Цей документ описує структуру, дизайн і функціональність веб-застосунку для інтернет-магазину.

Використані технології

  • HTML
  • CSS
  • JS
  • HTMX

Сторінка авторизації

Призначення

Сторінка входу слугує точкою входу для користувачів для отримання безпечного доступу до їхніх індивідуальних облікових записів у веб-застосунку інтернет-магазину. З огляду на те, що платформа може містити конфіденційні дані користувачів, такі як особиста інформація, історія замовлень та способи оплати, безпечний та інтуїтивно зрозумілий процес входу має важливе значення. Ця сторінка дозволяє користувачам вводити свої облікові дані, підтверджувати свою особу та отримувати доступ до своїх персоналізованих інформаційних панелей, де вони можуть виконувати різні завдання, такі як перегляд продуктів, розміщення замовлень та відстеження відправлень.

Опис функціоналу

Початкове завантаження сторінки

Коли користувач вперше переходить на сторінку входу, він бачить форму, яка містить наступні поля:

  • Поле адреси електронної пошти: Поле для введення адреси електронної пошти користувача.
  • Поле "Пароль": Поле для введення пароля користувача.

Перевірка форми

Обидва поля є обов'язковими і включають перевірку HTML5 на стороні клієнта:

  • Email: У полі для введення адреси електронної пошти використовується HTML-атрибут type="email", щоб переконатися, що користувач вводить коректний формат адреси електронної пошти.
  • Пароль: Поле для введення пароля має тип type="password", щоб приховати символи при введенні.

Асинхронне відправлення форми

  • Бібліотека HTMX перехоплює подію відправлення форми і робить асинхронний HTTP POST запит до бекенду Django за адресою /api/signin/.
  • HTMX гарантує, що відправлення форми не призводить до повного перезавантаження сторінки, покращуючи користувацький досвід.

Обробка відповіді сервера

  1. Сервер перевірить облікові дані. Якщо вони невірні, повертається відповідь у форматі JSON зі статусом "помилка". HTMX відреагує на це, відобразивши повідомлення про помилку на формі.
  2. Якщо облікові дані правильні, сервер створить новий сеанс користувача і поверне статус "успіх" у відповіді JSON.
  3. Після успішного входу в систему, HTMX ініціює перенаправлення на стороні клієнта на інформаційну панель користувача або на попередньо відвідану сторінку, якщо це можливо.

Обробка помилок

Якщо сервер повертає помилку або якщо відправка форми не вдається з будь-якої причини, повідомлення про помилку буде відображено на самій формі, інформуючи користувача про те, що пішло не так. Це також буде оброблятися асинхронно за допомогою HTMX, щоб забезпечити безперебійну роботу користувача.

Технічні деталі імплементації

HTML структура

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

HTMX використовується для асинхронної обробки відправлення форми. Коли форма відправляється, HTTP POST-запит надсилається на кінцеву точку /api/signin/ без необхідності повного перезавантаження сторінки. Це покращує взаємодію з користувачем.

Приклад:

<form hx-post="/api/signin/" hx-swap="outerHTML">
  <!-- form content -->
</form>

Стилізація CSS

Стилістика міститься в окремому 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 гарантує, що відправка форми обробляється без перезавантаження сторінки, забезпечуючи тим самим безперебійну роботу користувача.

Обробка відповіді сервера

  1. Внутрішній сервіс перевіряє електронну пошту та паролі. Якщо будь-яке з полів є недійсним, повертається відповідь у форматі JSON зі статусом "помилка".
  2. Перевірка на дублювання. Бекенд перевірить, чи адреса вже зареєстрована. Якщо це так, буде повернуто повідомлення про помилку.
  3. Якщо перевірка пройшла успішно і дублікатів не знайдено, буде створено новий обліковий запис користувача. Відповідь у форматі JSON зі статусом "success" буде надіслано назад на фронт-енд.
  4. Після успішної реєстрації HTMX на стороні клієнта перенаправляє користувача на сторінку "Дякуємо за реєстрацію" та безпосередньо на його нову панель користувача.

Обробка помилок

Помилки на стороні сервера: Якщо серверна валідація не пройшла успішно або імейл вже зареєстровано, повідомлення про помилку буде відображено безпосередньо у формі без перезавантаження сторінки, завдяки HTMX. Помилки на стороні клієнта: Якщо валідація на стороні клієнта не пройшла успішно (наприклад, неправильний формат електронної пошти або не збігаються паролі), форма відобразить попереджувальне повідомлення без відправки даних на сервер.

Технічні деталі імплементації

HTML структура

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

HTMX використовується для асинхронної обробки відправлення форми. Коли форма відправляється, HTTP POST-запит надсилається на кінцеву точку /api/register/ без необхідності повного перезавантаження сторінки. Це покращує взаємодію з користувачем. Приклад:

<form hx-post="/api/register/" hx-swap="outerHTML">
  <!-- form content -->
</form>

Стилізація CSS

Стилістика міститься в окремому CSS-файлі. Приклад:

#registration-container {
  width: 300px;
  margin: auto;
}

label, input {
  display: block;
  margin-bottom: 10px;
}

Домашня (головна) сторінка

Ця документація містить вичерпний посібник з розробки інтерфейсу домашньої сторінки для веб-застосунку інтернет-магазину. Головна сторінка - це зона, з якої користувачі починають свою подорож до магазину. Ця сторінка містить кілька віджетів, включаючи "Товари на розпродажі", "Популярні товари" і "Рекомендовані товари", а також маркетинговий банер у верхній частині. Ми використовуємо HTMX для асинхронних фронтенд-функцій та Python Django для внутрішньої логіки.

Опис функціоналу

Головна сторінка слугує початковою платформою, з якої користувач починає свою подорож до інтернет-магазину. Головна сторінка має на меті залучити користувачів, представляючи їм різноманітні варіанти продуктів, що відповідають їхнім потребам та інтересам, заохочуючи їх до подальшого вивчення та здійснення покупок. Це важливо як для залучення, так і для збільшення продажів.

Початкове завантаження сторінки

Коли користувач вперше потрапляє на головну сторінку, основні елементи, які повинні завантажитися, це:

  • Маркетинговий банер: Візуально привабливий банер, що відображає рекламні акції, анонси або популярні продукти.
  • Віджети: До них відносяться розділи "Товари на розпродажі", "Популярні товари" та "Рекомендовані товари". Кожен розділ повинен відображати колекцію реальних товарів з цінами та кнопками "Купити".

Асинхронне завантаження контенту

Коли користувач потрапляє на головну сторінку, HTMX асинхронно отримує дані для кожного віджета з відповідних кінцевих точок API. Це забезпечує швидке завантаження сторінки та покращує користувацький досвід, пришвидшуючи початкове завантаження сторінки.

Віджети

Маркетинговий банер Маркетинговий банер служить для наступних цілей:

  1. Реклама: Відображення поточних розпродажів, акцій або подій.
  2. Залучення користувачів: Заохочення користувачів до вивчення товарів або нових надходжень.

Товари на розпродажі Цей віджет приваблює користувачів, пропонуючи товари зі знижкою. Цей розділ можна оновлювати вручну або отримувати з автоматично оновлюваної таблиці бази даних товарів на розпродажі.

Популярні товари Відображає список товарів, які наразі в тренді на основі реальних даних. Популярність може бути визначена на основі продажів, переглядів або комбінації факторів.

Рекомендовані товари для вас Надає персоналізовані пропозиції. Цей розділ з'являється, тільки якщо користувач увійшов в систему. Розділ працює на основі персоналізованого алгоритму: Рекомендації генеруються на основі поведінки користувача, його минулих покупок та інших даних.

Кожен віджет повинен мати:

  • Зображення товару: Чітке зображення товару з високою роздільною здатністю.
  • Назва продукту: Назва товару.
  • Ціна: Поточна ціна товару.
  • Кнопка "Купити": Зрозуміла та доступна кнопка для додавання товару до кошика.

Пошук товарів

Однією з найважливіших функціональних можливостей на головній сторінці є функція пошуку, стратегічно розташована у верхній частині сторінки для максимальної видимості та доступності. Ця функція складається з поля для введення тексту, яке дозволяє користувачам швидко шукати продукти в різних категоріях. Коли користувачі починають вводити текст, HTMX використовується для асинхронних запитів до внутрішнього API Python Django, отримуючи релевантні результати пошуку в режимі реального часу. Ці результати можуть з'являтися у випадаючому списку безпосередньо під полем пошуку або відображатися як частина більш повної сторінки результатів пошуку. Функція пошуку покращує взаємодію з користувачем, забезпечуючи ефективний, плавний і швидкий спосіб пошуку конкретних товарів без необхідності переходити через кілька сторінок або категорій. Вона має на меті зробити процес покупок більш цілеспрямованим і персоналізованим, тим самим заохочуючи користувачів здійснювати покупки.

Додати в кошик

Кожна кнопка "Купити" оснащена HTMX атрибутами, які при натисканні будуть:

  1. Надіслати асинхронний POST-запит на кінцеву точку /api/add_to_cart/.
  2. Отримає відповідь у форматі JSON від сервера.
  3. Оновить іконку кошика або кількість кошиків на головній сторінці, щоб відобразити новий товар, і все це без перезавантаження сторінки.

Обробка помилок

  • Успіх: Коли товар успішно додано до кошика, невелике сповіщення або зміна іконки кошика має підтвердити цю дію.
  • Помилка: Якщо операція не вдалася (наприклад, через проблеми з мережею або помилки сервера), користувачеві має з'явитися повідомлення з проханням повторити спробу.

Технічні деталі імплементації

HTML структура

Головна сторінка містить кілька основних блоків:

  1. Пошук: поле вводу пошуку, яке автоматично шукатиме товари щойно користувач почав вводити символи.
  2. Маркетинговий банер: Для реклами поточних акцій або оголошень.
  3. Віджет товарів на розпродажі: Показує товари, на які в даний момент діє знижка.
  4. Віджет популярних товарів: Показує товари, які наразі є популярними.
  5. Віджет "Рекомендовані товари для вас": Для надання персоналізованих рекомендацій, якщо користувач увійшов в систему.

Приклад:

<!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

HTMX відіграє центральну роль у покращенні користувацького досвіду, дозволяючи виконувати асинхронні операції на головній сторінці. Ось як це працює для різних функціональних можливостей:

  1. Завантаження віджетів: Для кожного з віджетів продуктів, таких як "Товари на розпродажі", "Популярні товари" та "Рекомендовані товари для вас", ми використовуємо атрибут hx-include в HTMX. Цей атрибут вказує кінцеву точку API Django, з якої потрібно отримати вміст віджету. Коли завантажується головна сторінка, HTMX автоматично отримує ці дані асинхронно, заповнюючи кожен віджет без необхідності повного перезавантаження сторінки. Наприклад, для віджета "Товари на продаж" це виглядає наступним чином <div id="items-on-sale" hx-include="/api/items_on_sale/">.
  2. Додати в кошик: Кожна кнопка містить атрибути hx-post та hx-swap. Коли користувач натискає кнопку "Купити", робиться асинхронний POST-запит до кінцевої точки /api/add_to_cart/ Django, який додає елемент до кошика. Атрибут hx-swap дозволяє поміняти місцями новий лічильник кошика або іконку на сторінці без повного перезавантаження.
  3. Функція пошуку: Коли користувач починає вводити текст, HTMX запускає асинхронні GET-запити до кінцевої точки пошукового API Django. API повертає список відповідних елементів, які можна динамічно відображати у випадаючому списку або в окремій області результатів пошуку. Ми можемо використовувати атрибут hx-trigger в HTMX, щоб вказати, що це повинно відбуватися щоразу, коли користувач вводить новий символ або після короткої затримки відбиття, наприклад, так: <input type="text" hx-get="/api/search/" hx-trigger="keyup delayed:300ms">.

Стилізація CSS

Стилістика міститься в окремому CSS-файлі. Приклад:

#marketing-banner {
  /* Styles for marketing banner */
}

#items-on-sale, #popular-items, #recommended-items {
  /* Styles for widgets */
}

Сторінка пошуку

Опис функціоналу

В інтернет-магазині з широким асортиментом товарів у різних категоріях пошук конкретного товару може стати складним завданням для користувачів. Сторінка пошуку вирішує цю проблему, надаючи цілеспрямований інтерфейс, де користувачі можуть шукати товари на основі текстового введення та додаткових фільтрів. Йдеться не просто про пошук, а про те, щоб зробити процес пошуку настільки легким, щоб користувачі без вагань поверталися на платформу для задоволення своїх майбутніх потреб.

Як має функціонувати сторінка пошуку

Текстовий пошук Текстовий пошук - це основна функція сторінки пошуку, яка є центром взаємодії з користувачем. Користувача зустрічає помітний рядок пошуку, де він може ввести назву або навіть часткову назву продукту, який він шукає. Повинні підтримуватись наступні характеристики сторінки:

  1. Асинхронні результати. Використовуючи HTMX, кожне натискання клавіші в рядку пошуку повинно ініціювати асинхронний запит до бекенду Django. Бекенд, в свою чергу, виконує запит для пошуку відповідних елементів і повертає ці дані.
  2. Зворотній зв'язок пошуку: Якщо збігів не знайдено, повідомлення на кшталт "Товарів не знайдено" має відображатися динамічно, без необхідності перезавантаження сторінки.

Бічна панель фільтрів

Збоку від основних результатів пошуку доступна бічна панель фільтрів, яка дозволяє користувачам ще більше звузити результати пошуку. Вона буде містити:

  1. Категорії: Випадаючий список або список доступних категорій продуктів.
  2. Підкатегорії: Залежний випадаючий список, який стає активним при виборі категорії, показуючи підкатегорії, що відносяться до обраної категорії.
  3. Діапазон цін: Повзунок або поля з подвійним введенням, де користувачі можуть вказати мінімальну і максимальну ціну.
  4. Рейтинг: Радіокнопки або повзунок для вибору діапазону рейтингу для фільтрації товарів.

Кожен з цих фільтрів, оснащений HTMX-атрибутами, ініціює новий GET-запит до бекенду Django, оновлюючи результати пошуку асинхронно на основі застосованих фільтрів.

Сортування

На тому ж рядку, що і рядок пошуку, випадаючий список сортування дозволяє користувачам сортувати результати пошуку:

  1. Ціна: За зростанням або спаданням.
  2. Популярності: На основі відгуків користувачів або кількості покупок.
  3. Найновіші: Товари, нещодавно додані до магазину.

Вибір параметра сортування реорганізує поточні результати пошуку відповідно до обраних критеріїв. Це має відбуватися в режимі реального часу, без перезавантаження сторінки, завдяки HTMX.

Технічні деталі імплементації

HTML структура

Приклад:

<!DOCTYPE html>
<html>
<head>
  <title>Search Page</title>
</head>
<body>

  <!-- Search Bar -->
  <div id="search-bar">
    <input type="text" hx-get="/api/search/" hx-trigger="keyup delayed:300ms">
  </div>

  <!-- Filters Sidebar -->
  <div id="filters">
    <!-- Categories, Sub-categories, Price Range, and Rating filters with HTMX attributes -->
  </div>

  <!-- Search Results -->
  <div id="search-results" hx-include="/api/initial_results/">
    <!-- Products will be populated here -->
  </div>

  <!-- Sorting Dropdown -->
  <div id="sorting">
    <select hx-get="/api/sort/" hx-trigger="change">
      <!-- Sorting options here -->
    </select>
  </div>

</body>
</html>

Інтеграція HTMX

Для основної пошукової функціональності поле введення HTML доповнюється HTML-атрибутами hx-get і hx-trigger. Атрибут hx-get вказує кінцеву точку API бекенда Django для отримання результатів пошуку в реальному часі. Атрибут hx-trigger налаштовує асинхронний запит на виконання кожного натискання клавіші, але з затримкою, щоб не перевантажувати сервер.

Приклад: <input type="text" hx-get="/api/search/" hx-trigger="keyup delayed:300ms">

Для кожної опції фільтрації, такої як категорії, підкатегорії, ціновий діапазон та рейтинг, ми використовуємо атрибути hx-get та hx-trigger. Атрибут hx-get вказує кінцеву точку API, яка фільтрує продукти на основі обраних критеріїв. Атрибут hx-trigger визначає подію, яка запускає цю фільтрацію, зазвичай це зміна для випадаючих списків або слайдів.

Приклад:

<!-- Category Filter -->
<select id="category-filter" hx-get="/api/filter_category/" hx-trigger="change">
  <!-- Categories here -->
</select>

<!-- Price Range Filter -->
<input type="range" min="0" max="1000" id="price-filter" hx-get="/api/filter_price/" hx-trigger="change">

Випадаючий список сортування дозволяє користувачам сортувати результати пошуку. Це досягається за допомогою hx-get в HTMX, щоб вказати кінцеву точку API для сортування, і hx-trigger, щоб вказати, що сортування повинно застосовуватися, коли користувач змінює вибрану опцію.

Приклад:

<select id="sorting-dropdown" hx-get="/api/sort/" hx-trigger="change">
  <!-- Sorting options like 'Price: Low to High', 'Price: High to Low', 'Popularity', 'Newest' -->
</select>

Стилізація CSS

Стилістика міститься в окремому CSS-файлі. Приклад:

#search-results {
  /* Styles for search results */
}

#filter-container {
  /* Styles for filters */
}

Перегляд товару

Призначення

Сторінка перегляду товару є важливою частиною інтернет-магазину і дозволяє користувачам детально ознайомитися з описом товару. Ця сторінка містить всю інформацію (характеристики) про товар, таку як назва товару, зображення товару, опис товару та ціна, що допомагає користувачам зробити інформований вибір та додати товар до кошику.

Опис функціоналу

Завантаження сторінки товару

Коли користувач переходить на сторінку товару, він бачить інформацію про конкретний товар. Основні елементи цієї сторінки включають:

  • Назва товару: Назва товару, яка дозволяє користувачу легко ідентифікувати товар.
  • Зображення товару: Зображення товару, яке допомагає візуально представити товар користувачу.
  • Опис товару: Опис товару, який надає детальну інформацію про характеристики, функції та переваги товару.
  • Ціна: Ціна товару, що дозволяє користувачу знати вартість товару.

Додатковий функціонал

На сторінці перегляду товару також можуть бути додаткові функції, такі як кнопка "Додати до кошика", яка дозволяє користувачу додати товар до свого кошика для подальшої покупки. Так само можуть бути додані інші секції сторінки, наприклад для інформування клієнта про інші подібні товари.

Асинхронне надсилання форми

Коли користувач натискає кнопку "Додати до кошика" HTMX перехоплює цю подію і надсилає асинхронний HTTP POST запит до бекенду Django за адресою /api/add-to-cart. HTMX гарантує, що відправка форми обробляється без перезавантаження сторінки, забезпечуючи тим самим безперебійну роботу користувача.

Обробка відповіді сервера

  1. Внутрішній сервіс перевіряє присутність товару у БД. Якщо будь-яке з полів є недійсним, повертається відповідь у форматі JSON зі статусом "помилка".
  2. Перевірка на дублювання. Бекенд перевірить, чи такий товар вже є в корзині. Якщо це так, товар не буде доданий буде повернуто повідомлення про помилку про наявність товару у кошику.
  3. Якщо перевірка пройшла успішно і дублікатів не знайдено, до кошика буде додано товар. Відповідь у форматі JSON зі статусом "success" буде надіслано назад на фронт-енд.
  4. Після успішного додавання HTMX на стороні клієнта проходить оновлення відображення вмісту кошика.

Обробка помилок

Помилки на стороні сервера: Якщо серверна валідація не пройшла успішно, товар не доданий або вже є кошику, повідомлення про помилку буде відображено безпосередньо у формі без перезавантаження сторінки, завдяки HTMX.

HTML-структура

HTML-розмітка сторінки перегляду товару містить такі елементи:

<!DOCTYPE html>
<html>
<head>
 <title>Перегляд товару</title>
 <link rel="stylesheet" href="css/product.css">
</head>
<body>
 <div id="product-container">
   <h1>Назва товару</h1>
   <img src="зображення-товару.webp" alt="Зображення товару">
   <p>Опис товару: Детальний опис товару з характеристиками і перевагами.</p>
   <p>Ціна: 100.00 грн</p>
   <button id="add-to-cart">Додати до кошика</button>
 </div>
</body>
</html>

Інтеграція з HTMX

Для функціоналу додавання товару до кошика необхідно надати кнопці "Додати до кошика" атрибут hx-post, який відправляє асинхронний HTTP POST-запит для додавання товару до кошика без перезавантаження сторінки. Якщо потрібно використовувати додаткове поле з кількістю бажаного товару, то зручніше буде використати форму, подібну до вказаних вище в цій документації (наприклад в розділі "Сторінка реєстрації")

<button id="add-to-cart" hx-post="/api/add-to-cart">Додати до кошика</button>

Стилізація CSS

Стилізація сторінки товару зазвичай міститься в окремому CSS-файлі. Нижче наведено приклад стилів для деяких елементів сторінки:

#product-container {
 width: 80%;
 margin: 0 auto;
 text-align: center;
}

h1 {
 font-size: 24px;
}

img {
 max-width: 100%;
}

button {
 background-color: #007bff;
 color: #fff;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

button:hover {
 background-color: #0056b3;
}

Кошик

Призначення

Сторінка "Кошик" є важливою частиною інтернет-магазину та дозволяє користувачам переглядати та керувати товарами, які вони додали до свого кошику під час покупок. Ця сторінка надає користувачам можливість перегляду списку товарів, зміни кількості товарів, видалення товарів та розрахунку загальної вартості обраних товарів.

Опис функціоналу

Початкове завантаження сторінки

Коли користувач переходить на сторінку "Кошик", він бачить список товарів, які він додав. Кожен товар включає такі дані:

  • Зображення товару: Невелике зображення товару, що допомагає візуально ідентифікувати товар.
  • Назва товару: Назва товару, яка дозволяє користувачу легко ідентифікувати товар.
  • Ціна: Ціна товару за одиницю.
  • Кількість: Кількість одиниць товару.
  • Загальна вартість: Сума вартості всіх одиниць даного товару.

Зміна кількості товару

Користувач має можливість змінити кількість одиниць товару, введену в полі кількості і оновити загальну вартість товарівд у кошику без перезавантаження сторінки.

Видалення товару

Користувач може видалити товар з корзини, натиснувши відповідну кнопку "Видалити" біля товару. Це також можливо без перезавантаження сторінки завдяки асинхронній обробці.

Розрахунок загальної вартості

На сторінці "Кошик" відображається загальна вартість усіх товарів в корзині. Це значення автоматично оновлюється при зміні кількості товару або видаленні товару.

Оформлення замовлення

На сторінці також може бути функціонал оформлення замовлення, що дозволяє користувачеві перейти до процесу оформлення покупки, вказати адресу доставки та інші необхідні дані.

Обробка помилок

Помилки на стороні сервера: Якщо серверна валідація не пройшла успішно, помилка видалення товару, невірна кількість товару, товарів більше немає у кошику та ін, повідомлення про помилку буде відображено безпосередньо у формі без перезавантаження сторінки, завдяки HTMX.

HTML-структура

HTML-розмітка сторінки "Кошик з товарами" містить такі елементи:

<!DOCTYPE html>
<html>
<head>
 <title>Кошик з товарами</title>
 <link rel="stylesheet" href="css/cart.css">
</head>
<body>
<form hx-post="/api/checkout/" hx-swap="outerHTML">
 <div id="cart-container">
   <h1>Кошик з товарами</h1>
   <ul id="product-list">
     <li>
       <img src="thumbnail.webp" alt="Назва товару">
       <div>Назва товару</div>
       <button class="cart-item-quantity-decrease">-</button>
       <input type="number" class="cart-item-quantity" value="1">
       <button class="cart-item-quantity-increase">+</button>
       <button class="cart-item-delete">Видалити</button>
     </li>
    ...
   </ul>
   <p>Загальна вартість: <span id="total-price">0.00 грн</span></p>
   <div>Вибір варіанта доставки</div>
   <div>Адреса доставки</div>
   <div>Вибір варіанта оплати</div>
   <button id="checkout-button" type="submit">Оформити замовлення</button>
 </div>
</form>
</body>
</html>

Інтеграція з HTMX

HTMX використовується для асинхронної обробки відправлення форми. Коли змінюється кількість одиниць товару або видалення товару HTTP POST-запит надсилається на кінцеву точку /api/cart/ без необхідності повного перезавантаження сторінки. Це покращує взаємодію з користувачем. Для оформлення замовлення кнопка "Оформити замовлення" відправляє асинхронний HTTP POST-запит надсилається на кінцеву точку /api/checkout/.

Стилізація CSS

Стилізація сторінки "Кошик з товарами" міститься в окремому CSS-файлі та може бути налаштована згідно з дизайном вашого інтернет-магазину. Нижче наведено приклад стилів для деяких елементів сторінки:

h1 {
  margin-top: 0;
  font-size: 24px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

img {
  width: 100px;
  height: 100px;
}

div {
  margin-bottom: 10px;
}

button {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
}

#cart-container {
  width: 600px;
  margin: 0 auto;
}

#product-list {
  display: flex;
  flex-direction: column;
}

.cart-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cart-item-quantity {
  width: 50px;
}

.cart-item-delete {
  background-color: red;
  color: white;
}

#total-price {
  font-weight: bold;
}

#checkout-button {
  background-color: green;
  color: white;
}
Clone this wiki locally