ईकॉमर्स स्टोर बनाने के लिए नेक्स्टजेएस, टाइपस्क्रिप्ट, टेलविंड और वनएंट्री सीएमएस का उपयोग कैसे करें 🛒👨‍💻

परिचय

यह एक साझेदारी लेख है जो OneEntry CMS द्वारा प्रायोजित है।

ईकॉमर्स एप्लिकेशन बनाना अक्सर एक चुनौतीपूर्ण कार्य होता है। इतने सारे विकल्प उपलब्ध होने के कारण, ऐसे तकनीकी स्टैक को चुनना आसान नहीं है जो परियोजना की आवश्यकताओं, स्केलेबिलिटी आवश्यकताओं और दीर्घकालिक स्थिरता के अनुकूल हो।

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

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

इस प्रोजेक्ट का कोड GitHub रिपॉजिटरी में उपलब्ध होगा।

टेक स्टैक का विकल्प

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

टाइपस्क्रिप्ट जावास्क्रिप्ट में स्थिर टाइपिंग जोड़ता है जिससे ईकॉमर्स जैसी स्केलेबल परियोजनाओं के लिए त्रुटियों को पकड़ना और ठीक करना आसान हो जाता है। यह स्वत: पूर्णता और रीफैक्टरिंग सहायता जैसी सुविधाओं के माध्यम से उत्पादकता को भी बढ़ाता है।

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

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

सामग्री और डिज़ाइन

लैंडिंग पृष्ठ शीर्षक शीर्षक प्रदर्शित करेगा, दुकान की विशेषताओं को सूचीबद्ध करेगा और नायक की छवि शामिल करेगा।

पहला दुकान अनुभाग कपड़ों के लिए समर्पित होगा।

दूसरे दुकान अनुभाग में गियर शामिल होगा।

प्रत्येक आइटम में विवरण के साथ एक व्यक्तिगत पूर्वावलोकन पृष्ठ होगा।

कार्ट में पहले से मौजूद आइटमों को हटाने का विकल्प होगा।

कार्ट सभी चयनित वस्तुओं को सूचीबद्ध करेगा और कुल की गणना करेगा।

वनएंट्री प्रोजेक्ट बनाएं

सबसे पहले, उपयोगकर्ता को एक नए खाते के लिए साइन अप करना होगा। ऐसा करने के लिए, OneEntry होमपेज पर जाएँ और अपने ईमेल खाते के माध्यम से साइन अप करें ।

उसके बाद, लॉग इन करें , और आपको वनएंट्री डैशबोर्ड पर निर्देशित किया जाएगा।

एक नया प्रोजेक्ट बनाकर शुरुआत करें.

आपको एक महीने के लिए अध्ययन योजना का उपयोग करने के लिए निःशुल्क कोड प्राप्त होगा। आपके पास प्रोजेक्ट की निर्माण प्रक्रिया के दौरान इसे सक्रिय करने का मौका होगा।

प्रोजेक्ट के निर्माण में कुछ मिनट लगेंगे. एक बार यह तैयार हो जाने पर, परियोजना की स्थिति "कार्यरत" में बदल जाएगी, और स्थिति संकेतक हरा हो जाएगा।

पेज बनाना

प्रोजेक्ट बनने के बाद, आपको ऐप बनाने और डेटा संग्रहीत करने के लिए अपने सीएमएस पोर्टल तक पहुंचने के लिए लॉगिन विवरण के साथ एक ईमेल प्राप्त होगा।

लॉगइन करने के बाद आप अपना पहला पेज बना पाएंगे।

सामग्री प्रबंधन पर जाएँ, एक नया पृष्ठ बनाएँ पर क्लिक करें, और सभी आवश्यक डेटा भरें - पृष्ठों के प्रकार, पृष्ठ शीर्षक, पृष्ठ यूएलआर और मेनू आइटम का नाम।

एंटर करते ही सारा डेटा अपने आप सेव हो जाता है।

होम, क्लोदिंग, गियर और कार्ट के लिए 4 अलग-अलग पेज बनाएं। एक बार बन जाने के बाद, पेज नीचे स्क्रीनशॉट की तरह दिखने चाहिए।

विशेषताएँ बनाएँ

इसके बाद, हमें वह डेटा संरचना बनानी होगी जिसे हम संग्रहीत करेंगे। OneEntry CMS में, इसे डेटा के लिए विशेषताएँ बनाकर प्राप्त किया जाता है।

सेटिंग्स पर जाएँ और क्षैतिज मेनू में विशेषताएँ चुनें। होम पेज के लिए नाम, मार्कर और प्रकार प्रदान करते हुए एक विशेषता सेट बनाएं:

