Up next in 10
Customizing Hoodies, Mugs & Stickers Page for Codeswear.com _ NextJs Tutorial for Beginners #53
1K views
Feb 13, 2024
"Customizing Hoodies, Mugs & Stickers Page for Codeswear.com" is the 53rd tutorial in the "NextJs Tutorial for Beginners" series. In this video, viewers will learn how to personalize and enhance the user experience on the Codeswear.com website by customizing the pages dedicated to hoodies, mugs, and stickers. The tutorial focuses on frontend development within Next.js, covering topics such as dynamic routing, fetching product data from a backend API, and rendering customized product pages tailored to each item category. Additionally, the tutorial may delve into implementing interactive features such as product customization options, dynamic pricing, and add-to-cart functionality. By following along with this tutorial, beginners can gain practical experience in building engaging and user-friendly e-commerce interfaces using Next.js.
View Video Transcript
0:00
अभी तक हमने जो pages बनाए हैं वो t-shirt के related थे। अब
0:03
हम लोग अपने mugs को hoodies को और उसी के साथ साथ stickers
0:07
के page को भी modify करना चाहेंगे ताकि हम लोग उसके अंदर products
0:11
डाल सके। वो direct कर जाए products page पर और user हमारे
0:15
products को buy कर पाए। चलते हैं computer screen में और customize करते
0:19
हैं mugs page को hoodies page को stickers page को। Let's get
0:22
started। तो
0:33
यार अभी तक हम लोगों ने सिर्फ t-shirt का page बनाया है। वहां पर हम लोगों ने simply एक बोली
0:38
कि यार database से हमारा सारा का सारा सामान आ जाए। मैंने जैसे
0:41
सामान I mean हमारे जो documents है वो ठीक है। मालूम है
0:45
अब मैं आ जाऊँगा यहाँ पर अपनी courseware पे और जो hoodies वाला page है उसको भी बिल्कुल वैसे ही बनाऊंगा
0:49
जैसे मैंने t-shirts वाले page को बनाया है। तो जो मेरा t-shirts वाला page है उसको मैं यहाँ पर
0:53
करूँगा और मेरे hoodies के page को लेकर आऊंगा यहाँ पर right click करके close
0:57
to the right कर दूँगा और जो मेरा hoodies का page है जो कि यहाँ
1:00
पर है। उसको मैं खोलूँगा। ठीक है। मैंने बहुत सारे ये जो
1:05
link है इनको बनाया था ताकि मैं एक idea ले सकूं कि
1:09
कैसा दिखेगा मेरा page जब इसपे बहुत सारे elements होंगे ठीक है
1:13
लेकिन अब इन elements का काम है नहीं। तो मैं इनको बिठा दूंगा
1:17
सिर्फ एक को रखूंगा ठीक है और यहाँ पर मैं क्या करूंगा
1:21
समझदारी समझूंगा ये करने में कि मैं क्या करूंगा जो t-shirts है
1:25
इसको copy करूँगा और exactly base कर दूंगा मैं इसे exactly एकदम
1:30
control z control में तो ये करने के बाद मैं t-shirt को select करूँगा rightly करके change
1:33
all occurrences करूँगा और इसके बाद यहाँ पर hoodies लिख दूंगा ठीक
1:37
है save करूँगा इस को और यहाँ पर आप लोग देखो hoodies is equal to products
1:40
और ये सारी की सारी चीजें मैंने change कर दी है। जहाँ जहाँ t-shirt लिखा
1:44
है ना वहां वहां hoodies कर दूंगा। ठीक है, वहां वहां hoodies
1:48
कर दूंगा और t-shirt S H I RT जहाँ जहाँ t-shirt है
1:52
वहां वहां hoodie कर दूंगा और यहाँ पर hood लिख दूंगा ठीक
1:57
है hoodie नहीं hood लिख दूंगा तो ये जितने भी t-shirt लिखे हुए हैं यहाँ पर hood
2:00
और hoods हो जाएंगे वो ठीक है replace solve कर दिया ठीक है तो यहाँ
2:04
पर hoodies कर दिया मैंने category को और कहीं और t-shirt लिखा
2:08
होगा तो उसको भी मैं change करूँगा जैसे यहाँ t-shirts लिखा है मैं यहाँ पर कर
2:12
दूंगा ठीक है और क्या कुछ और करना है मुझे नहीं और तो कुछ दिख
2:16
नहीं रहा है मुझे अब मैं क्या करूँगा अब मुझे एक बहुत समझ में आएगी अब देखो
2:19
cannot convert undefined null to object अब देखो क्या हो रहा है
2:23
यहाँ पर जो मेरी products है products मेरे कुछ है ही नहीं
2:28
अरे कहना क्या चाहते हो? ठीक है अब यहाँ पर देखो एक error मिला
2:31
होगा मुझे definitely एक error मिला होगा नहीं मिला है cat server side
2:35
props चला लेकिन जो मेरा hoods है वो शायद। आह एक minute
2:40
वो क्या है ये देखना बहुत जरूरी है। तो ये एक loop है loop के बाहर
2:44
hoods की value क्या है ये देखेंगे console dot log hoods करके
2:48
फिर ये condition लगाएंगे कि यार अगर हमारी hoods खाली है तो
2:52
ये पता चल जाए हमको अगर hoods हमारी खाली है तो ये हमें पता चल
2:56
जाए तो मैं क्या करूँगा कि यहाँ पर एक simple सी लिखूंगा। मैं कहूँगा
3:00
कि अगर object dot products, object dot keys products dot length ठीक
3:05
है। is equal to zero ठीक है तब क्या करो कि एक
3:11
message display करो एक paragraph दिखाओ ठीक है। और paragraph के अंदर
3:15
लिख दो emmit काम क्यों नहीं कर रहे हो तुम? emmit काम कर
3:19
जाओ। मैं तुम्हारे बाप का नौकर नहीं हूँ। ठीक है paragraph के
3:23
अंदर मैं क्या लिखूंगा मैं कहूँगा आह sorry all the hoodies are
3:29
currently out of stock ठीक है। New stock coming soon। ठीक
3:39
है ऐसे लिख दिया मैंने ठीक है और मैं यहाँ पर लिखूँगा sorry all
3:43
the hoodies are currently out of stock new stock coming soon। ठीक है? और
3:46
ये करने के बाद मैं देखो यहाँ पर sorry all the hoodies are currently out of stock, new stock
3:50
coming soon, stay tuned। ठीक है? stay tuned अच्छा लगेगा। ठीक है
3:58
लग रहा है। अब जैसे ही मैं एक hood add करूँगा ठीक है अब यहाँ पर जैसे कि
4:01
मैंने एक end point बनाया था quotes में youtube पे add product
4:05
का ठीक है तो मैं add product करूँगा लेकिन इस बार body के अंदर मैं क्या
4:09
करूँगा जो title है वो तो where the code premium hood रहेगा
4:14
और where the code hood लिख दूंगा यहाँ पर hood और L
4:19
green कर दूंगा इसको मैं ठीक है और यहाँ पर description है
4:23
This is a very nice hood please buy it ठीक है और
4:30
ये करने के बाद मैं क्या करूँगा मैंने पता है कर दी
4:34
है। पता है क्या कर दी है यहाँ जो hood था ना उसकी image गायब कर ली
4:38
तो मुझे hood की image दोबारा से लानी कोई बात नहीं amazon
4:43
से ले लेंगे। right click open image in new tab। और ये
4:48
जो नहीं मुझे एक proper URL चाहिए इस hood का तो मैं
4:52
rightly open imagine new tap करूँगा और यहाँ पर मुझे ये URL
4:56
मिल गया proper। अब मैं इस URL को डालूँगा यहाँ पर और
4:59
यहाँ पर डालने के बाद। save करूँगा और save करने के बाद
5:05
सब कुछ ठीक है और इसका price मैं कर दूँगा thousand ninety
5:09
nine available quantity ten बाकी सब ठीक है ना? हाँ बाकी सब
5:12
ठीक है send करें कर दिया ठीक है। अरे यार ये क्या कर दिया मैंने
5:16
इसका जो type था वो category मैंने t-shirt कर दी, कोई बात
5:20
नहीं। मैं इसको मुझे hood करना था ठीक है मैं एक काम करूँगा यार इसको
5:23
manually add करूँगा sorry delete करूँगा mongo DB से ठीक है। तो
5:29
मैं क्या करूँ इसको reset करूँगा filter को reset ठीक है और
5:33
इसको बंद करूँगा और at the इसको refresh करूँगा data को और
5:37
जो last वाला मैंने wear the code premium mode करा है इसको delete करूँगा। ठीक
5:41
है? Yes delete। अब मैं क्या करूँगा कि यहाँ पर send करूँगा
5:45
और success true हो गया। ठीक है? अब देखनी चाहिए हमारी hood page पर अगर सब कुछ
5:49
ठीक रहा तो। ओह ऐसा क्यों हुआ? ऐसा क्यों हुआ? Category क्या
5:57
है? hood hood है अरे यार hoodies है category, sorry, sorry hoodie
6:03
है hoodie ठीक है? तो at the end मेरी hoodie यहाँ पर
6:07
आएगी। तो hood जहाँ लिखा है वहाँ मुझे hoodies करना है। ठीक
6:11
है, update। Reload। and yes where the code premium hood आ गयी
6:18
यहाँ पर size L और green available है। अब एक काम करते हैं इसका size XL
6:22
भी add कर देते हैं। ठीक है? तो size को मैं excel कर दूंगा और यहाँ पर
6:26
भी मैं excel कर दूंगा और बाकी सब चीजें same रहेंगी, this
6:30
is very nice but please buy it where the code premium hood है send करूँगा
6:34
और अगर अब मैं reload करूँगा ना इस को तो यहाँ पर देखना है excel size
6:37
भी आ जाना चाहिए था लेकिन नहीं आया क्योंकि मैंने यहाँ पर hoodies नहीं किया। देखा
6:41
आपने लापरवाही का नतीजा है। तो मुझे यहाँ पर भी hoodies करना चाहिए था। अब
6:45
मैं क्या करूँगा double XL add करूँगा सीधा ठीक है। send और
6:49
अगर मैं आप लोगों को दिखाऊं तो आप देखो यहाँ पर मैं इसको reload करूँगा double
6:53
XL आ गया यहाँ पर ठीक है। तो L double XL इसको मैं खोलूंगा तो
6:56
यहां पर देखो where the code hood L green ये hood यहाँ पर आ गया
7:00
है बहुत ही है यार बहुत ही amazing यार सब कुछ ठीक से चल रहा है यहाँ पर
7:03
LXL और double XL इसके उपलब्ध हैं। ठीक है तो मैं यहाँ
7:07
पर excel कर दूंगा तो देखो XL green आ गया double XL Axel green आ गया ठीक है। तो
7:11
यहाँ पर ये तो है यार ठीक है ये तो बहुत ही है। अब
7:15
यहाँ पर ये करने के बाद मैं क्या करूँगा की यहाँ पर
7:19
आऊंगा और ये जो मैंने अभी गलती करी थी यहाँ पर की मैंने
7:22
यहाँ पर hoodies की जगह hood कर दिया था। तो मैं यहाँ पर hoodies
7:26
कर दूँगा इसको कहाँ गया hood hood hood refresh करना नीचे आऊंगा
7:32
hood कर दिया था मैंने इसको मैंने hoodies करना अच्छा एक बात यहाँ पर mention करना
7:35
चाहता हूं कि मैं यहां पर ये check नहीं कर रहा हूं कि ये categories इसकी क्या है जब
7:39
मैं यहां पर fetch कर रहा हूं इसको तो मैं इसकी category यहां पर variants जब मैं
7:42
देख रहा हूं तो variant देखते वक्त मुझे एक filter और लगाना चाहिए
7:46
category का ठीक है। तो यहां पर category hoodies भी मुझे filter
7:50
लगाना जब मैं variants fetch कर रहा हूँ तो ठीक है। मैं दिखाता
7:53
हूँ आप लोगों को मेरे कहने का क्या मतलब है मैं variants is equal to
7:57
मैं इसके variants कहाँ पर fetch कर रहा हूँ by the way मैं hoodies वाले page में variants
8:02
fetch नहीं कर रहा हूं, मैं कर रहा हूं यहां पर products page में ठीक है। तो
8:05
जब मैं products page में variants को fetch कर रहा हूं तब
8:10
मुझे एक का ध्यान और रखना और वो ये है कि title तो रहे product dot
8:14
title लेकिन जो हमारा type है type है ना देखता हूं type
8:19
ही है ना आह category sorry category है। वो होनी चाहिए। product
8:27
dot category ठीक है तो category होनी चाहिए product dot category। तो
8:30
मैं इसको reload करूँगा अगर तो आप लोग देखो ये बहुत ज्यादा जरुरी है
8:34
तो अगर मैंने मान लो इसको t-shirt बना दिया मान लो for some reason मैंने इसको t-shirt
8:38
बना दिया। मान लो इसकी category एकदम एक अजीब सी लग दी
8:42
t-shirts, hoodies ठीक है। तो एक यहाँ पर गायब हो जाएगा मेरा
8:46
size है reload किया देखो गायब हो गया double XL क्योंकि मैंने double XL को शायद change किया था
8:50
हाँ ठीक है double XL को मैंने change किया था तो मैं इसको hoodies कर
8:53
दूंगा तो इसका hoodies होना भी जरूरी है category match करेगी तभी दिखाएगा
8:57
variant ये वरना नहीं दिखाएगा तो ये एक तरह से bug भी था हमारी site में
9:01
for some reason अगर मान लो हमारा product का जो title है वो same रहा hoodies
9:05
में और t-shirts में तो दिक्कत हो जाएगी ना। तो ये दिक्कत
9:08
से हमको बचना है। बाकी सब चीजें तो मुझे अच्छी दिख रही है this is a very
9:12
nice hood please buy it और यहाँ पर color भी ठीक दिख रहा
9:16
है L green, XL green, double XL green इसको add to card
9:21
करूँगा तो यहाँ पर देखो where the code premium hood double double XL green। इसका
9:25
price भी बिल्कुल ठीक ठीक आ गया। एक minute इसका price four ninety nine क्यों है। मैंने तो
9:29
शायद इसका price ज्यादा रखा था। ज्यादा रखा था क्या? four ninety nine नहीं रखा था। one
9:33
zero nine nine रखा था price इसका ये four ninety nine क्यों दिखा रहा है one zero nine nine one
9:36
zero nine लगता है मैंने यहाँ पर products page पर price जो है वो
9:40
hardcore कर रखा है। which is a problem। product dot price ठीक
9:45
है और उसी के साथ-साथ क्या मैंने four ninety nine कहीं और भी hardcourt
9:49
किया हुआ है बहुत है product dot price मुझे करना नहीं तो सब लोग
9:52
मेरा सारा माल ले जाएंगे four ninety nine rupees का जो मेरा
9:56
का माल है वो भी four ninety nine का ले जाएंगे। मैं नहीं करने दूंगा ये काम उनको
10:00
reload किया price change क्यों नहीं हुआ भाई साहब क्या बात हुई
10:04
price change क्यों नहीं हुआ? ये price का है change नहीं हो
10:08
गया एक minute product dot price ठीक है इसको मैं अब reload
10:15
करूँगा अब change हो गया देखो one zero nine eight अब मैं add to card करूँगा तो
10:19
एक minute मुझे clear card करना शुरू से add to काट किया one zero nine nine two one nine
10:22
eight t-shirt add कर रहा हूँ तो वो कितने की हो रही है add to card किया अच्छा
10:26
है इसका size ही available नहीं है which is a problem इसका कुछ भी available नहीं है
10:30
तो ये दिख क्यों रहा है फिर यहाँ पर जब इसका कुछ available ही नहीं है तो। okay
10:34
तो ये मुझे ठीक करना database मेरा बहुत ही inconsistent है अभी database
10:37
को मुझे ठीक करना फिर काम हो जाएगा मेरा तो यहाँ पर अगर मैं M
10:41
size को add to cart करूँ तो ये four ninety nine की है। ये
10:45
four ninety nine की होनी चाहिए। तो अगर मैं इसको remove from cart करूँ तो two
10:49
one nine eight इसको add करूँ तो four ninety nine ठीक है तो
10:53
यहाँ पर अभी तक सब कुछ चल रहा है और यार ठीक
10:58
है तो अब हम क्या करेंगे आने वाले videos में ये देखेंगे
11:02
कि किस तरह से हमको बनानी है। हमारी आह हमारी जो user
11:07
login करेगा हमारा उसका page किस तरह से बनाना है forget password किस तरह से बनाना
11:11
है। ये सारी की सारी चीजें हम लोग देखेंगे आने वाले videos में और भी बहुत सारा काम
11:15
है क्योंकि यार अब अगर कोई भी checkout करना चाहता है buy now
11:18
या add to cart करता है मान लो मान लो add to cart किया और फिर अच्छा यहाँ पर एक checkout
11:22
भी मुझे देना चाहिए। ah buy now add to cart और check out
11:25
ठीक है तो ये checkout का button भी यहाँ पर लगा देंगे क्योंकि अगर कोई shopping cart अगर
11:29
नहीं खोलता है तो वो क्या करेगा ठीक है check out का button मैंने यहाँ पर लगा दिया
11:33
और यहाँ पर तीन एक सौ छियानवे रुपए का bill बना तो कोई भी pay करे अगर
11:37
यहाँ पर payment भी accept उसका कर ले लिया जाए ये भी मुझे यहाँ पर देखना
11:41
कैसे किया जाएगा ठीक है तो mug section stickers section, hoodies section, t-shirts
11:45
सब कुछ यहाँ पर जो है चल रहा है अभी stickers वाला page और mugs वाला page
11:49
भी हमको बनाना तो सा जो है और काम इसमें बाकी है
11:54
तो जो hoodies है ना उसको मैं copy करूँगा stickers में जाऊंगा
11:58
control a control भी करूँगा जहाँ जहाँ hoodies हैं वहां वहां stickers
12:03
कर दूंगा और जहाँ जहाँ category hoodies था वहां वहां category stickers
12:08
कर दिया और क्या और भी कोई करनी है मुझे शायद नहीं
12:12
करनी है यार stickers हो गया अब एक mugs का page भी
12:16
मुझे change करना जहाँ जहाँ stickers है rightly change all the currences
12:20
करूँगा और ये करने के बाद यहाँ पर mugs कर दूँगा। फिर
12:25
category में यहाँ पर भी mugs कर दूँगा और control s से save करूँगा। ऐसा
12:29
करने से अगर मैं reload करूँगा इसको तो sorry all the mugs are currently
12:33
out of stock, new stock coming soon। Sorry all the stickers are
12:37
currently out of stock stock coming so stay tuned ठीक है। तो इस तरह से हम
12:40
जो है hoodies, stickers, mugs ये सारे के सारे products cow dot
12:44
com पर display करा सकते हैं। अब अगला काम हमारा ये है
12:48
कि कोई भी बंदा अगर account बनाता है तो वो sign in करे तो यहाँ पर
12:51
उसका जो account है वो दिखे उसके बारे में दिखे may be
12:55
उसका address may be उसका email ID phone number ये सारी details
12:59
वो save कर पाए। So आने वाले videos में ये काम करने वाले हैं next GS की playlist अगर
13:03
आप लोगों ने access नहीं करी है। तो कर लेना यार से ठीक है। अभी
13:07
इस video में इतना है guys thank you so much guys for watching this video and I will
13:10
see you next time। Bye
13:28
bye Tata good bye गया।
#Apparel
#Art & Craft Supplies
#Ceramics & Pottery
#Clothing Accessories
#Crafts
#Online Goodies
#Programming
#Retail Trade
#Shirts & Tops
#Skins
# Themes & Wallpapers