स्क्रैच से एक ईकॉमर्स साइट बनाएं

Sep 13, 2025

कैसे करना है

हाल के वर्षों में ईकॉमर्स इतना लोकप्रिय हो गया है अब इसके बिना भविष्य की कल्पना करना मुश्किल है। इंटरनेट की शक्ति ने ग्राहकों के साथ व्यवसाय और ब्रांडों के लिए एक हवा और ईकॉमर्स के लिए एक ब्रीज़ को जोड़ दिया है, जो कि अधिकांश भाग के लिए उत्पादों को वितरित करने का सबसे आसान तरीका है।

फाउंडेशन की इमारत ब्लॉक कोडित यूआई घटकों की लाइब्रेरी को अंतिम उत्पाद तक पहुंचने में आसान बनाने के लिए डिज़ाइन किया गया है। टेम्पलेट्स के विपरीत, बिल्डिंग ब्लॉक यह निर्धारित नहीं करता कि आपकी साइट को कैसे दिखना चाहिए या संरचित किया जाना चाहिए। वे आपको अपने स्वयं के कस्टम लुक बनाने और बहुत तेज़ी से महसूस करने के लिए टूल प्रदान करते हैं।

इस ट्यूटोरियल में, आप सीखेंगे कि ईकामर्स किट का उपयोग करके स्क्रैच से एक स्थिर ईकॉमर्स वेबसाइट कैसे बनाएं, बिल्डिंग ब्लॉक का एक क्यूरेटेड संग्रह जो आपको विशिष्ट प्रकार की वेबसाइटों का निर्माण करने में मदद के लिए डिज़ाइन किया गया है। हालांकि यह मचान एक प्रोटोटाइप है, भवन ब्लॉक जो हम उपयोग कर रहे हैं और लेआउट हम किसी भी सिस्टम पर लागू किए जा सकते हैं।

शुरू करना

[3 9]

[4 9]

पहली चीज जो हमें करने की ज़रूरत है वह साइट बनाने के लिए एक वातावरण स्थापित किया गया है। इस ट्यूटोरियल के लिए, आपको पहले node.js. को डाउनलोड करने की आवश्यकता होगी। एक बार स्थापित हो जाने के बाद, आप कमांड का उपयोग करके नींव सीएलआई स्थापित करना चाहेंगे एनपीएम इंस्टॉल-जी फाउंडेशन-सीएलआई ।

अब जब आपके पास आपके सिस्टम पर नींव स्थापित है, तो कमांड फाउंडेशन नई ईकॉमर्स-साइट का उपयोग करके एक नई नींव परियोजना शुरू करें। निम्न सूची में, पहले विकल्प का चयन करें, 'एक वेबसाइट (साइट्स फॉर साइट्स)', हमारे प्रोजेक्ट नाम 'ईकॉमर्स-साइट' में टाइप करें, और उसके बाद 'ज़र्ब टेम्पलेट' का चयन करें। यह एक नींव टेम्पलेट और विकास सर्वर शुरू करेगा ताकि हम आसानी से हमारी वेबसाइट का निर्माण शुरू कर सकें। Daud एनपीएम शुरू परियोजना चलाने के लिए टर्मिनल में।

इसके बाद, आइए टेक्स्ट एडिटर में इसे खोलकर हमारी नई परियोजना के कोड के पीछे एक नज़र डालें। यहां, आपको 'src / पेज / index.html' में एक नमूना पृष्ठ मिलेगा जिसमें कुछ डिफ़ॉल्ट टेम्पलेट सामग्री शामिल है। हम यहां सभी कोड को हटाने जा रहे हैं।

संपादक का नोट: अपने व्यवसाय के लिए एक ईकॉमर्स वेबसाइट डिजाइन की तलाश में? यदि आप जानकारी की तलाश में हैं कि आप जो भी सही हैं, उसे चुनने में आपकी सहायता के लिए, नीचे दिए गए प्रश्नावली का उपयोग विभिन्न विक्रेताओं से मुफ्त में जानकारी प्रदान करने के लिए करें:

एक किट स्थापित करना

