Лабораторная с вступления в веб технологии. Дедлайн завтра 10 утра

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

Основний акцент цього завдання робиться на фронтенд. Перелік товарів та категорій береться з заздалегідь поданого зовнішнього бекенду за допомогою отримання JSON-даних із API. Збереження замовлень відбувається за допомогою відправки POST-запиту на один з методів API із обов'язковим вказанням унікального токена у кожному із запитів. Токен видається персонально кожному із студентів.

Умовно додаток можна розділити на три представлення (views). Основні представлення додатку:

• View для перегляду списку товарів з категорії
• View для перегляду інформації про конкретний товар
• View для форми для оформлення замовлення

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

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

У представленні із товарами самі товари мають виводитись сіткою по декілька в ряд як наразі це робиться в більшості інтернет-магазинів. Міні-картка товару має точно містити такі елементи:

• Зображення товару
• Назву товару
• Ціну товару
• У разі наявності акційної ціни товару вона заміняє основну, в той час як основна ціна виводиться поруч із явним розрізненням двох цін (наприклад, стара - перекреслена, нова - виділена)
• Кнопка для додавання товару в кошик

Кнопка для додавання товару в кошик, як не дивно, має додавати його в кошик. Клік по інших елементах має виводити представлення з деталями самого товару.

Окрім того у представленні категорії (згори або збоку) має бути розташований клікабельний список категорій. При кліку на категорію в списку товарів виводяться лише товари з цієї категорії. Також на початку списку категорій має знаходитись пункт для виводу усіх товарів.

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

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

При кліку на кнопку оформлення замовлення відповідний запит має бути надісланий на відповідний метод з поданого API через AJAX. У разі повернення помилки з API додаток має коректно обробити її та вивести відповідне повідомлення. Особливо важливо коректно виводити помилки у формі створення замовлення для того, щоби користувач вашого додатку знав, що саме він неправильно зробив при оформленні замовлення. У разі успішного оформлення клієнт також має отримати сповіщення про це, а кошик має бути почищений.

Верстка додатку має бути адаптивна, бажано mobile-first. За бажання ви можете користуватись Bootstrap або іншим подібним CSS-фреймворком.

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

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