Up next in 10
Creating a Cart, Checkout and Buy button _ Strapi Tutorial #6
372 views
Feb 21, 2024
In "Creating a Cart, Checkout, and Buy Button - Strapi Tutorial," viewers will learn how to implement essential E-commerce functionalities using Strapi. The video likely focuses on adding features such as a shopping cart, checkout process, and buy button to a website or application built with Strapi as the backend. These functionalities are crucial for facilitating online transactions and enhancing the user experience. The tutorial may cover topics such as managing cart items, calculating total prices, implementing a checkout flow with user input forms, integrating payment gateways or APIs for processing transactions, and configuring the buy button to finalize purchases. By following the instructions in the video, viewers can expect to gain practical insights into building a fully functional E-commerce system using Strapi, empowering them to create robust online shopping experiences for their users.
View Video Transcript
0:00
आज के इस वीडियो में सबसे पहले हम लोग प्रॉड़ड पेज बनाएंग�
0:02
उसके बाद हम लोग चेक आउट पेज बनाएंगे और ये देखेंगे कि एक यूजर किस तरह से आइटम्स को आड़ कर सकता है अपनी कार्ट के अंद�
0:09
इसके लिए हम लोग card state भी बनाएंगे हम लोग देखेंगे कि जब हमारा user website पर आएग�
0:14
किस तरह से हम लोग उसकी card build करेंगे किस तरह से हम लोग एक checkout page बनाएंग�
0:18
जहां से user अपना final order को place कर सकता है चलते हैं computer screen में और देखते हैं जल्दी स�
0:23
कि ये सारे काम किस तरह से किये जाते हैं तो यार आज है मेरे कंदों पे जिम्मिदार�
0:28
और उसका reason ये है कि मुझे बनाना है यहाँ पर checkout page
0:33
मुझे यहाँ पर बनानी है app state और बहुत सारा काम निप्टाना या�
0:37
क्योंकि ये सब आसान नहीं होने वाला तो मैं जाऊंगा अपने strapi course वाले folder में हमने यहाँ पर my shop करके एक बनाया था लेकिन उससे भी पहले मैं बताई क्या चाहता हूँ जो github desktop है मेरा उसको खोलूँगा और देखूँगा कि यार commits वगैरा किस हिसाब से मारे हुए मैंने क्या पांचों के पांच videos के commits मैंने मारे �
1:08
और अब मैं back-end को भी खोल लूँगा ठीक है और shift right click करके open with code यहाँ पर करूँग�
1:14
और यह front-end और back-end दोनों मैंने खोल लिया है ठीक है यह क्या हुआ है config folder क्यों खुल गया है भा�
1:19
मुझे सिर्फ config folder नहीं खोलना है shift right click किया है by the way मैंने आप लोग को बता दू�
1:38
तो यहाँ पर सबसे पहले तो अपने frontend को start करेंगे ठीक है जो frontend है वो yarn dev से start हो जाना है ठीक है और जो backend है वो yarn develop से start होगा यूकि वो strap fosse develop command जो है background में run करता है ठीक है तो ये दोनों ही start हो जाएंगे अभी ठीक है अगर आप लोगों नहीं यहाँ strapy की playlist access नहीं करी है अगर �
2:08
यहां पर मैं इसको बुक मार्क कर लेता हूं लो मैंने बुक मार्क नहीं करा है ठीक है लो मैंने कर ली आप भी कर लो मेरे साथ ठीक है तो यहां पर फ्रंट एंड को खोलेंगे यहां से बैक एंड को खोलेंगे यह बातें बताई नहीं जाती है और ओपन दे एडमिनिस्ट्र�
2:38
एक product page बनाओगा, क्योंकि product page जब बनाओगा, तब ही तो दिखेगा, कि मैं क्या कर रहा हूँ
2:44
tailblocks.cc पर जाओगा, tailblocks.cc में एक e-commerce का section होता है, इसमें यह वाला जो है
2:50
view code copy and paste, ok, because this is what I have
2:54
learned from my life, copy paste, hide, ok, where is my front end
3:01
here it is, slug.js, I put it in, and save it, after saving, I will get to see some errors
3:11
right click and change all occurrences, class is equal to, and I will make class
3:17
name is equal to, लेकिन उसके बाद मुझे कुछ अगर देखने को मिलेंगे और उन्हें रस से बचने हेतु मैं क्या करूंगा यहां प�
3:26
कुछ इस तरह से लगा दूंगा ठीक है तो यहां पर अभी भी अभी भी एशू है क्या अभी भी एशू है क्या क्या इशु है वही�
3:34
अब क्या इशू है अब क्या इशू है देखते हैं भी इशू है क्या नहीं आपको इशू नहीं है वाव दिस लुट्स लीन ठीक है त�
3:42
यहां पर देखो बहुत बढ़िया लग रहा है ठीक है तो अब मैं इस चाहता हूं कि यहां पर कोई भी लिख करें तो सबसे पहल�
3:47
पर प्राइस वगैरह चाहिए इसका यह जो प्रॉडक्ट है मेरा इस प्रॉडक्ट को मैं फेच करूंगा फिर यहां पर ए�
3:51
एड टू कार्ट बटन बनाऊंगा और एक बाय नौ बटन बनाऊंगा ठीक है लेकिन उससे पहले मैं क्या करूंगा इसको जर�
3:57
फोन में देखों कैसी दिख रही है फोन में भी अच्छी दिखनी चीज ज्यादार लोगों कстройप्पोन होता है सबके आप मोबाइ�
4:03
नहीं होता एफ फ्यू मॉमेंट्स लेटर आउट सॉरी कंप्यूटर नहीं होता ठीक है अ मैं आऊंगा यहां पर अपने फ्रं�
4:11
है और जो मेरा बटन है जहाँ पर B U T T O N बटन लिखा हुआ ह�
4:15
वहाँ पर मैं एक और बटन लिखाऊँगा एक जगह buy now लिखूँगा एक जग�
4:19
check out लिखूँगा ठीक है तो इसको सरा control D करके देखते है�
4:23
control D करके देखा इस बटन की copy बनाई और copy बनाने के बा�
4:29
यहाँ पर यह कुछ ऐसा दिख रहा है definitely इसको थोड़ा चोटा करूँग�
4:32
मैं ठीक है जो px है उसको 2 कर दूँगा जो कि मैं definitely
4:36
इसको छोटा करना चाऊंगा और अब देखता हूँ कैसा दिख रहा है यहाँ ठीक ह�
4:40
तो अगर मैं इसको Apple iPhone में देखूं तो कैसा दिख रहा है स्क्रॉल हो जाओ भाईय�
4:46
अच्छा इसको मैं fit कर देता हूँ fit to window हाँ तो ये थोड़ा दूर दूर हो गय�
4:50
दूर दूर क्यों हो गया यार ये मैं इसको थोड़ा चिपकाते हुए रखना चाहता हू�
4:55
अच्छा ये तो एक flex box है और इस flex box के अंद�
4:59
का एक item है ये ठीक है तो हम इसको ठीक कर सकते हैं मैं बताता हूँ कैसे हम ए�
5:03
और flex box बनाएंगे हम यहाँ पर लिखेंगे div.flex ठीक है और इसके बा�
5:09
हम यहाँ पर इसको save करेंगे ठीक है ठीक है और इसके बाद यह ऐसे दिखेगा ठीक है इसमें मार्जिन भी देंगे ठीक है मार्जिन कितनी देंगे इसमें MX2 दे देता हूँ ठीक ह�
5:24
और MX2 देने के बाद यह ऐसे दिख रहा है ठीक ह�
5:28
लेकिन एमएक्स टू देने के बाद भी इससे चिपक क्यों रहा है यह फिटीएट डॉलर से चिपक क्यों रहा है तो हम एक का�
5:38
करेंगे जो मैंने ग्लास इग्ल टू फ्लेक्स दिया है इस पर भी एमएक्स टू दे देंगे ठीक है ठीक है और यह जो बटन है इसमे�
5:47
चाहिए क्या करेंगे एक में तो बाई लिख देंगे और एक में हम लिख देंगे चेक आउट ठीक है ठीक है तो अब क्य�
5:57
करेंगे ना कि इसको सेव करके हम देखेंगे कि फोन में ऐसा दिख रहा है ठीक है मुझे पता है बहुत बार बोल दिय�
6:02
चाहिए वेन ने कोई बात नहीं ठीक है दिक्केचर इन दर राइट यहां पर प्रोटक्ट का नाम आना चाहिए प्रोडक्ट क�
6:09
डिस्क्रिप्शन आना चाहिए कलर कुछ इस तरह से दिख रहा है बढ़िया यहां पर जो भी कलर है वह दिख जाना चाहिए प्रोडक्�
6:14
और यहाँ पर size वगैरह दिख जाना चाहिए अच्छा जो products है वो मैंने यहाँ पर कुछ इस तरह से बनाया ह�
6:19
तो बहुती बढ़िया यहाँ पर यह दिख रहा है ठीक है तो हम लोग यहाँ पर products page पर आ ग�
6:24
product page पर भी आ गए अब जो product page पर हम लोग आ रहे है�
6:27
तो हम, server side props, मैं सल्च नहीं करूँगा, मैं यही से copy कर लूँगा
6:31
जो get server side props है, यहाँ से हम लोग क्या करेंगे, उठाएंगे अपना, इस product के बारे में info
6:37
ठीक है, इस product के बारे में, मैं info उठाऊँगा, कुछ इस तरह से, आपको दिखाता हूं get server side props मैंने यहाँ पर किया यह मेरा context है और मैं करूँगा क्या है लिखूंग�
6:48
product करूँगा product ठीक है और product slash या फिर लिखूंगा question mark या मेरा postman कहा गया postman तु�
6:57
साथ ही हो postman तुम बहुत बढ़िया इंसान हो जो कि तुम तुम्हारे through मैं एक product क�
7:05
fetch कर सकता हूँ get product ठीक है अगर मैं get product add product delete एक single product
7:11
अगर मुझे चीनी है तो मैं कैसे करूँगा एक इसको duplicate करूँगा right click duplicate duplicate
7:17
और यहाँ पर get product by slug कर दूँगा इसको ठीक है get product by slug
7:23
और यहाँ पर मैं क्या करूँगा कि जो get request है वो कहाँ पर जा रही ह�
7:27
local host पर जा रही है get product by slug करूँगा यहाँ पर डालूँगा और इसको send करूँगा product
7:33
question mark लिखूँगा यहाँ पर slug is equal to और सेंड करके देखता हूं नोट फाउंड दिखा रहा है बाय देवे स्लग क्या है इसका यह भी देखना चाहूंगा त�
7:44
by slug search strapi documentation strapi search fetch by
7:59
slug हाँ slug यही चाहिए slug system fetch article by slug किस तरह से करना है य�
8:06
तो यहाँ पर देखो इन्होंने बताया है कि किस तरह से करना है fetch article by slug
8:10
question mark filter slug is equal to ok cool तो यह ह�
8:14
देखो कोई भी चीज़ याद रखने की ज़रूरत नहीं है मैं बार बार बोलूँगा एक बार बोलूँगा हजार बार बोलूँग�
8:18
ठीक है product authorization token है उसको दुबारा से copy कर लेंगे यहाँ पर bulk edit में जाकर same काम हम यहाँ पर करेंग�
8:42
bulk edit में जाकर और paste कर देंगे कोई दिक्कत नहीं send करेंगे wow it works ठीक है तो यह ज�
8:52
slug है यह मुझे मिल गया ठीक है यह product slug का मुझे मिल गया तो मैं यहाँ पर क्या करूँग�
8:58
जो मेरा यूअरल है उसको अरे जो मेरा यूअरल है उसको यहां पर पेस्ट कर दूंगा ठीक है कुछ इस तरह से और यह करन�
9:05
के बाद मैं लिखूंगा यहां पर प्रॉडक्ट जो होगा मेरा वह क्या होगा प्रॉडक्ट डेटा जीरो ठीक है प्रॉडक्�
9:12
डाटा जीरो प्रोडक्ट डेटा जीरो अब आपको प्रोडक्ट डॉट डेटा जीरो का मतलब है बिसीली के लिए मुझे डाट�
9:19
मिल जाएगा जो डिटा के अंदर और इसका जो यह वाला ऑब्जेक्ट है वह मिल जाएगा ठीक है जो यह एलेमेंट होन�
9:24
लग लग का तो यह मैंने कर दिया अब मैं क्या करूंगा यहां पर इस प्रोडक्ट को लिया होगा में डी स्ट्रक्चरिं�
9:30
सिंटेक्स का इस्तेमाल करूंगा और मैं यहां पर प्रोडक्ट को लिया होगा ठीक है इससे क्या होगा कि जो प्रॉब्�
9:35
अपने दर्श से प्रोटक्ट है वह निकला आएगा ठीक है बढ़िया लेकिन मुझे यहां पर चाहिए स्लग ठीक है स्लग भी त�
9:41
नहीं है ऐसे ग्लब में डारेट ली हाटको थोड़े ना कर सकता हूं तो मैं यहां पर लिखूंगा कॉन्टेक्स्ट डॉ�
9:47
स्लग कॉन्टेक्स्ट टॉट लाइफ एम नॉट रॉंग कॉन्टेक्स्ट टॉट क्वेरी कॉन्टेक्स्ट टॉट क्वेरी क्वेरी राइट हा�
10:11
लोग करें करते हैं स्टेप बास टेप करते हैं इसको रिलोड करूंगा और यहां पर यह करद प्रोडक्ट रिटर्न फ्रॉ�
10:17
थेस कैन नॉट सीरियलाइज प्लीज यूज नल और ऑफिस वल्यू क्या है रीजन अंडिफाइंड के नॉट पिसीरियलाइज त�
10:24
निफान रहा है ऐसा क्यों देखता हूं देखता हूं तो मैं समझ गया दिक्कत यार यह दिक्कत यार यह ना कि जो मैंन�
10:32
कोंटेक्स टोट क्वेरी किया ना इकलत है कोंटेक्स टोट क्वेरी का गया मेरा कंसोल डॉट लॉग तो यह मुझ�
10:40
प्रेंट होकर दे रहा है context.query.slug लिखना है मुझे query.slug अब हो जाएग�
10:46
अब हो जाएगा ठीक है अब हो जाएगा दिखाता हूँ आपको हाँ अब हो गया ठीक है तो product मुझे मिल गया है ठीक ह�
10:51
लेकिन ये मुझे कैसे errors दिखा रहा है जीप से चले यह इन errors को भी ठीक कर लेंग�
10:56
थोड़े बहुत हमारे errors आ रहे हैं क्योंकि मैंने यह stroke line
11:01
join और यह सब चीज़े ठीक से करी नहीं है SVGs में ठीक ह�
11:06
कर लेंगे वो भी कर लेंगे ठीक है कोई दिक्कत नहीं है औ�
11:10
यहाँ पर अभी क्या करते हैं ना कि जो product है वो मुझे मिल चुका ह�
11:14
तो यहाँ पर मैं क्या करूँगा brand name में लिख दूँगा my shop ठीक है औ�
11:21
shop को यह small letters में लिख देता हूँ यह product का नाम आजाएग�
11:25
ठीक है यहाँ जाएगा product.title title था ना हाँ title था शाय�
11:33
नी dot attributes dot title करना पड़ेगा dot attributes dot attributes टॉट एट्रिब्यूट्स टॉट टाइटल की क्या है
11:43
कॉमा एक्सपेक्टेड ये कैसा मज़ाग है? ये मज़ाग मुझे पसंद नहीं आया
11:48
प्रॉड़ड़क्ट यहां से आया, टॉट एक्सपेक्टेड की है, मैंने, comma expected क्यों दिखा रहा है ये मेरे को
11:55
ओके, तो मैंने double bracket लगा दिया है, single bracket लगेगा, बस इस तरह से, हाँ, ठीक है
11:59
हाँ, तो ये मैंने किया, तो देखो, यहाँ पर gloves आ गया, ठीक है, इसका मतलब ये चीज काम कर रही है
12:03
तो मैं इसको copy करूँगा जहां जहां जो जो चीज़ें हैं वो मैं आपको लगा दूँगा ठीक है तो यह एसवीजी लगी वीना कलर की इनको मैं हटाऊंगा यह मुझे अभी नहीं चाहिए मैं इसको implement नहीं करना चाहता भी इसको मैं हटा देता हूँ लेकिन जो बाकी चीज�
12:33
और यहाँ पर इसका प्राइस आएगा प्राइस ठीक है यहां पर मैं डाल दूंगा प्राइस कुछ इस तरह स�
12:43
आप मुझे बताया दिख नहीं रहा है आप लोगों को लेकिन हम करेंगे जूम ताकि आप लोगों को दिखे क्या प्राइस ठीक ह�
12:51
अच्छा लगा है कंट्रोल ऑल्ड डॉलर बड़ी है रुपीस का साइन आ जाता है ठीक है और यहां पर तो रुपीस थ�
13:02
टीटरी में आपको दास्ताने खरीद लेना अभी जो कलर है साइज है इसको मैं हटा रहा हूं भी यहां से ठीक है आ�
13:08
इसको implement कर सकते हो मैं फिल्ट नहीं कर रहा हूं आप चाहते यहां पर जावास कर लिखकर इसक�
13:12
फंक्शनल बना सकते हो बहुत चीजें की जा सकती है लेकिन मैं यहां पर चीजें को सिंपल रखना चाहूंगा औ�
13:17
यह वाला जो डिव है हमारा साइज वाला इसको मैं कमेंट आउट कर दूंगा ठीक है और अभी देखो ऐसा दिख रहा है या फिर एक काम करता हूं यार मैं इसको कमेंट आउट नहीं कर रहा हूं आप लोग इसको इंप्लेमेंट करने की कोशिश करना अभी मेरा जो टार्गे�
13:47
और एक कहां गया बाई गिरा ठीक है add to cart और check out
13:54
check out से क्या होगा check out वाला page खुलेगा add to cart से यह item cart में add हो जाएगा ठीक ह�
13:58
कुछ इस तरह से होगा तो चलो यार बहुत बढ़िया अभी तक सब कुछ मुझे बढ़िया दिख रहा ह�
14:02
अब मैं यहाँ पर करूँगा कि अंडरस्कोर अप डॉट जेस के अंदर आऊंगा और एक कार्ट स्टेट बनाऊंगा और मैं यहाँ पर लिखूँगा क्या यूज एफेक्ट ठीक है यूज ए transcert लेकर आऊंगा यहाँ पर और उसी के साथ साथ हम क्या करेंगे यहाँ पर बन�
14:32
एक ऑब्जेक्ट रहेगा इन फैक्ट एरे ऑफ ऑब्जेक्ट रहेगा अब इफ नॉट रॉन एक काम करते हैं देखो इस त�
14:39
इंप्लेमेंटेशन डिपेंड करता है इसको एक एरे रख लेते हैं ठीक है एक एमटी एरे ठीक है एक एमटी एरे मैंने यहा�
14:44
बना दिया कार्ड को अब मैं यहां पर क्या करूंगा कुछ फंक्शन बनाऊंगा मैं आप लिखूंगा आट टू कार्ड आइट�
14:51
इज एक्वल टू एक फंक्शन ठीक है एक फंक्शन और यह फंक्शन जो है एक एरो फंक्शन रहेगा और यहां पर मै�
15:00
नाम करता हूं यार मैं कुछ इस तरह से लिखूंगा इसको है टू कार्ट इस एकॉल टो एक एरो फंक्शन ठीक है उस�
15:06
के साथ साथ रिमूव फ्रॉम कार्ट एक रिमूव फ्रॉम कार्ट एक फंक्शन रहेगा और एक लियर कार्ट फंक्शन रहेग�
15:14
तो मैं यहाँ पर clear card नाम से भी function मनाऊंगा, ठीक है
15:18
बहुती basic तीन functions, जो कि हर card को चाहिए होते, clear card हो गया, remove from card हो गया, add to card हो गया, ठीक है, बढ़िया
15:26
अब मैं यहाँ पर क्या करूँगा, जो भी item यहाँ पर डाला जाएगा, टू कार्ट जो है मैंने यहां पर लिखा बने काम करूंगा यहां पर रिमूव फ्रॉम कार्ट में क्वांटिटी भी डा�
15:34
let new cart is equal to cart or new elements to add to the array antique
15:51
एक काम करता हूं यहां पर लिखता हूं आईटम ठीक है जो भी आइटम हम इसमें ऐड करना चाहते हैं वह यहां प�
15:59
जाने का ठीक है बढ़िया और यह करने के बाद रिमूव फ्रॉम कार्ट में मैं क्या करूंगा एक बड़ा पर सेट कार्�
16:05
कर दूंगा मैं और यहां पर न्यू कार्ट करूंगा ठीक है और इसमें कोई भी इंप्लेमेंटेशन चेंज होगा वह भ�
16:12
आप लोग को बता दूंगा ठीक है तो मैं यहां पर क्या करूंगा लेट न्यू कार्ट इस एक्वल टू कार्ट करूंगा पहले औ�
16:19
मैं एक चीज जानना चाहता हूं यार कि जो पूछ होता है ना एरे का पूछ मेथड होता है तो यह मैंने कर दिया न्य�
16:24
इसे बटना चाहूंगा कि ऑरिजिनल एरे को चेंज करता है ठीक है तो नियुक्त इसे बटना चाहूंगा यहां पर लिख�
16:30
न्यू कार्ड पुष आइटम सेट कार्ट न्यू कार्ड ठीक है बढ़िया अब रिमूव फ्रॉम कार्ड की जावर बात आती है हम क्य�
16:36
लेंगे कि सिम चीज करेंगे वह समझ लोग यह करेंगे एरे में से रिमूव कर देंगे और मैं एक चीज आप लोगो�
16:42
बताना चाहूंगा यहां पर कि ना आप क्या करना करो ना यहां पर इंस्पेक्ट कर लिया करो चीजों को मान ल�
16:46
एरे है ठीक है इसमें वन टू और थ्री है ठीक है अब मैं ए डॉट पुश फाइब करता हूं मान ल�
16:54
और फिर मैं एक को प्रिंट करता हूं तो ऑरिजिनल एरे मेरा चेंज हो रहा है ठीक है तो मैंने यहां प�
16:59
यूज इफेक्ट के अंदर कंसोल लॉक डाल दिया और यूज इफेक्ट यूज टेट दोनों को इंपोर्ट कर लिया और यह करने के बाद मुझे कुछ इस तरह से दिखाई पड़ रहा है ठीक है बहुत बढ़िया और यह करने के बाद मैं क्या करूँगा कि कुछ फंक्शन स�
17:29
रहा हूं एड टो कार्ट इस एक्वल टो एड टो कार्ट ठीक है और सेम चीज मैं यहां पर लिखूंगा क्लियर कार्ट इ�
17:36
एक्वल टो ठीक है क्लियर कार्ट इस एक्वल टो मैंने यहां पर किया और मैं यहां पर लिख दूंगा क्लियर कार्�
17:42
ठीक है तो यह तीनों function मैंने pass कर दिया आगे अब मैं क्या करना चाहता हूँ जो nav bar है उसके अंद�
17:48
मैं एक चीज़ यहाँ पर add करना चाहता हूँ contactors के side में जो की होने वाला है मेरा cart
17:52
ठीक है और यहाँ पर मैं क्या करूँगा अभी तो zero लिख दूँग�
17:56
जैसा आपको दिखाने के लिए यह कुछ इस तरह से दिखाई पड़ेगा और यह जो है ना यह मेरा slash kart पर जाएग�
18:03
और यह ना डाइनामिकली अपडेट होना चाहिए kart की जो भी मेरी length है ठीक है तो मैं क्या करूँग�
18:08
यहाँ से kart को लूँगा यहाँ पर लिख दूँगा, kart.length, ठीक है
18:13
और यह एक javascript है, तो इसको कुछ इस तरह से करना पड़ेगा, ठीक है
18:18
बढ़िया हो गया न, हाँ बढ़िया हो गया, अब इसको kart मिल करा है, इसको यहाँ पर kart भी देना पड़ेगा
18:23
kart is equal to kart, और same चीज मुझे यहाँ भी करनी पड़ेगी, यह कार्ट जो है
18:28
देनी पड़ेगी, किसको देनी होगी, component को देनी होगी, ठीक है, अभी मैं आपको दिखाता हूँ
18:33
यह zero हो गया, अब मैं इसे आता हूँ कि, जब भी मैं यहाँ पर add to cart करूँ किसी पर item को तो यहाँ पर यह 1, 2, 3, 4 मुझे दिखा दे, ठीक है, तो मैं क्या करूँगा add to cart जब कोई भी करेगा, मैं आउँगा यहाँ पर product.js नहीं कि slug.js जो है मेरा single product के लिए, कोई भी click करेगा इस पर, इस button पर, add to cart पर, मैं simply क्या कर�
19:05
कार्ट मैं एक मेथड बनाता हूं और यहां पर क्या करूंगा मैं एड टो कार्ट के अंदर डालूंगा यह आइटम य�
19:12
पर्टिकुलर आइटम ठीक है मान लो मैं यहां पर डाल देता हूं यहां पर इस तरह से आइटम लिख देता हूं फिर ए�
19:18
लिख देता हूं इस तरह से वन ठीक है यह काम करते है वन लिख देता हूं ठीक है कुछ इस तरह से और उसी क�
19:25
साथ साथ यह मैंने लिख दिया वन और इसी के साथ साथ मैं क्या करूंगा एड टो कार्ट में एक चीज और थ�
19:31
वांटिटी थी शायद फैम नॉट रॉन क्या थी आट टो कार्ट में आइटम्स वांटिटी ठीक है तो यहां पर मैंने क्या किय�
19:37
था कि न्यू कार्ट एग्ल टो कार्ट न्यू कार्ट डॉट पुष आइटम ठीक है तो यह काम करते हैं यहां पर एक फॉर लूप क�
19:44
प्रयोग करेंगे और यह फॉर लुट कब तक चलेगा फॉर लुट चलेगा यह क्यों तीवाई तक ठीक ह�
19:50
कि क्यों तीवाई तक चलेगा यह और इसके अंदर अब क्या करेंगे न्यू आइटम में पूछ करते रहेंगे आइटम ठीक ह�
19:55
तो अगर किसी ने 10 बार इसको चलाया तो 10 बार item push हो जाएगा ठीक है तो कुछ इस तरह का काम हम लोग करेंगे और ये मैं run करना चाहूँगा एक arrow function के अंदर से ठीक है तो ये मैंने कर दिया अब मैं यहाँ पर click करूँगा अगर add to cart पर तो यह गया add to cart is not defined which is not a problem क्योंकि मैं�
20:25
देखने चाहूंगा अपने कंसोल को क्यों उसमें कोई एरर तो नहीं है एड टू कार्ड इस नॉट डिफाइन डिलोड करक�
20:31
दुबारा से आट टू कार्ड पर मैं क्लिक करूंगा और जो स्ट्रोक वेट देना इसको मैं ठीक कर देता हूं तो वहां कु�
20:37
देखने को मिल रहे हैं stroke line cap हो गया जैसे इसको ऐसे लिखना होग�
20:43
stroke line join हो गया इसको ऐसे लिखना होगा और stroke width हो गया इसको ऐसे लिखना होग�
20:49
इसको मैंने control F ही कर लेता हूँ change all occurrences औ�
20:53
इसको कुछ इस तरह से कर लेता हूँ ठीक है same for this one
20:59
change all occurrences और same for line join change all occurrences
21:10
अब ठीक हो जाना चाहिए यहाँ तो यहाँ भी error आएगा देखते है�
21:17
आएगा तो देखा जाएगा add to cart पर मैंने click किया कुछ हुआ नही�
21:21
यह cart update होनी चाहिए थी ना update क्यों नहीं हुई add to cart पर मैंने click किया कुछ नहीं हु�
21:26
क्योंकि कोई दिक्कत नहीं है देखता हूं मैं भी क्यों नहीं हुआ है तो बिसेज लिए मैं आट टो कार्ट पर क्लिक कर रहा हूं ठीक है यह नहीं कि आट टो कार्ट वाला फंक्शन जो है वह चला रहा हूं तो यह वाला फंक्शन नहीं होना चाहिए आट टो कार्ट ठीक ह�
21:56
रन भी हो रहा है कि नहीं हो रहा है तो मैंने इसको रिलोड किया आट टो कार्ट टो कार्ट तो रन हो रहा है त�
22:01
डेफिनेटली यह कार्ट को चेंज भी कर रहा होगा न्यू कार्ट पुष मैंने किया कुछ इस तरह से मैंने न्यू कार्�
22:06
इकल टू कार्ट किया न्यू कार्ट पुष आइटम किया अगर पर कंसोल टॉट लॉग न्यू कार्ट करूं कंट्रोल डी करक�
22:16
यहां पर मैं देखना चाहता हूं कि आप चल गया रहा है ठीक है रिलोड किया एड टू कार्ट किया और यह न्यू कार्ट त�
22:26
जुई, set cut, new cut किया, लेकिन हमने समझ लिया दिक्कत क्या आ रही है
22:30
कि जब भी मैं यहाँ पर cut is equal to cut कर रहा हूँ, तो यह जो component है
22:34
वो reload नहीं हो रहा है, ठीक है, समझ लिया हूँ, और इसको करने के लिए मैं क्या करूँगा
22:38
यहाँ पर लिखूँगा key is equal to, और यहाँ पर मैं लिख दूँगा reload key
22:43
अब आपको रिलोड की क्या है मैं बताता हूँ रिलोड की क्या ह�
22:47
मैं set state snippet यूज़ करना चाहूँगा use state snippet sorry use state snippet औ�
22:57
reload key set reload key is equal to reload key initially हमारी वन रहेग�
23:02
reload key और यहाँ पर मैं लिखूँगा set reload key और यहाँ पर मैं लिख दूँगा mat.random
23:12
ठीक है अब आपको क्योंकि चल गया रहा है यार क्या लिख दिया देखो मैंने ये किय�
23:17
add to card पर क्लिक किया और ये ठीक हो गया देखो card 1 हो गय�
23:21
आपको क्योंकि ऐसा क्या कर दिया कि यार अब ये काम करने लग गया
23:43
जब भी किसी भी element की key change होती है तब क्या होता है कि वो component दोबारा से reload हो जाता ह�
23:50
ठीक है तो मैंने क्या किया इसकी key को change कर दिया key को मैंने मना दिया एक state
23:53
ठीक है जो की reload की थी जिसकी initial value 1 थी लेकिन जब भी मैं आप इस component को reload करना चाहूँग�
23:59
इसको सेट कर दूंगा किसी random value के और जायद सी बात है वो random value different रहती है ठीक है तो different होने के बाद क्या होगा कि ये refresh हो जाएगा ठीक है यह बहुत कम probability होती है कि एक random number exactly same दुबारा से generate हो जाएगा ठीक है क्योंकि ये random number जो होता है ये को जिस तरह से दिखता है आपको दिखाता �
24:29
यह नमपर नमकिन है ठीक है तो हम इस पर रिलाइफ कर सकते हैं डेफिनेट यह बहुत सारे डिजट्स का नंबर है ठीक हैceğiz
24:35
अगर चेक आउट करूँ तो चेक आउट पर क्लिक करने पर क्या होना चाहिए हमारा चेक आउट पेज खुलना चाहि�
24:40
तो चेक आउट डोट जेस बना लेते हैं उसके लिए ठीक है तो मैं यहाँ पर चेक आउट डोट जेस बनाऊँग�
24:44
ठीक है यहाँ पर checkout.js हम लोग पना देंगे और यहाँ पर हम क्या करेंग�
24:50
checkout.js पर link करेंगे card.js पर नहीं checkout पर link करेंगे ठीक ह�
24:57
और मैं यहाँ पर क्या करूँगा कि checkout पर redirect कर दूँग�
25:01
कोई भी इंसान अगर click करेगा product page से तो वो सीधे check out वाले page पर चला जाएग�
25:07
ठीक है तो मैं यहाँ पर आता हूँ और check out वाले page प�
25:11
लेकर जाना चाहूँगा user को तो मैं विशेली क्या करूँगा कोई भी अगर click कर रहा ह�
25:16
मेरे check out पर कहा गया check out का button यार मिल क्यों नहीं रहा है हाँ ये रह�
25:20
चेक आउट यह ठीक है तो मैं क्या करूंगा यहां पर कोई भी क्लिक करेगा ऑन क्लिक इज एकॉल टू मैं ए�
25:27
फंक्शन रन करूंगा फंक्शन के अंदर मैं लिखूंगा राउटर डॉट पुष ठीक है और मैं क्या करूंगा स्लै�
25:35
चेक ऑट और राउटर क्या है वह भी मुझे ऊपर डिफाइन करना पड़ेगा तो मैं यहां पर लिखूंगा का नहीं लिखा हुआ है राउट�
25:44
जो लुटा कुल ठीक है अब मैं क्या करू epi shop पर आऊंगा कार्ड पर क्लिक करूंगा यह कर दिफॉर्ड कंपोनें�
25:51
इस नॉडर एकंपोनेंट पेज लाइट चेक और दिखिए कैसा मजाक यार यह मजाक कैसा है यह कोई मजाक नहीं है आर ए�
26:02
एक अब ठीक है ठीक है अब ठीक है अब इसको रिलोड करूंगा और चल गया ठीक है चेक आउट अब कोई भी नही�
26:12
जाना कि इस कार्ड पर क्लिक करता है इसमें आप किसी प्रोडक्ट को एक्सप्लोड कर रहे हैं आपने कार्ड प�
26:15
लिया आप चेक आउट पर आ जाओगा ठीक है या फिर आप मान लोग बाय ना कर रहे हो आपने एड टो काट किया 123456789
26:23
101112 इतनी बार इसको एड किया फिर चेक आउट कर दिया तो चल नहीं रहा यार अच्छा मजा के यह हो गया यहां प�
26:32
अब अपने चेक आउट में क्लिक करें तो मैंने क्या किया है राउटर डॉट पुष रन तो किया यार तो चल क्यों नहीं रहा है यह भी देखना पड़ेग�
26:38
तो विसिली हो गया रहा है कि यहां पर router.push अगर मैं कुछ इस तरह से slash checkout चलाता हू�
26:46
तो इसको actually change कर देना चाहिए था इसका बात कौन से button पर लगा दिया मैंने router.push checkout
26:55
मुझे लगा ना चेक आउट वाले पर अब चलेगा अब देखो अब चलेग�
27:00
अब मैं चेक आउट करूंगा देखो यहां पर आ गया ठीक है और एडट टू काट करूंगा तो डेफिनेटली इसका नंबर बढ़ जाएगा यहां पर आप देख सकते ह�
27:08
एक दो तीन चार पांच शायद नौट बहुत बढ़िया ठीक है तो बढ़िया चल रहा है अभी हमारा इसाब किताब ठीक है अब एक चेंज करूंगा यहाँ पर जहां मैं वन एड कर रहा था ना वहां मैं वन एड नहीं करूंगा अब मैं आपको स्लग एड करूंग�
27:20
तो अगर मैं आपको यहां पर दिखाऊं इंस्पेक्ट करूं रिफ्रेश करूं और यहां पर ऐड टू कार्ट करों तो ग्लव ऐड होगा ठीक है और मैं जितनी बार इसको ऐसे करूंगा इसमें ग्लव ऐड होता जाएगा एक एक क्वांटिटी ग्लव की ऐड होती जाएगी �
27:50
रहेगा और उसका price कितना है वो रहेगा उसको maintain मैं करूँगा ठीक है तो उससे क्या होग�
27:54
मैं आगे checkout वाले pitch पर compute कर पाँगा कि total cost कितनी है ठीक है तो मैं एक काम करत�
27:59
हूँ कि जब मैं add to cart कर रहा हूँ ठीक है कहां गया मेरा add to cart जब मैं add to cart कर रहा हू�
28:05
यार कंट्रोल ऐफ को यूज करना पड़ेगा, add to cart जब मैं कर रहा हूँ, तो यहाँ पर जो price है इसका
28:10
वो भी मैं यहाँ पर देतूं, ठीक है, और price क्या है, product.attribute.price, ठीक है
28:15
कुछ इस तरह से चलेगा यह, मैं यह चाहूँगा कि product.attributes.price, जो है वो यहाँ प�
28:21
add to cart हमारा ले ठीक है तो add to cart जो basically
28:25
function है हमारा यह price भी लेगा ठीक है और मैं क्या करूँगा push item नहीं करूँग�
28:31
एक array push करूँगा जिसमें item के साथ साथ price भी push होग�
28:35
ठीक है तो इसको अगर मैं अभी reload करूँ तो यहाँ प�
28:39
और एड टू कार्ट और यह देखो इसमें एरे है फिर दोबारा एड टू कार्ट इसके अंदर एक और एरे है और एरे मे�
28:45
क्या है ग्लव थर्डी थी ग्लव थर्डी थी ग्लव और उसका प्राइस ठीक है सेम चीज अगर क्रिकेट बैठ के साथ करू�
28:50
यहां पर थोड़ा सा issue है products वाले page पर देखता हू�
28:54
class is equal to use हो रखा है retlic change all occurrences करक�
28:58
इसको class name is equal to कर देता हूँ ठीक है reload करूँग�
29:06
अभी कह रहा है कि each list have a unique key prop
29:10
तो basically क्या होता है जब आप map यूज़ कर रहे हो ना तो आपको हर item को एक unique key देनी पड़ती ह�
29:20
रिलोड करूंगा और यह कह रहा है कि यह चूट बी यूनिक तो यह बिसिकली एक ऑब्जेक्ट है आइटम मैं काम करता हूं यार आइटम डॉट क्या दूं मैं सोच रहा हूं attributes.image.data attributes.title attributes.slug
29:36
दे देता हूँ ठीक है item.attributes.slug दे देता हूँ और अब यार यह error चला जाना चाहि�
29:44
चला गया ठीक है तो अब मैं अगर cricket bat ले कर आओंगा और इसको मैं add to cart करू�
29:48
तो यह देखो यहाँ पर एरे 110 आगे, अब मैं यहाँ पर products में आ जाओंगा और gloves को add करूँ
29:54
add to cart, मान लोग दो तीन बार मैं कर रहो हूँ add to cart, तो आप लोग देखो, यह एक बार bat add हुआ है, बागी time पर glove add हुआ है, ठीक है, बढ़िया
30:01
बहुत ही बढ़िया अब यहाँ पर हमने products page बना लिया हमन�
30:07
product page बना लिया हमने checkout page भी बना लिया आने वाले वीडियोस में हम लोग क्या करेंगे इसमें logic
30:13
add करेंगे ठीक है यह नहीं कि checkout page पर क्या होना चाहिए बिसिकली checkout page पर हम ए�
30:17
form बनाएंगे, सबसे पहले तो card दिखाएंगे, सारे items दिखाएंगे, अपने card के, औ�
30:21
उसके बाद हम लोग क्या करेंगे, कि checkout page पर user की detail लिखेंगे, कि या�
30:27
आप कहाँ पर बंगाना चाहते हो, समान user से पूछेंगे, आपका नाम क्या, आपका phone क्या
30:31
आपका email क्या है और वो finally order को place कर पाएगा so I hope कि आप लोगों मज़ा आ रहे है�
30:35
इस series में strapi एक बहुती कमाल का tool है मेरे साथ से अगर strapi नहीं होता तो हम इसक�
30:41
इसकी API's को manually बना रहे होते होते हैं जो कि मेरे साथ थोड़ा cumbersome रहता है ठीक है तो strapi ने काफ�
30:47
यहाँ पर help कर दी ठीक है एक बड़ी है headless CMS है मुझे बहुत मदा आ रहा है यार यूज करने में य�
30:53
फिर टोमेटी रिस्पॉंसिफ भी है जिसके लिए मैं धन्यवाद देना जाऊंगा tailblogs.cc को क्योंकि यहाँ स�
30:58
पोस्ट पर भी कमाल की चीज है तो सब कुछ जो हम इस्तेमाल करते हो कमाल कर या आप लोगों ने अगर यह प्लेलिस्�
31:03
प्राशिक दिखाई थी तो इसको जरूर कर लेना अभी के लिए इस वीडियो में इतना है गाइस थैंक य�
31:07
सो मजबूर्ड विडियो एंड आई विल सी यू नेक्स्ट आई �
#Business Operations
#Web Design & Development
#Web Services