एक बार बन जाने के बाद, यह नीचे स्क्रीनशॉट जैसा दिखेगा:

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

अब, आइए प्रत्येक सेट के लिए विशिष्ट विशेषताओं को परिभाषित करें।

पहले होम सेक्शन वायरफ्रेम में शामिल की गई सामग्री के आधार पर, हम शीर्षक, विवरण और छवि प्रदर्शित करना चाहते हैं।

होम के लिए गियर आइटम पर क्लिक करें, और नीचे दी गई सूची में दिखाए अनुसार निम्नलिखित विशेषता नाम, मार्कर और विशेषता प्रकार बनाएं।

अब, वापस जाएं और कपड़ों के लिए गियर आइकन पर क्लिक करें।

इस पृष्ठ की विशेषताएँ थोड़ी भिन्न होंगी क्योंकि हम उत्पाद शीर्षक, उपशीर्षक, विवरण, छवि और कीमत प्रदर्शित करना चाहते हैं।

यहां बताया गया है कि विशेषता संरचना कैसी दिखेगी:

इसके बाद, गियर पेज के लिए भी ऐसा ही करें, जो समान संरचना का उपयोग करेगा:

सामग्री जोड़ें

परियोजना के इस चरण में, हमने पहले ही सामग्री संरचना को परिभाषित कर लिया है और स्वयं सामग्री बनाना शुरू करने के लिए तैयार हैं।

सामग्री प्रबंधन अनुभाग पर जाएँ जहाँ आपने पहले साइट के लिए अपने सभी पृष्ठ बनाए थे:

होम के लिए एडिट बटन पर क्लिक करें। उसके बाद, क्षैतिज मेनू पर गुण टैब पर क्लिक करें:

विशेषताओं के सेट के लिए होम का चयन करें। इससे वे सभी विशेषताएँ लोड हो जाएँगी जो हमने होम पेज के लिए सेटिंग्स में पहले बनाई थीं।

अब कुछ नमूना डेटा भरें जिसे आप होम पेज पर प्रदर्शित करना चाहते हैं।

अब, आइए अपने वस्त्र और गियर पेजों के लिए कुछ सामग्री जोड़ें।

चूंकि हमने पेज प्रकार को कैटलॉग के रूप में चुना है, बाएं मेनू से कैटलॉग चुनें, और दोनों पेज वहां दिखाई देने चाहिए:

अब, कपड़े के लिए ऐड आइकन पर क्लिक करें और कुछ आइटम जोड़ें।

सबसे पहले, उस उत्पाद के लिए हेडर जोड़ें जिसे आप जोड़ना चाहते हैं।

अब विशेषताएँ टैब पर जाएँ, विशेषताओं के सेट के लिए वस्त्र चुनें और आवश्यक डेटा भरें।

कैटलॉग मेनू पर वापस जाएँ और कपड़े तथा गियर दोनों के लिए कुछ और आइटम देखें। हमारे डेमो ऐप के लिए, मैंने 4 आइटम जोड़े हैं जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है:

एक एपीआई एक्सेस टोकन बनाएं

OneEntry CMS में बनाया गया सारा डेटा सुरक्षित है, इसलिए उस तक पहुंचने में सक्षम होने के लिए हमें एक निजी टोकन बनाना होगा।

ऐसा करने के लिए, सेटिंग्स पर जाएँ, और ऐप टोकन चुनें। ऐप का नाम और समाप्ति तिथि दर्ज करें और क्रिएट पर क्लिक करें। यह एक अद्वितीय एपीआई कुंजी उत्पन्न करेगा।

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

नेक्स्टजेएस प्रोजेक्ट की स्थापना

ट्यूटोरियल के इस भाग में, हम कोड के साथ काम करना शुरू करेंगे और OneEntry CMS के साथ काम करने के लिए NextJS प्रोजेक्ट को कॉन्फ़िगर करेंगे।

टर्मिनल खोलें, और कमांड npx create-next-app@latest चलाएँ।

सीएलआई सेटअप विज़ार्ड प्रारंभ करेगा. अपने प्रोजेक्ट का नाम दर्ज करें, और नीचे दिखाए अनुसार सभी डिफ़ॉल्ट मान चुनें:

सेटअप को पूरा होने के लिए एक मिनट का समय दें, और नेक्स्टजेएस ऐप बन जाने पर आपको एक सूचना प्राप्त होगी।

उसके बाद, cd winter-sports कमांड का उपयोग करके निर्देशिका को नए बनाए गए फ़ोल्डर में बदलें, और फिर डेवलपर सर्वर शुरू करने के लिए npm run dev चलाएं।