कोई कोड लिखने से पहले, हम फाउंडेशन की ईकॉमर्स किट में फाउंडेशन की सीएलआई के साथ खींचने जा रहे हैं। अपने टर्मिनल पर जाएं और कमांड फाउंडेशन किट का उपयोग ईकॉमर्स इंस्टॉल करें।

यदि यह आदेश काम नहीं करता है, तो डबल-जांच करें कि आपकी नींव सीएलआई 2.2.3 पर अपडेट की गई है। यह जांचने के लिए कि आप किस संस्करण पर हैं, भागो फाउंडेशन-वी आपके टर्मिनल में। यदि आपको अपडेट करने की आवश्यकता है, तो बस क्लियो के साथ अनइंस्टॉल करें एनपीएम अनइंस्टॉल-जी फाउंडेशन-सीएलआई और इसके साथ पुनर्स्थापित करें एनपीएम इंस्टॉल-जी फाउंडेशन-सीएलआई ।

यह सिर्फ हमारे ईकॉमर्स किट के अंदर सभी बिल्डिंग ब्लॉक डाउनलोड किया! जब भी आप एक बिल्डिंग ब्लॉक स्थापित करते हैं, तो इसमें दिखाई देगा SRC / आंशिक / भवन-ब्लॉक । आपको पता चलेगा कि आपकी किट सही ढंग से स्थापित हो गई है यदि सभी बिल्डिंग ब्लॉक स्वचालित रूप से आपके द्वारा आयात किए गए हैं app.scss फ़ाइल।

इनमें से कुछ बिल्डिंग ब्लॉक में फ़ॉन्ट से आइकन शामिल हैं, इसलिए आप या तो उन्हें मैन्युअल रूप से इंस्टॉल करना चाहते हैं या अपने सीडीएन को जोड़ सकते हैं & lt; हेड और जीटी; आपकी साइट का। ऐसा करने के लिए, नेविगेट करें src / लेआउट / default.html और जोड़ & lt; लिंक href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "स्टाइलशीट" & gt; के बीच & lt; हेड और जीटी; टैग।

साइट को मचान

[10 9]

[4 9]

चलो इमारत में जाओ! हमारे किट स्थापित के साथ, इन अगले कुछ कदमों को लेगो के साथ खेलने की तरह थोड़ा महसूस होगा: अपनी परियोजनाओं में, आप उन सभी का उपयोग करना चुन सकते हैं, या आप केवल एक चयन का उपयोग कर सकते हैं। अपने ड्रीम ईकॉमर्स लेआउट को प्राप्त करने के लिए बिल्डिंग ब्लॉक मिश्रण और मैच करने के लिए स्वतंत्र महसूस करें।

इस ट्यूटोरियल के लिए, पहले दो ब्लॉक हम शुरू करेंगे हेडर और प्रोमो हीरो। ऐसा करने के लिए, हम हैंडलबार्स आंशिक तंत्र का उपयोग करने जा रहे हैं। हमारी खाली index.html फ़ाइल में, आंशिक रूप से फेंक दें {{& gt; ईकॉमर्स-हेडर}} तथा {{& gt; ईकॉमर्स-प्रोमो-हीरो}} । बस इन दो बिल्डिंग ब्लॉक के साथ, हमारे ईकॉमर्स लैंडिंग पृष्ठ पहले से ही आधा रास्ता दिखता है।

इसके बाद, हम अपने नायक अनुभाग के नीचे कुछ उत्पाद कार्ड में फेंक देंगे। उत्पाद कार्ड बिल्डिंग ब्लॉक का उपयोग करने के लिए, हम फाउंडेशन के ब्लॉक ग्रिड का उपयोग करेंगे ताकि कार्ड एक ग्रिड के भीतर समान रूप से बैठ सकें। इससे बाद में इन कार्डों के लेआउट को बदलना भी आसान हो जाएगा।

चलो साथ - साथ शुरू करते हैं & lt; div class = "पंक्ति लघु-अप-2 मध्यम-अप -5" & gt; । इस div के अंदर, प्रत्येक कॉलम के अंदर उत्पाद कार्ड के साथ दस कॉलम में फेंक दें & lt; div class = "स्तंभ" & gt; {{& gt; ईकॉमर्स-उत्पाद-कार्ड}} & lt; / div & gt; ।

