इस पोस्ट को मेरे वेब नोट्स में देखें!

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

1. Nuxt.js में कस्टम मॉडल बनाना
2. हमारे ई-कॉमर्स स्टोर में अधिसूचना संदेशों को कॉन्फ़िगर करना

अब जब हम जानते हैं कि मॉडल और अलर्ट कितने महत्वपूर्ण हैं, तो आइए अध्ययन करें कि उन्हें हमारे Nuxt.js ई-कॉमर्स एप्लिकेशन में कैसे एकीकृत किया जाए और कार्यान्वयन की बारीकियों पर ध्यान दिया जाए।

1. Nuxt.js में कस्टम मॉडल बनाना

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

सबसे पहली बात, "ui" फ़ोल्डर के अंदर एक कंटेनर के साथ एक Modal.vue फ़ाइल बनाएं, जिसमें पृष्ठभूमि को धुंधला करना चाहिए और उसके अंदर एक मोडल div होगा जिसमें गतिशील रूप से प्रस्तुत किए गए आइटम होंगे। इसके अलावा, हम "xmark" आइकन को आयात करेंगे और इसे एक बटन बनाएंगे जो हमारी मॉडल विंडो को बंद कर देगा।

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

aSetModalStatus(status) {
    this.modalStatus = status;
},
aSetModalType(type) {
    this.modalType = type;
},

स्टेटस वेरिएबल मोडल रेंडर व्यवहार को नियंत्रित करेगा और प्रकार विभिन्न मोडल प्रकारों को अपडेट करेगा।

अब, जब हमारे पास एक मोडल नियंत्रण प्रणाली है तो हम अपने मोडल घटक को डिफ़ॉल्ट लेआउट में जोड़ सकते हैं। हमारे बेस स्टोर को आयात करना न भूलें।

बढ़िया, हमारा पुन: प्रयोज्य मोडल घटक तैयार है, अब यदि हम मोडल दिखाना चाहते हैं तो हमें बस बेस स्टोर के अंदर मोडलस्टैटस मान को अपडेट करना होगा।

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

.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    .modal {
        min-width: 300px;
        min-height: 300px;
        background: rgba( 255, 255, 255, 0.9 );
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 13px );
        -webkit-backdrop-filter: blur( 13px );
        border-radius: 10px;
        border: 1px solid rgba( 255, 255, 255, 0.18 );
        padding: 24px;
        display: flex;
        flex-direction: column;
        &__close {
            display: flex;
            justify-content: flex-end;
            width: 100%;
            &--btn {
                border: none;
                background-color: transparent;
                cursor: pointer;
                outline: none;
                display: flex;
                align-items: center;
            }
            &--icon {
                color: #6c757d;
                font-size: 20px;
            }
        }
    }
}

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

फिर इस घटक को Modal.vue फ़ाइल में आयात करें और इसे सामग्री div में डालें।

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

ठीक है, हमें आगे बढ़ना होगा और अपने Nuxt.js प्रोजेक्ट में अलर्ट संदेश जोड़ना होगा।

2. हमारे ई-कॉमर्स स्टोर में अधिसूचना संदेशों को कॉन्फ़िगर करना

ठीक है, हम एक मोडल जैसा कुछ जोड़ सकते हैं, इसकी शैलियों को बदल सकते हैं, और इसे अलर्ट कह सकते हैं, यह एक सरल और तेज़ समाधान जैसा लगता है। लेकिन क्या होगा यदि एक ही समय में दो या दो से अधिक अलर्ट ट्रिगर हो जाएं (उदाहरण के लिए "स्वागत" संदेश और "आपकी इच्छा सूची खाली नहीं है" संदेश)? इस समस्या को हल करने के लिए हम एक अलर्ट कंटेनर बनाएंगे जो आने वाले संदेशों की संख्या के अनुसार विस्तारित होगा।

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

aSetNotification(payload) {
    const notification = {
        id: uuidv4(),
        show: true,
        type: payload.type,
        msg: payload.msg,
        delay: payload.delay ? payload.delay : 7000,
    }
    this.notificationsList.push(notification);
},
aRemoveNotification(id) {
    const indexToRemove = this.notificationsList.findIndex((element) => element.id === id);
    if (indexToRemove !== -1) {
        this.notificationsList.splice(indexToRemove, 1);
    }
},

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

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

.alert-success {
    background: rgba( 114, 255, 136, 0.45 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

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

अधिसूचना कंटेनर बस हमारी सूची की एक सरणी प्रस्तुत करेगा जो आधार फ़ाइल में संग्रहीत है।

मुख्य ऐप.व्यू फ़ाइल में "नोटिफ़िकेशन कंटेनर" जोड़ना न भूलें।

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

मोडल्स और सूचनाओं के एकीकरण के साथ, हमारा Nuxt.js ई-कॉमर्स एप्लिकेशन अधिक गतिशील, इंटरैक्टिव और उपयोगकर्ता के अनुकूल बन गया है। ये तत्व बेहतर खरीदारी अनुभव में योगदान करते हैं, जिससे हमारे ग्राहक उत्पादों का पूर्वावलोकन कर सकते हैं और अपनी पूरी यात्रा के दौरान सूचित रह सकते हैं।

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

यदि आपको इस ट्यूटोरियल के लिए स्रोत कोड की आवश्यकता है तो आप इसे यहां प्राप्त कर सकते हैं।