परिचय यह एक साझेदारी लेख है जो द्वारा प्रायोजित है। 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(); } फ़ंक्शन उन सभी पेजों के बारे में डेटा लाएगा जो हमने OneEntry CMS में बनाए हैं। getPages फ़ंक्शन पैरामीटर के आधार पर उत्पादों के विशिष्ट संग्रह के लिए डेटा लाएगा। जब हम फ़ंक्शन को उत्पाद पृष्ठ में आयात करेंगे तो हम पैरामीटर पास करेंगे। getProducts category फ़ंक्शन हमारे द्वारा खोले गए उत्पाद की के आधार पर डेटा लाएगा। जब हम किसी विशिष्ट उत्पाद के लिए पूर्वावलोकन पृष्ठ में फ़ंक्शन आयात करेंगे तो हम पैरामीटर पास करेंगे। getProduct id ध्यान दें कि हमने एपीआई कुंजी तक पहुंचने के लिए उपयोग किया था जिसे हमने OneEntry CMS के लिए पहुंच प्रमाणित करने के लिए पहले फ़ाइल में परिभाषित किया था। process.env.API_KEY .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 उम्मीद है, यह आपके लिए उपयोगी होगा और आपको वनएंट्री सीएमएस को बैकएंड समाधान के रूप में कैसे उपयोग करना है, इसे अपने एप्लिकेशन के फ्रंट एंड के साथ कैसे जोड़ना है, और नेक्स्टजेएस, टाइपस्क्रिप्ट और टेलविंड की सर्वोत्तम सुविधाओं का उपयोग कैसे करना है, इसकी जानकारी मिलेगी। . सदस्यता लेकर मेरे द्वारा खोजे गए सर्वोत्तम संसाधन, उपकरण, उत्पादकता युक्तियाँ और कैरियर विकास युक्तियाँ प्राप्त करना सुनिश्चित करें! मेरे न्यूज़लेटर की इसके अलावा, , और पर भी मुझसे जुड़ें! ट्विटर लिंक्डइन गिटहब भी प्रकाशित किया गया यहाँ