Доопрацювання інтернет-магазину TIPTOP, історія замовлень

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

Реалізація

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

1. Відстеження історії переглядів на стороні клієнта

* На стороні клієнта, при перегляді кожного товару, необхідно записувати інформацію про переглянуті товари, наприклад, в локальне сховище браузера (LocalStorage або SessionStorage) або в куки.
* Для цього можна використовувати JavaScript, щоб зберігати ID товарів, які користувач переглянув, та відображати їх при наступному відвідуванні сайту.

2. Відображення історії переглядів на стороні клієнта

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

3. Збереження історії на серверній стороні

Для збереження історії переглядів між сесіями (наприклад, при виході з браузера або інших пристроїв), зберігаємо історію на сервері. Це особливо корисно для зареєстрованих користувачів.
* Коли користувач авторизований при кожному перегляді товару відправляємо запит на сервер для збереження історії.
* Для анонімних користувачів використовуємо тимчасові куки, але для користувачів з обліковим записом – зберігаємо історію в базі даних.

4. Оптимізація збереження історії

* Щоб не зберігати занадто багато даних, встановлюємо обмеження кількості товарів в історії. Зберігаємо не більше 10–20 останніх товарів.
* Також можна додавати механізми очищення історії (наприклад, через якийсь час або при видаленні облікового запису користувача).

На наступних сторінках реалізуємо відображення історії перегляду товарів:

1. Головна сторінка:
* На головній сторінці виводимо блок з нещодавно переглянутими товарами. Це привертає увагу користувачів і може стимулювати їх до повторного перегляду товарів чи придбання.

2. Сторінка категорії:
* На сторінці категорії показуємо нещодавно переглянуті товари у вигляді каруселі. Це буде корисно, якщо користувач зацікавлений у конкретній категорії, але бачив інші товари, які його можуть зацікавити.

3. Сторінка товару:
* Якщо користувач знаходиться на сторінці конкретного товару, відображаємо історію переглядів товарів з подібними характеристиками або товарами, які могли б зацікавити покупця у контексті обраного.

4. Особистий кабінет користувача:
* У розділі з особистими даними надаємо детальніший перегляд історії всіх переглянутих товарів з можливістю повторного перегляду або додавання їх до кошика.

5. Сторінка кошика:
* На сторінці кошика інтегруємо блок із рекомендаціями товарів, ґрунтуючись на історії переглядів, щоб допомогти користувачеві знайти товари, які він міг забути або які доповнять його поточну покупку.

6. Сторінка пошуку:
* У результатах пошуку показуємо товари, які нещодавно були переглянуті користувачем, особливо якщо він шукав схожі товари раніше.

Висновок

Для реалізації функціоналу історії переглядів товарів на сайті інтернет-магазину необхідно:

1. Відстежувати переглянуті товари за допомогою JavaScript та зберігати цю інформацію на стороні клієнта (наприклад, за допомогою localStorage або cookies).

2. При необхідності зберігати історію на сервері, використовуючи API та базу даних, щоб дані зберігалися між сесіями та для зареєстрованих користувачів.

3. Розробити логіку відображення цієї історії на сайті під час повторних відвідувань користувача.

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