इसे एक्सेस करने के लिए, टर्मिनल पर दिए गए लिंक पर क्लिक करें या अपना वेब ब्राउज़र खोलें और http://localhost:3000 पर मैन्युअल रूप से नेविगेट करें।

आपको NextJS डेवलपर सर्वर लैंडिंग पृष्ठ प्रस्तुत किया जाना चाहिए:

अब, आइए एक पर्यावरणीय मूल्य बनाएं जिसकी हमें अपने ऐप के लिए आवश्यकता होगी। अपने कोड संपादक पर वापस जाएँ, और अपने प्रोजेक्ट के मूल में एक .env फ़ाइल बनाएँ।

आपके द्वारा पहले कॉपी की गई एपीआई कुंजी को क्लिपबोर्ड पर इस प्रकार चिपकाएँ:

 API_KEY=your-api-code-from-oneentry

OneEntry CMS से डेटा लाने के लिए एपीआई कॉल करने के बाद यह हमें process.env.API_KEY के माध्यम से कुंजी तक पहुंचने की अनुमति देगा।

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

प्रोजेक्ट रूट में next.config.js फ़ाइल खोलें और इसे इस प्रकार संपादित करें:

 const nextConfig = { images: { remotePatterns: [ { hostname: "ecommerce.oneentry.cloud", }, ], }, }; module.exports = nextConfig;

अंत में, हमें ऐप के लिए टेलविंड डिफ़ॉल्ट स्टाइल को रीसेट करने की आवश्यकता होगी क्योंकि हम स्क्रैच से सभी स्टाइल लिखेंगे।

app निर्देशिका में globals.css फ़ाइल खोलें जो src फ़ोल्डर में स्थित है, और फ़ाइल सामग्री को निम्न में बदलें:

 @tailwind base; @tailwind components; @tailwind utilities;

प्रकार बनाएँ

चूँकि हम टाइपस्क्रिप्ट के साथ काम करेंगे, हमें यह परिभाषित करने की आवश्यकता होगी कि हम अपने एप्लिकेशन में किस प्रकार के डेटा का उपयोग करेंगे।

हम इसे पृष्ठों और घटकों के अंदर कर सकते हैं, लेकिन कोड को साफ-सुथरा रखने और दोहराव से बचने के लिए, app निर्देशिका में एक नया फ़ोल्डर interfaces बनाएं। नव निर्मित फ़ोल्डर के अंदर एक फ़ाइल data.tsx बनाएं और कोड शामिल करें:

 export interface Product { id: string; category: string; title: string; subtitle: string; description: string; image: string; price: number; } export interface ProductAPI { id: string; attributeValues: { en_US: { producttitle: { value: { htmlValue: string }[]; }; productsubtitle: { value: { htmlValue: string }[]; }; productdescription: { value: { htmlValue: string }[]; }; productimage: { value: { downloadLink: string }[]; }; productprice: { value: number; }; }; }; } export interface Page { pageUrl: string; title: string; description: string; image: string; localizeInfos: { en_US: { title: string; }; }; } export interface PageAPI { attributeValues: { en_US: { herotitle: { value: { htmlValue: string }[]; }; herodescription: { value: { htmlValue: string }[]; }; heroimage: { value: { downloadLink: string }[]; }; }; }; } export interface URLProps { params: { category: string; productId: string; }; } export interface TextProps { className: string; text: string; }

उत्पाद और पेज डेटा दोनों में उनके फ्रंट-एंड रेंडरिंग डेटा संरचना और फ़ेच विधि के माध्यम से एपीआई से प्रतिक्रिया के प्रकार होंगे।

इसके अलावा, हमने यूआरएल पैरामीटर से डेटा के लिए डेटा प्रकार और सीएमएस में टेक्स्ट इनपुट फ़ील्ड से प्राप्त डेटा के लिए टेक्स्ट रेंडरर को परिभाषित किया है।

एपीआई फ़ेच फ़ंक्शन बनाएं

अब, आइए कुछ फ़ंक्शन बनाएं जिनका उपयोग हम पेजों और उत्पादों के लिए डेटा लाने के लिए OneEntry CMS के साथ संचार करने के लिए करेंगे।