हम अपने ग्राहकों को हमारे अधिक उत्पादों को प्राप्त करने का एक तरीका देना चाहते हैं, इसलिए आइए हमारे उत्पाद कार्ड के नीचे एक कॉलआउट बटन जोड़ें। सबसे पहले हमें अपना बनाने की जरूरत है & lt; div class = "पंक्ति कॉलम टेक्स्ट-सेंटर" & gt; ताकि हमारा बटन पृष्ठ पर केंद्रित हो जाए। इसके बाद, हम अपने कॉलआउट को बनाने के लिए नींव बटन घटक का उपयोग करेंगे। एक जोड़ें & lt; बटन वर्ग = "बटन" & gt; सभी उत्पादों की दुकान & lt; / बटन & gt; के अंदर ।स्तंभ पंक्ति ।

पृष्ठ अब लगभग पूरा महसूस करता है, लेकिन आइए थोड़ा सा संदर्भ देने के लिए हमारे हीरो और उत्पाद कार्ड के बीच एक शीर्षलेख भी जोड़ें। नायक के नीचे, एक जोड़ें & lt; div class = "पंक्ति कॉलम" & gt; हमारे शीर्षलेख को शामिल करने के लिए & lt; h1 & gt; नवीनतम आगमन & lt; / h1 & gt; ।

अधिकांश ईकॉमर्स होम पेजों में उनके उत्पादों के नीचे अधिक प्रचारक सामग्री होती है। चलो बिल्डिंग ब्लॉक का उपयोग करें {{& gt; ईकॉमर्स-हीरो-स्लाइडर-छोटा}} यहां। स्लाइडर को पृष्ठ की चौड़ाई फैलाने से रोकने के लिए, हम इसे चारों ओर लपेटेंगे & lt; div class = "पंक्ति कॉलम" & gt; ।

चूंकि ईकॉमर्स साइटों में आम तौर पर कई पृष्ठ होते हैं, इसलिए अधिकांश को एक मेगा पाद लेख की आवश्यकता होगी जिसमें पृष्ठों की मात्रा को संभालने के लिए बहुत सारे लिंक हैं। हमारी ईकॉमर्स किट इस सटीक उपयोग केस के लिए एक पाद लेख के साथ आता है। इस मचान को लपेटने के लिए, चलो अंदर छोड़ दें {{& gt; ईकॉमर्स-पाद लेख}} हमारे HTML के बहुत नीचे।

प्रतिक्रिया के लिए जाँच करें

इन दिनों, किसी भी साइट के लिए मोबाइल-अनुकूल होने के लिए यह मुश्किल है। यह ईकॉमर्स साइटों के लिए विशेष रूप से सच है। अब वह ऑनलाइन खरीदारी आदर्श बन गई है, हम उन उपयोगकर्ताओं का प्रतिशत खोना नहीं चाहते हैं जो अपने मोबाइल फोन के माध्यम से ऐसा करते हैं।

मोबाइल-फर्स्ट के हमारे आदर्श वाक्य के बाद, फाउंडेशन के बिल्डिंग ब्लॉक स्वाभाविक रूप से उत्तरदायी होने के लिए बनाए जाते हैं। एक छोटी स्क्रीन पर एक त्वरित जांच से पता चलता है कि हमारी साइट अभी भी बहुत अच्छी लग रही है।

हालांकि, जब हम हैमबर्गर मेनू पर क्लिक करते हैं, तो हमारे ऑफ-कैनवास को ठीक से झुकाया नहीं गया है। यह हिस्सा थोड़ा मुश्किल हो जाता है, लेकिन चिंता मत करो! हम इस ऑफ-कैनवास मेनू में क्या हो रहा है और फिर इसे हुक करने के तरीके के माध्यम से चलेंगे।

