Source
Serhii Chernenko | Поточний тікет — ідеальне тестове завдання:- PLP грід з фільтрами, які...
256 Views/Reach
2025-07-22 17:27
Message №604
Поточний тікет — ідеальне тестове завдання:- PLP грід з фільтрами, які відкриваються і є частиною гріду тільки на десктопі. - В контенті гріда є маркетингові банери- Грід з кнопками load more зверху й знизуЗробити:1. 16 продуктів початково.2. На клік по лоад мор, сетити сторінки, як гет параметр в URL, типу ?page={n}3. На скролл апдейтити page в URL, в залежності від того, до якої сторінки належить продукт4. Якщо сторінка завантажена з параметром ?p, грузити продукти відповідної сторінки.5. Показувати load more зверху також, якщо сторінка не перша6. Фільтри повинні бути, як drawer (fixed sidebar) на мобілці7. На декстопі, вони повинні бути частиною гріда, щоб бачити зміни одразу.8. Але вони мають бути закриті, щоб показувати більше продуктів.9. Проте, якщо були застосовані фільтри, сайдбар повинен бути відкрити на пейдж лоад.10. Відповідно треба фільтри сетити в URL також11. Якщо застосовуються нові або стираються існуючі фільтри, резетити сторінку до 0.12. Продуктів в рядок повинно бути 2 на мобілці13. Продуктів в рядок повинно бути 4 на декстопі від 1440 пкс. Але коли фільтри відкриті, показувати 3 продукти в рядок.14. Але на маленькому десктопі має бути 3 продукти в рядок і 2, коли фільтри відкриті.Задача із зірочкою:1. Маємо маркетингові банери від 0 до нескінченності на сторінці — URL на іншу категорію або продукт, тайтл і кнопка типу Shop now, неважливо.2. По дизайну, кожен банер повинен бути на всю довжину в середині гріду. Наприклад, якщо в нас 3 банери. на декстопі перший показуємо після 8 продукта, і другий не показуємо. 3. Догружаємо з лоад мор ще продуктів і показуємо другий після 16, а третій після 24 продукта.4. АЛЕ! З урахуванням того, що в нас кількість продуктів змінюється відносно стану фільтрів на десктопі — основна складність задачі полягає в тому, щоб банер був завжди full page, але так, щоб пустих місць від продуктів не залишалось.Тобто нам не підходить кейс коли фільтри відкриті, 3 продукти в рядок:row 1: products 1, 2, 3row 2: products 4, 5, 6row 3: products 7, 8, GAProw 4: tileОцього гепу бути НЕ повинно.Очікуваний результат:Без фільтрів:row 1: products 1, 2, 3, 4row 2: products 5, 6, 7, 8row 3: tileЗ фільтрамиrow 1: products 1, 2, 3row 2: products 4, 5, 6row 3: tileЯкщо у вас нема ідей, щоб зробити пет-проєкт, можете забирати це і показувати в гітхабі та на інтервʼю. Без жартів.Якщо хтось з лідів хоче дати таке завдання, не кажіть кандидатам, що тут роботи на 8 годин. Я дав би 40. Але тоді воно має бути оплачене, хоча б частково за домовленістю.Питання до беків: хотіли б у фронтенд? :D