Asosiy maqolaga o'tish

product

Bu pageda asosan biz productni konfiguratsiyasini yig'amiz. Productni configuratsiyasini tanlab olish uchun ozgina algoritm yozishimizga tog'ri keladi. Postmanda ko'rishingiz bo'yicha biz productni olish uchun bizga uning slug i kerak bo'ladi. Siz product pageni qurish uchun routingizni product/{slug} korinishda qilib qurishingiz kerak bu yerda slug sizning ko'rmoqchi bo'lgan productingizni slugi bo'lib xizmat qiladi. Pagega o'tish vaqti siz routing orqali shu slugni olib backendan produktni olasiz.

/products/{slug} bilan product obejct ini olganingizda uning ichida attributes nomli array bo'ladi. Bu array da shu productga tegishli barcha configuratsiyalarni olishingiz mumkin.

Ko'rishingiz bo'yicha configuratsiyalari ko'rsatish uchun siz birinchi bo'lib attributes ni olasiz va uni map qilasiz, kegin attributes ichidagi data ni map qilasiz

Figma preview

Sezgan bo'lsangiz rang uchun blocklar boshqa blocklarga qaraganda sal boshqa ko'rinishda. Dizayn bo'yicha ko'rishingiz mumkinki faqatgina rang bloklari boshqa style da yasalgan. Bu holatda biz shu attribute lar orasidan color degan slugli atrrbutni kutib, agar attributlar to'g'ri kelsa dumaloq rangli ko'rinishdagi blokni boshqa holatda oddiy bloklarni yaratamiz.

Har bir attribut uchun ko'rinishlarni yaratib olganingizdan keyin birinchi default ya'ni bizning configuratisiyalarimiz orasida eng minimal va do'konda bor configuratsiyani tanlab uni soni va narxini chiqazishimiz kerak bo'ladi.

Figma preview

Bu qismni qilish uchun sizga product obyektidagi stocks degan array kerak bo'ladi. Bu array o'z ichida bizni do'kondagi bor barcha configuratsiyalarni narxi va sonini saqlaydi. Misol uchun siz qora va 256gb ram lik macbook olmoqchisiz, lekin faqat 512gb ram lik configuratsiya qolgan bo'kishi mumkin. Saytdan foydalanayotgan odam notog'ri informatsiya olmasligi kerak shuning ichun unga bizda yo'q configuratsiyalarni tanlay olish imkoniyatini cheklashimiz kerak.

Sizda to'gri funksional qirish uchun 4 ta vazifa bo'ladi.

  1. Stocklar va atrributlarni olganingizda stocklar orasidan eng minimal va magazinda bor konfiguratsiyalarni topasiz va o'zingizga saqlab qo'yasiz.
  2. Saqlab qo'ygan konfiguratsiyangizni narxi va sonini ko'rsatasiz
  3. Konfiguratsiyani bir nechta sonini tanlay olish uchun funksiyalar yaratasiz ( son tanlayotganda, soningiz quantity, ya'ni do'kondagi shu tovarning sonidan oshmasligi va 0 dan past bo'lmasligi uchun shart bo'lishi kerak )
  4. User attributni bosganida ya'na bir bor stockdan shu yangi terilgan attributlar uchun configuratsiyani olasiz (agar topa olmasangiz Add to card, Buy now, son qo'shish knopkalarini bosilmaydigan qilib qo'yasiz va sonni 0 qilib qo'yasiz )

Shu 4 shartni bajarsangiz sizning configuratsiya funksionalingiz ishlashni boshlaydi. unin mukammal bo'lishi uchun yana bir (extra) shart bor.

Figma preview

Ko'rishingiz mumkinki tepadagi rasmda bizda oq rang uchun faqatgina 128gb ssd va 8gb memory tanlashimiz mumkin. boshqa ssd va memory uchun knopkalar berk holda va ularni tanlab bo'lmaydi. Siz 4 qadamda shu ishning yengil ko'rinishini qildigiz bu ko'rinish uchun siz har bir attribute knopkasi uchun stockda to'g'ri keladigan congiguratsiya borligini tekshirishingiz kerak bo'lmagan holatda berkitasiz.

user configuratsiyani tanlashi uchun barch qadamlarni to'g'irlab olganimizdan so'ng productni cartga qo'shish uchun apini qilishimiz kerak. Bu apini ishlata olishimiz uchun biz avtorizatsiyadan o'tib user token ni o'zimizga saqlab olgan bo'lishimiz kerak. Shuning uchun bu qadamni qoldirib turib avtorizatsiya qilishni bitirib olamiz, kegin davom etamiz.