यदि आप EcomMerce-Header.html फ़ाइल में एक नज़र डालते हैं, तो आप देखेंगे कि इस हेडर में एक ऑफ-कैनवस इसमें बनाया गया है। तो, यह क्यों काम नहीं किया? जब हमने हैमबर्गर मेनू पर क्लिक किया, तो केवल एक चीज जिसे 'धक्का' दिया गया था वह शीर्षलेख था। शेष पृष्ठ देखने में बने रहे, कुछ अजीब ओवरलैपिंग का कारण बनता है।

ऐसा इसलिए है क्योंकि यह हेडर अपने आप पर काम करने के लिए बनाया गया था, लेकिन वास्तव में इसे पूरे पृष्ठ के साथ काम करने की आवश्यकता है। दूसरे शब्दों में, ऑफ़-कैनवास मेनू ट्रिगर होने पर पृष्ठ पर सभी सामग्री को धक्का देने की आवश्यकता होती है, न केवल हेडर मेनू। यह ईकॉमर्स-हेडर इस तरह लिखा गया था क्योंकि ऑफ-कैनवास स्थापित करने की आवश्यकता होती है src / लेआउट / default.html पेज, जो बिल्डिंग ब्लॉक की पहुंच से परे है।

[4 9]

इसे ठीक करने के लिए, हमें बस इतना करना है कि सब कुछ अंदर ले जाएं & lt; div class = "ऑफ-कैनवास ईकॉमर्स-हेडर-ऑफ-कैनवास स्थिति-बाएं" आईडी = "ईकॉमर्स-हेडर" डेटा-ऑफ-कैनवास और जीटी; और इसे src / लेआउट / default.html में ले जाएं । अगला, हम लपेटने जा रहे हैं {{& gt; तन}} हमारी साइट के अंदर & lt; div class = "ऑफ-कैनवास-सामग्री" डेटा-ऑफ-कैनवास-सामग्री & gt; । ऑफ़-कैनवास ट्रिगर होने पर यह हमारी साइट के शरीर को धक्का देगा।

अब जब हम अपने हैमबर्गर पर क्लिक करते हैं, तो पूरी साइट ऑफ-कैनवास मेनू के लिए आगे बढ़ती है! हमारे शरीर defaull.html पेज इस तरह दिखना चाहिए:

& lt; शरीर & gt;
  & lt; div class = "ऑफ-कैनवास ईकॉमर्स-हेडर-ऑफ-कैनवास स्थिति-बाएं" आईडी = "ईकॉमर्स-हेडर" डेटा-ऑफ-कैनवास और जीटी;
& lt; बटन वर्ग = "क्लोज-बटन" एरिया-लेबल = "बंद करें मेनू" टाइप = "बटन" डेटा-क्लोज़ और जीटी;
  & lt; स्पैन एरिया-छिपी = "सत्य" & gt; & amp; बार; & lt; / span & gt;
& lt; / बटन & gt;
& lt; उल वर्ग = "लंबवत मेनू" & gt;
  & lit; li class = "मुख्य-नौ-लिंक" & gt; & lt; a href = "catage.html" & gt; श्रेणी 1 & lt; / a & gt; & lt; / li & gt;
  & lit; li class = "मुख्य-नौ-लिंक" & gt; & lt; a href = "#" & gt; श्रेणी 2 & lt; / a & gt; & lt; / li & gt;
  & lit; li class = "मुख्य-एनएवी-लिंक" & gt; & lt; a href = "whee.html" & gt; श्रेणी 3 & lt; / a & gt; & lt; / li & gt;
  & lit; li class = "मुख्य-नौ-लिंक" & gt; & lt; a href = "build.html" & gt; श्रेणी 4 & lt; / a & gt; & lt; / li & gt;
  & lit; li class = "मुख्य-नौ-लिंक" & gt; & lt; a href = "#" & gt; श्रेणी 5 & lt; / a & gt; & lt; / li & gt;
& lt; / उल & gt;
& lt; मानव संसाधन और जीटी;