फिर, हम प्रत्येक फ़ाइल में ऐसा कर सकते हैं, लेकिन कोड को साफ़-सुथरा रखने के लिए, आइए app निर्देशिका के भीतर एक नया फ़ोल्डर services बनाएँ, जिसके अंदर एक फ़ाइल fetchData.tsx हो:

 export async function getPages() { const response = await fetch( "https://ecommerce.oneentry.cloud/api/content/pages", { method: "GET", headers: { "x-app-token": `${process.env.API_KEY}`, }, } ); return await response.json(); } export async function getProducts(category: string) { const response = await fetch( `https://ecommerce.oneentry.cloud/api/content/products/page/url/${category}?limit=4&offset=0&langCode=en_US&sortOrder=DESC&sortKey=id`, { method: "GET", headers: { "x-app-token": `${process.env.API_KEY}`, }, } ); return await response.json(); } export async function getProduct(id: string) { const response = await fetch( `https://ecommerce.oneentry.cloud/api/content/products/${id}`, { method: "GET", headers: { "x-app-token": `${process.env.API_KEY}`, }, } ); return await response.json(); }

getPages फ़ंक्शन उन सभी पेजों के बारे में डेटा लाएगा जो हमने OneEntry CMS में बनाए हैं।

getProducts फ़ंक्शन category पैरामीटर के आधार पर उत्पादों के विशिष्ट संग्रह के लिए डेटा लाएगा। जब हम फ़ंक्शन को उत्पाद पृष्ठ में आयात करेंगे तो हम पैरामीटर पास करेंगे।

getProduct फ़ंक्शन हमारे द्वारा खोले गए उत्पाद की id के आधार पर डेटा लाएगा। जब हम किसी विशिष्ट उत्पाद के लिए पूर्वावलोकन पृष्ठ में फ़ंक्शन आयात करेंगे तो हम पैरामीटर पास करेंगे।

ध्यान दें कि हमने एपीआई कुंजी तक पहुंचने के लिए process.env.API_KEY उपयोग किया था जिसे हमने OneEntry CMS के लिए पहुंच प्रमाणित करने के लिए पहले .env फ़ाइल में परिभाषित किया था।

सहायक कार्य बनाएँ

इसके अलावा, जब हम अभी भी services फ़ोल्डर में हैं, तो आइए इसके अंदर एक और नई फ़ाइल बनाएं, जिसे helpers.tsx कहा जाए, जिसमें छोटे उपयोगिता फ़ंक्शन शामिल होंगे:

 export function calculateTotal(items: { price: number }[]) { return items.reduce((total, item) => total + Number(item.price), 0); } export function boughtStatus(items: { id: string }[], id: string) { return items.some((item) => item.id === id); } export function cartIndex(items: { id: string }[], id: string) { return items.findIndex((item) => item.id === id); }

calculateTotal फ़ंक्शन कार्ट में जोड़े गए उत्पादों की कीमतें जोड़ देगा, और कुल मूल्य लौटा देगा।

boughtStatus यह पता लगाएगा कि पूर्वावलोकन मार्ग में अलग-अलग आइटम पहले ही कार्ट में जोड़े जा चुके हैं या नहीं।

cartIndex कार्ट में जोड़े गए उत्पादों के लिए सरणी में आइटम की स्थिति का पता लगाएगा।

घटक बनाना

app निर्देशिका पर वापस जाएं, और उसके अंदर एक नया फ़ोल्डर components बनाएं।

नव निर्मित फ़ोल्डर खोलें और उसमें सात अलग-अलग फ़ाइलें शामिल करें: Header.tsx , Footer.tsx , Text.tsx , Card.tsx , Preview.tsx , Order.tsx , AddToCart.tsx ।

शीर्षलेख घटक

फ़ाइल Header.tsx खोलें, और निम्नलिखित कोड शामिल करें:

 import Link from "next/link"; import { Page } from "../interfaces/data"; export default function Header({ pages }: { pages: Page[] }) { return ( <div className="flex justify-between items-center mb-10 p-6"> <Link href="/"> <h1 className="text-xl">🏂 Alpine Sports</h1> </Link> <div className="flex space-x-4 list-none"> {pages.map((page, index: number) => ( <Link key={index} href={page.pageUrl === "home" ? "/" : `/${page.pageUrl}`} > {page.localizeInfos.en_US.title} </Link> ))} </div> </div> ); }

हेडर के लिए, हमने कंपनी का नाम प्रदर्शित किया और नेविगेशन लिंक के माध्यम से लूप किया जो कि घटक को पेजों में आयात करने के बाद हमें एपीआई से मिलेगा।

हमने एक दो-स्तंभ लेआउट बनाया और विशिष्ट नेविगेशन लुक प्राप्त करने के लिए दोनों तत्वों को स्क्रीन के विपरीत किनारों पर क्षैतिज रूप से रखा।

पाद लेख घटक

