category

Headerdagi logikani keyinroqqa olib qo'ysak ham bo'ladi

Keyingi navbatda category pagening routingiga /category/{id} pageni qo'shamiz. id bizga productlarni categoriyaga qarab filtr qilishga kerak bo'ladi.

Keyin dizaynini boshlaymiz birinchi yaratib olgan layoutimiz bilan pageni bog'laymiz keyin cardlar listini qurib olamiz va backenddan productlarini olish uchun postmanga qaraymiz.

Ahamiyat bersangiz bizning productlar oladigan apiyimizda page, categories, tags, brands degan paramterlar bor. bu parametrlar orqali biz olayotgan productlarimizni categoriya, brand va teglarga filtrlab olishimiz mumkin. page parametr esa biz olayotgan ma'lumotlarimizni bo'laklarga ajratib kerakli qismini faqat zaruriyat payti olishga yordam beradi.

Bu page uchun global state manager ishlatganingiz yaxshi. Chunki siz filtrlaringiz holatini bir necha joyda ko'rsatasiz va o'zgartira olishingiz kerak bo'ladi.

1

2

3

Qisq qilib aytganda siz o'z global state ingizda productlarni ro'yxatini olishingiz va saqlashingiz va shu ro'yxatni olish uchun user tanlagan page, categories, tags, brands va sorting o'zgaruvchilarni holatini saqlashingiz kerak.

Hamma filtrlar logikasini qilib bo'lsangiz query parametr larni sozlashingiz kerak bo'ladi. Har bir query parametr o'zgarishida o'z pagegingizni url ni o'zgartirishni unutmang, bu orqali siz boshqa pagrdan qaytganda shu url querylarni olib eski pageni eski holatini qaytarib olasiz va shu ssilkani share qilsangiz boshqa odamlarda ham siznikidek filtrlar turgan bo'ladi

Category productlardan keyin o'xshash productlar seksiyasini ko'rsangiz bo'ladi.

Ahamiyat bergan bo'lsangiz bunday seksiya productning pageda ham bor. Shuning uchun uni alohida lazy component qilib olsak bo'ladi. Uning vazifasi faqatgina user pagega scroll qilganda o'xshash productlarni olib ko'rsatish bo'ladi.