& lt; उल वर्ग = "मेनू लंबवत" & gt;
  & lt; li & gt; & lt; a href = "#" & gt; सहायता & lt; / a & gt; & lt; / li & gt;
  & lit; li & gt; & lt; a href = "#" & gt; आदेश स्थिति & lt; / a & gt; & lt; / li & gt;
  & lit; li & gt; & lt; a href = "#" & gt; संपर्क & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; मेरा खाता & lt; / a & gt; & lt; / li & gt;
& lt; / उल & gt;
  & lt; / div & gt;

  & lt; div class = "ऑफ-कैनवास-सामग्री" डेटा-ऑफ-कैनवास-सामग्री & gt;
{{& gt; तन}}
  & lt; / div & gt;
  & lt; स्क्रिप्ट src = "{{root}} संपत्ति / js / app.js" & gt; & lt; / स्क्रिप्ट & gt;
& lt; / शरीर & gt; 

निष्कर्ष

हमने आपको दिखाया है कि फाउंडेशन की ईकॉमर्स किट के साथ अपनी ईकॉमर्स साइट को कैसे शुरू करें, लेकिन वहां रुकें मत! 100 से अधिक बिल्डिंग ब्लॉक हैं जिनका उपयोग आपके पृष्ठों को बढ़ाने में मदद के लिए किया जा सकता है। कुछ मिनटों में, हमने ब्लॉक बिल्डिंग ब्लॉक के साथ एक स्थिर ईकॉमर्स साइट को मचान कर दिया है। यह आपको बहुत समय बचाता है कि अब आप दृश्यों में परत के लिए उपयोग कर सकते हैं और साइट को अपने ब्रांड को फिट करने के लिए शैली का उपयोग कर सकते हैं।

यहां तक ​​कि यदि आप इसे आगे ले रहे हैं और बैक-एंड सिस्टम, विभिन्न आंशिक तंत्र का उपयोग कर रहे हैं या साइट पर अपना डेटा प्राप्त करने का एक और तरीका है, तो बिल्डिंग ब्लॉक के साथ दिए गए वर्कफ़्लो वास्तव में आपको समय और इसलिए पैसा बचाएगा। फाउंडेशन के बिल्डिंग ब्लॉक शुरू करने का एक शानदार तरीका हैं क्योंकि उनका मतलब है कि वे आपके मौजूदा शैलियों में फिट होने के लिए हैं, और किसी भी एप्लिकेशन सिस्टम में उपयोग किए जाएंगे।

यह लेख मूल रूप से दिखाई दिया नेट पत्रिका अंक 266. इसे खरीदें यहां ।

संबंधित आलेख:

• फाउंडेशन के साथ एक कार्ड-आधारित यूआई बनाएं
• 10 सुंदर नई ईकॉमर्स साइटें आपको देखना चाहिए
• ईकॉमर्स साइटों के प्रदर्शन में सुधार कैसे करें

---

कैसे करना है - सर्वाधिक लोकप्रिय लेख

किसी तस्वीर में किसी को फोटोशॉप कैसे करें

कैसे करना है Sep 13, 2025

(छवि क्रेडिट: भविष्य, मैट स्मिथ) [1 9] किसी चित्�..

---

फ़ोटोशॉप में झुर्रियों को कैसे हटाएं

कैसे करना है Sep 13, 2025

(छवि क्रेडिट: जेसन पार्नेल-ब्रूक्स) [1 9] यह ट्य..

---

Create textures with the Pattern Stamp tool

कैसे करना है Sep 13, 2025

(छवि क्रेडिट: लिनो ड्रिघे) [1 9] यदि आप एक खाली क�..

---

Get started with Adobe Dimension CC

कैसे करना है Sep 13, 2025

एडोब आयाम इसे जटिल दृश्यों को स्थापित करने के लिए ए�..

---

एफ़िनिटी डिजाइनर: पेन टूल का उपयोग कैसे करें

कैसे करना है Sep 13, 2025

इसे थोड़ा परिचय की आवश्यकता है, लेकिन एफ़िनिटी डिजाइनर मैक / विंडोज के लि�..

---

आपकी वेबसाइट के एसईओ को बढ़ावा देने के 5 तरीके

कैसे करना है Sep 13, 2025