फ़ाइल Footer.tsx खोलें, और निम्नलिखित कोड शामिल करें:

 export default function Footer() { return ( <div className="text-center mt-auto p-6"> <h1>Alpine Sports, Inc.</h1> <p>All rights reserved, {new Date().getFullYear()}</p> </div> ); }

पाद लेख में, हमने कंपनी का नमूना नाम और चालू वर्ष के सामग्री अधिकार शामिल किए हैं। हमने सामग्री को केन्द्रित किया और कुछ पैडिंग जोड़ी।

पाठ घटक

Text.tsx फ़ाइल खोलें और निम्नलिखित कोड शामिल करें:

 import { TextProps } from "../interfaces/data"; export default function Text({ className, text }: TextProps) { return ( <div className={className} dangerouslySetInnerHTML={{ __html: text }} /> ); }

टेक्स्ट घटक उस टेक्स्ट डेटा को प्रस्तुत करेगा जो हम वनएंट्री सीएमएस से प्राप्त करते हैं और इसे HTML टैग के बिना हमारे एप्लिकेशन में ठीक से प्रदर्शित करेंगे।

कार्ड घटक

Card.tsx फ़ाइल खोलें और निम्नलिखित कोड शामिल करें:

 import Link from "next/link"; import Text from "../components/Text"; import { Product } from "../interfaces/data"; export default function Card({ product }: { product: Product }) { return ( <Link href={`/${product.category}/${product.id}`}> <div className="group relative"> <div className="group-hover:opacity-75 h-80"> <img src={product.image} alt="Product card image" className="h-full w-full object-cover object-center" /> </div> <div className="mt-4 flex justify-between"> <div> <h3 className="text-sm text-gray-700"> <Text className="" text={product.title} /> </h3> <Text className="mt-1 text-sm text-gray-500" text={product.subtitle} /> </div> <p className="text-sm font-medium text-gray-900">${product.price}</p> </div> </div> </Link> ); }

कार्ड घटक में, हमने प्रत्येक उत्पाद की छवि, शीर्षक, उपशीर्षक और कीमत प्रदर्शित की। पृष्ठों में आयात होने के बाद हम सभी वस्तुओं का मानचित्रण करेंगे।

छवि कार्ड के शीर्ष पर प्रदर्शित होगी, उसके बाद शीर्षक और विवरण, और कीमत घटक के नीचे दाईं ओर प्रदर्शित होगी।

पूर्वावलोकन घटक

फ़ाइल Preview.tsx खोलें, और निम्नलिखित कोड शामिल करें:

 "use-client"; import Image from "next/image"; import Text from "./Text"; import { Product } from "../interfaces/data"; export default function Preview({ children, productItem, }: { children: React.ReactNode; productItem: Product; }) { return ( <div className="flex mx-auto max-w-screen-xl"> <div className="flex-1 flex justify-start items-center"> <Image src={productItem.image} alt="Product preview image" width="450" height="900" /> </div> <div className="flex-1"> <Text className="text-5xl pb-8" text={productItem.title} /> <Text className="text-4xl pb-8 text-gray-700" text={`$${productItem.price}`} /> <Text className="pb-8 text-gray-500 text-justify" text={productItem.description} /> {children} </div> </div> ); }

उपयोगकर्ता द्वारा प्रत्येक उत्पाद पर क्लिक करने के बाद उसके बारे में अधिक जानकारी प्रदर्शित करने के लिए पूर्वावलोकन घटक का उपयोग किया जाएगा।

हम उत्पाद की छवि, शीर्षक, कीमत और विवरण प्रदर्शित करेंगे। लेआउट को 2 कॉलम में विभाजित किया जाएगा, जिसमें छवि बाएं कॉलम पर और बाकी सामग्री दाईं ओर प्रदर्शित होगी।

आदेश घटक

फ़ाइल Order.tsx खोलें, और निम्नलिखित कोड शामिल करें:

 "use client"; import { useState, useEffect } from "react"; import Link from "next/link"; import Image from "next/image"; import Text from "./Text"; import { calculateTotal } from "../services/helpers"; import { Product } from "../interfaces/data"; export default function Order() { const [cartItems, setCartItems] = useState<Product[]>([]); useEffect(() => { const storedCartItems = localStorage.getItem("cartItems"); const cartItems = storedCartItems ? JSON.parse(storedCartItems) : []; setCartItems(cartItems); }, []); return ( <div> {cartItems.map((item, index) => ( <div key={index} className="flex items-center border-b border-gray-300 py-2" > <div className="w-20 h-20 mr-12"> <Image src={item.image} alt={item.title} width={80} height={80} /> </div> <div> <Link href={`/${item.category}/${item.id}`} className="text-lg font-semibold" > <Text className="" text={item.title} /> </Link> <Text className="text-gray-600" text={item.subtitle} /> <p className="text-gray-800">Price: ${item.price}</p> </div> </div> ))} <div className="mt-4 text-end"> <h2 className="text-xl font-semibold mb-8"> Total Amount: ${calculateTotal(cartItems)} </h2> <button className="bg-blue-500 hover:bg-blue-700 py-2 px-8 rounded"> Proceed to checkout </button> </div> </div> ); }