एसईओ: यह एक गंदे काम है लेकिन किसी को यह करना है, और ..

---

Create a busy city scene in Illustrator

कैसे करना है Sep 13, 2025

सबसे अच्छा शहर एक व्यस्त शहर है, लेकिन वह व्यस्त व�..

---

Use particles to create a 3D splash

कैसे करना है Sep 13, 2025

यह ट्यूटोरियल इस बात पर एक नज़र डाल देगा कि आप तरल ..

---

श्रेणियाँ

• एआई और मशीन लर्निंग
• AirPods
• वीरांगना
• अमेज़ॅन एलेक्सा और अमेज़ॅन इको
• अमेज़न एलेक्सा और अमेज़न इको
• अमेज़न आग टीवी
• अमेज़न प्रधानमंत्री वीडियो
• एंड्रॉयड
• Android फ़ोन और टेबलेट
• Android फोन और टैबलेट
• Android टीवी
• एप्पल
• Apple App स्टोर
• एप्पल HomeKit और एप्पल HomePod
• एप्पल संगीत
• एप्पल टीवी
• एप्पल घड़ी
• एप्लिकेशन और वेब Apps
• ऐप्स और वेब ऐप्स
• ऑडियो
• Chrome बुक और क्रोम ओएस
• क्रोमबुक और क्रोम ओएस
• Chromecast
• बादल और इंटरनेट
• बादल और इंटरनेट
• क्लाउड और इंटरनेट
• कंप्यूटर हार्डवेयर
• कंप्यूटर इतिहास
• गर्भनाल काटने और स्ट्रीमिंग
• कॉर्ड कटिंग और स्ट्रीमिंग
• कलह
• डिज्नी +
• DIY
• बिजली के वाहन
• EReaders
• अनिवार्य
• व्याख्यार
• फेसबुक
• जुआ
• जनरल
• Gmail
• गूगल
• गूगल सहायक और गूगल नेस्ट
• Google सहायक और Google नेस्ट
• गूगल क्रोम
• गूगल डॉक्स
• को Google डिस्क
• गूगल मैप्स
• गूगल प्ले स्टोर
• Google शीट
• Google स्लाइड
• गूगल टीवी
• हार्डवेयर
• एचबीओ मैक्स
• कैसे करना है
• Hulu
• Instagram
• इंटरनेट स्लैंग और लघुरूप
• IPhone और IPad
• Kindle
• लिनक्स
• मैक
• रखरखाव और अनुकूलन
• माइक्रोसॉफ्ट एज
• माइक्रोसॉफ्ट एक्सेल
• माइक्रोसॉफ्ट ऑफिस
• माइक्रोसॉफ्ट आउटलुक
• Microsoft PowerPoint
• ​​माइक्रोसॉफ्ट टीमें
• माइक्रोसॉफ्ट वर्ड
• मोज़िला फ़ायरफ़ॉक्स
• Netflix
• Nintendo स्विच
• पैरामाउंट +
• पीसी गेमिंग
• मयूर
• फोटोग्राफी
• फ़ोटोशॉप
• प्लेस्टेशन
• गोपनीयता और सुरक्षा
• निजता एवं सुरक्षा
• गोपनीयता और सुरक्षा
• उत्पाद मवेशियों को इकट्ठा
• प्रोग्रामिंग
• रास्पबेरी Pi
• Reddit
• Roku
• सफारी
• सैमसंग फ़ोन और टेबलेट
• सैमसंग फोन और टैबलेट
• स्लैक
• स्मार्ट होम
• Snapchat
• सामाजिक मीडिया
• अंतरिक्ष
• Spotify
• Tinder
• समस्या निवारण
• टीवी
• ट्विटर
• वीडियो गेम
• आभासी वास्तविकता
• के VPN
• वेब ब्राउज़र
• WhatsApp
• वाईफ़ाई और रूटर
• वाईफाई और राउटर
• विंडोज
• Windows 10
• विंडोज 11
• विंडोज 7
• एक्सबॉक्स
• यू ट्यूब के यूट्यूब टीवी
• YouTube और YouTube टीवी
• ज़ूम
• Explainers