ऑर्डर घटक उन सभी वस्तुओं को सूचीबद्ध करेगा जिन्हें उपयोगकर्ता ने कार्ट में जोड़ा है। प्रत्येक आइटम के लिए, छवि, शीर्षक, उपशीर्षक और कीमत प्रदर्शित की जाएगी।

एक बार घटक प्रस्तुत हो जाने के बाद, ऐप कार्ट में मौजूद सभी आइटम तक पहुंच जाएगा, उन्हें cardItems स्टेट वेरिएबल पर सेट करेगा, और उन्हें map विधि के माध्यम से स्क्रीन पर प्रस्तुत करेगा।

रेंडर किए गए आइटम की कुल मात्रा की गणना calculateTotal फ़ंक्शन के माध्यम से की जाएगी, जिसे हमने helpers.tsx फ़ाइल से आयात किया है।

AddToCart घटक

AddToCart.tsx फ़ाइल खोलें और निम्नलिखित कोड शामिल करें:

 "use client"; import React, { useState, useEffect } from "react"; import { boughtStatus, cartIndex } from "../services/helpers"; import { Product } from "../interfaces/data"; export default function AddToCart({ category, id, title, subtitle, image, price, }: Product) { const storedCartItems = JSON.parse(localStorage.getItem("cartItems") || "[]"); const isPurchased = boughtStatus(storedCartItems, id); const indexInCart = cartIndex(storedCartItems, id); const [btnState, setBtnState] = useState(false); useEffect(() => { isPurchased && setBtnState(true); }, []); const handleButtonClick = () => { const updatedCartItems = [...storedCartItems]; if (!btnState && !isPurchased) { updatedCartItems.push({ category, id, title, subtitle, image, price }); } else if (isPurchased) { updatedCartItems.splice(indexInCart, 1); } localStorage.setItem("cartItems", JSON.stringify(updatedCartItems)); setBtnState(!btnState); }; return ( <button className={`${ !btnState ? "bg-blue-500 hover:bg-blue-600" : "bg-yellow-300 hover:bg-yellow-400" } py-2 px-8 rounded`} onClick={handleButtonClick} > {!btnState ? "Add to Cart" : "Remove from Cart"} </button> ); }

AddToCart घटक व्यक्तिगत उत्पाद पूर्वावलोकन पृष्ठ पर प्रदर्शित किया जाएगा और उपयोगकर्ता को उत्पाद को शॉपिंग कार्ट में जोड़ने की अनुमति देगा।

रेंडरिंग पर, isPurchased फ़ंक्शन यह पता लगाएगा कि उत्पाद पहले ही कार्ट में जोड़ा जा चुका है या नहीं। यदि यह रेंडर किया गया बटन नहीं है, तो "कार्ट में जोड़ें" प्रदर्शित होगा अन्यथा यह "कार्ट से निकालें" कहेगा।

handleButtonClick फ़ंक्शन क्लिक सुविधा उपरोक्त स्थिति के आधार पर आइटम सरणी से उत्पाद को जोड़ या हटा देगी।

पेज बनाएं

अंत में, आइए ट्यूटोरियल के पिछले भाग में बनाए गए घटकों को आयात करें और एप्लिकेशन के लिए पेज लॉजिक बनाएं।

होम पेज

app निर्देशिका में page.tsx खोलें, और इसकी सामग्री को निम्नानुसार संपादित करें:

 import Image from "next/image"; import Header from "./components/Header"; import Text from "./components/Text"; import Footer from "./components/Footer"; import { getPages } from "./services/fetchData"; import { PageAPI } from "./interfaces/data"; export default async function Home() { const pages = await getPages(); const getValues = (el: PageAPI) => { const { herotitle, herodescription, heroimage } = el.attributeValues.en_US; return { title: herotitle.value[0].htmlValue, description: herodescription.value[0].htmlValue, image: heroimage.value[0].downloadLink, }; }; const pageContent = getValues(pages[0]); return ( <div className="flex flex-col min-h-screen"> <Header pages={pages} /> <div className="flex flex-row mx-auto max-w-screen-xl"> <div className="flex-1"> <Text className="text-6xl pb-10 text-gray-900" text={pageContent.title} /> <Text className="text-xl pb-8 text-gray-500 text-justify" text={pageContent.description} /> </div> <div className="flex-1 flex justify-end items-center"> <Image src={pageContent.image} alt="Photo by Karsten Winegeart on Unsplash" width={450} height={900} /> </div> </div> <Footer /> </div> ); }

होम पेज पर, हम हेडर के लिए डेटा प्राप्त करने के लिए सबसे पहले getPages फ़ंक्शन को कॉल करेंगे।

फिर हम हीरो पेज डेटा लाने के लिए getValues फ़ंक्शन का उपयोग करते हैं, और फिर उन्हें आसान प्रसंस्करण के लिए pageContent ऑब्जेक्ट में बदल देते हैं।

फिर हम आयातित हेडर और फ़ुटर घटकों को प्रस्तुत करते हैं और साथ ही हीरो शीर्षक, विवरण और छवि के लिए आवश्यक मान भी पास करते हैं।

उत्पाद पृष्ठ

app निर्देशिका में एक नया फ़ोल्डर [category] बनाएं और उसके अंदर - एक फ़ाइल page.tsx बनाएं।

विशिष्ट फ़ाइल नामों का उपयोग महत्वपूर्ण है क्योंकि नेक्स्टजेएस मार्गों को संभालने और यूआरएल पैरामीटर तक पहुंचने के लिए इसका उपयोग करता है।

page.tsx में निम्नलिखित कोड शामिल करें:

 import Header from "../components/Header"; import Footer from "../components/Footer"; import Card from "../components/Card"; import { getPages, getProducts } from "../services/fetchData"; import { ProductAPI, URLProps } from "../interfaces/data"; export default async function Product({ params }: URLProps) { const { category } = params; const pages = await getPages(); const products = await getProducts(category); const getValues = (products: ProductAPI[]) => { return products.map((el) => { const { producttitle, productsubtitle, productdescription, productimage, productprice, } = el.attributeValues.en_US; return { id: el.id, category: category, title: producttitle.value[0].htmlValue, subtitle: productsubtitle.value[0].htmlValue, description: productdescription.value[0].htmlValue, image: productimage.value[0].downloadLink, price: productprice.value, }; }); }; const productItems = getValues(products.items); return ( <div className="flex flex-col min-h-screen"> <Header pages={pages} /> <div className="mx-auto max-w-screen-xl px-8"> <h2 className="text-4xl text-gray-900 mb-12"> Browse our {category} collection: </h2> <div className="grid gap-x-6 gap-y-10 grid-cols-4 mt-6"> {productItems.map((product) => { return <Card key={product.id} product={product} />; })} </div> </div> <Footer /> </div> ); }

उत्पाद पृष्ठ के लिए, हम पहले यूआरएल से category पैरामीटर प्राप्त करते हैं, जिसे हम आगे getProducts फ़ंक्शन में पास करते हैं, ताकि यह वर्णन किया जा सके कि साइट के किस पृष्ठ पर जाने के आधार पर हमें किस श्रेणी के उत्पादों को लाने की आवश्यकता है।

एक बार डेटा प्राप्त हो जाने के बाद, हम ऑब्जेक्ट productItems की एक सरणी बनाते हैं जिसमें आसान प्रसंस्करण के लिए पृष्ठ के लिए सभी आवश्यक विशेषताएँ शामिल होती हैं।

फिर हम इसे map विधि के माध्यम से लूप करते हैं और कार्ड घटक में प्रॉप्स पास करके इसे स्क्रीन पर प्रस्तुत करते हैं जिसे हमने component फ़ोल्डर से आयात किया था।

पूर्वावलोकन पृष्ठ

[category] फ़ोल्डर के अंदर, [productId] नामक एक और फ़ोल्डर बनाएं।

नव निर्मित फ़ोल्डर खोलें, और कोड के साथ उसके अंदर एक फ़ाइल page.tsx बनाएं:

 import Header from "../../components/Header"; import Preview from "../../components/Preview"; import AddToCart from "../../components/AddToCart"; import Footer from "../../components/Footer"; import { getPages, getProduct } from "../../services/fetchData"; import { ProductAPI, URLProps } from "../../interfaces/data"; export default async function Product({ params }: URLProps) { const { category, productId } = params; const pages = await getPages(); const product = await getProduct(productId); const getValues = (el: ProductAPI) => { const { producttitle, productsubtitle, productdescription, productimage, productprice, } = el.attributeValues.en_US; return { id: el.id, category: category, title: producttitle.value[0].htmlValue, subtitle: productsubtitle.value[0].htmlValue, description: productdescription.value[0].htmlValue, image: productimage.value[0].downloadLink, price: productprice.value, }; }; const productItem = getValues(product); return ( <div className="flex flex-col min-h-screen"> <Header pages={pages} /> <div className="flex mx-auto max-w-screen-xl"> <div className="flex-1 flex justify-start items-center"> <Preview productItem={productItem}> <AddToCart id={productId} category={category} title={productItem.title} subtitle={productItem.subtitle} description={productItem.description} image={productItem.image} price={productItem.price} /> </Preview> </div> </div> <Footer /> </div> ); }

उत्पाद पृष्ठ पर अपने कार्ड पर क्लिक करने के बाद यह पृष्ठ उपयोगकर्ताओं को किसी भी व्यक्तिगत उत्पाद के लिए अधिक विवरण देखने की अनुमति देगा।

हम पहले URL से productId पैरामीटर प्राप्त करते हैं, जिसे हम आगे getProduct फ़ंक्शन में पास करते हैं, यह निर्दिष्ट करने के लिए कि पूर्वावलोकन पृष्ठ पर कौन सा उत्पाद देखा जाता है, उसके आधार पर हमें कौन सा उत्पाद लाने की आवश्यकता है।

एक बार डेटा प्राप्त हो जाने के बाद, हम एक ऑब्जेक्ट productItem बनाते हैं जिसमें प्रॉप्स के रूप में पूर्वावलोकन घटक में पारित होने के लिए सभी आवश्यक विशेषताएं शामिल होती हैं।

हमें category पैरामीटर भी मिलता है, क्योंकि हमें इसे कार्ट में जोड़ें घटक में पास करने की आवश्यकता होती है, इसलिए हम कार्ट पेज में आइटम के लिए एक वैध लिंक बना सकते हैं।

कार्ट पेज

अंत में, app डायरेक्टरी में एक नया फ़ोल्डर cart बनाएं।

इसे खोलें, इसके अंदर निम्नलिखित कोड के साथ एक नई फ़ाइल page.tsx बनाएं:

 import Header from "../components/Header"; import Order from "../components/Order"; import Footer from "../components/Footer"; import { getPages } from "../services/fetchData"; export default async function Cart() { const pages = await getPages(); return ( <div className="flex flex-col min-h-screen"> <Header pages={pages} /> <div className="container mx-auto max-w-screen-xl px-8"> <h2 className="text-4xl text-gray-900 mb-12">Shopping cart summary:</h2> <Order /> </div> <Footer /> </div> ); }

हमने पहले आवश्यक डेटा प्राप्त किया और फिर उसे हेडर में प्रॉप्स के रूप में पास कर दिया।

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

परिक्षण

बधाई हो, आपने एक कार्यशील प्रोजेक्ट बनाया है!

सबसे पहले, जांचें कि डेवलपर सर्वर अभी भी चल रहा है या नहीं। यदि ऐसा नहीं है, तो इसे फिर से शुरू करने के लिए npm run dev कमांड चलाएँ और इसे देखने के लिए localhost:3000 तक पहुँचें।

आपका प्रोजेक्ट अब इस तरह दिखना चाहिए:

जैसा कि आप देख सकते हैं, होम अनुभाग सामग्री को होम विशेषता सेट से सफलतापूर्वक प्राप्त किया गया है जिसे हमने डेटा फ़ील्ड में निर्दिष्ट किया है।

साथ ही, वनएंट्री सीएमएस कैटलॉग से सभी आइटम को वस्त्र और गियर अनुभाग में सभी सूचनाओं को उचित रूप से प्रस्तुत करने के साथ लाया गया है।

नेक्स्टजेएस रूट हैंडलिंग और उत्पाद मापदंडों की बदौलत उपयोगकर्ता प्रत्येक उत्पाद का उसके समर्पित पृष्ठ पर अलग से पूर्वावलोकन भी कर सकते हैं।

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

निष्कर्ष

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

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

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

मेरे न्यूज़लेटर की सदस्यता लेकर मेरे द्वारा खोजे गए सर्वोत्तम संसाधन, उपकरण, उत्पादकता युक्तियाँ और कैरियर विकास युक्तियाँ प्राप्त करना सुनिश्चित करें!

इसके अलावा, ट्विटर , लिंक्डइन और गिटहब पर भी मुझसे जुड़ें!

यहाँ भी प्रकाशित किया गया