Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)
OpenCart द्वारा प्रदान किए जाने वाले कई उपयोगी फीचर्स में से एक “Options” है। इस ट्यूटोरियल में, आप सीखेंगे की वास्तव में अलग-अलग प्रोडक्ट बना विभिन्न वेरिएशन को सेट करने के लिए ऑप्शन का उपयोग कैसे करें। अधिक विशेष रूप से, आप फ्रंट-एंड में कंफीग्र्ड करने योग्य प्रोडक्ट्स को सेट अप करना सीखेंगे, ताकि यूजर्स स्वयं प्रोडक्ट पेज पर उप विभिन्न वेरिएशंस के बीच सिलेक्ट कर सकें। हम एडमिन सेक्शन में ऑप्शंस की विस्तार में व्याख्या करेंगे, और हम एक कॉन्फ़िगर करने योग्य प्रोडक्ट का एक डेमों सेटअप करके समाप्त करेंगे।
ऑप्शन की बुनियादी समझ
क्या आपने कभी प्रोडक्ट फीचर्स में मामूली बदलाव के साथ कई प्रोडक्ट्स को सेटअप करने की आवश्यकता में भाग लिया है? OpenCart में “Options” बिल्कुल उसी के लिए डिजाइन किया गया है। यह आपको एक ही प्रोडक्ट के विभिन्न वर्जन को सेट करने में मदद कर सकता है, साथ ही कीमत में वेरिएशन भी।
आइए इसे समझने के लिए वास्तविक दुनिया के कुछ उदाहरण ले। मान लें कि आप अपने स्टोर में “T-Shirt” प्रोडक्ट के लिए अलग-अलग रंग प्रदान करना चाहते हैं। और आप सबसे लोकप्रिय रंगो के लिए कुछ अतिरिक्त रुपए भी चार्ज करना चाहते हैं। आप इसे OpenCart में Select
ऑप्शन टाइप का प्रयोग करके पूरा कर सकते हैं। आपके द्वारा एडमिन साइड पर अलग-अलग रंग सेट करने के बाद, यूजर्स को प्रोडक्ट डीटेल्स पेज पर विभिन्न रंगों की पसंद के साथ प्रस्तुत किया जाता है। और हां, रंग सिलेक्ट करने के आधार पर यूजर्स से शुल्क लिया जाएगा!
एक अधिक एडवांस उदाहरण एक “Graphic Tee” होगा जिसमें आप यूजर्स को एक इमेज अपलोड करने की अनुमति देना चाहेंगे जो T-shirt पर प्रिंट होगी! उस स्थिति में, आप File
ऑप्शन टाइप का प्रयोग कर सकते हैं। कभी-कभी, आपको यूजर्स से कुछ इनपुट लेने की आवश्यकता होगी, जैसे “Your Name”, जो एक key chain पर प्रिंट होगा. और, Text
ऑप्शन टाइप हमारे बचाव के लिए आता है!
इसलिए कुल मिलाकर, प्रोडक्ट खरीदते समय यूजर्स इनपुट के कुछ रूप शामिल होते हैं। और यदि आवश्यक हो, तो आप यूजर्स सिलेक्शन के आधार पर कीमत में वेरिएशन पेश कर सकते हैं।
विभिन्न प्रकार के ऑप्शंस
अब OpenCart में मौजूद अलग-अलग प्रकार के ऑप्शंस को देखते हैं।
Text और TextArea
यूजर्स से कुछ इनपुट टैक्स लेने के लिए इस प्रकार के ऑप्शन का उपयोग किया जाता है। आप या तो Text
को चुन सकते हैं, जो टेक्स्ट बॉक्स प्रदान करेगा, या TextArea
, जो आवश्यक डीटेल्स टाइप करने के लिए यूजर को एक टेक्स्ट एरिया प्रदान करता है।
File Upload
जैसा कि नाम से पता चलता है, आप केस में File
टाइप के ऑप्शन का उपयोग कर सकते हैं जिसमें यूजर्स को प्रोडक्ट के लिए फाइल अपलोड करने की आवश्यकता होती है।
Date और Time
जैसा कि आपने शायद अनुमान लगा लिया होगा, यह यूजर्स को date और time एंटर करने के लिए कहेगा। तीन अलग-अलग टाइप उपलब्ध हैं। Date & Time
टाइप यूजर्स को date और time एक साथ एंटर करने की अनुमति देता है। Date
यूजर्स को केवल date को सिलेक्ट करने की अनुमति देता है। उसी तरह, Time
यूजर्स को केवल time सिलेक्ट करने की अनुमति देता है। यह ऑप्शन टाइप तब उपयोगी होता है जब आप यूजर्स को डिलीवरी की तारीख चुनने के लिए कहना चाहेंगे।
सिलेक्शन पर आधारित इनपुट
इस टाइप के ऑप्शन में, यूजर्स को चुनने के लिए विभिन्न आइटम के साथ प्रस्तुत किया जाता है। यूजर्स सिलेक्शन के लिए चार अलग-अलग टाइप उपलब्ध हैं।
-
Select
टाइप यूजर्स को विभिन्न ऑप्शंस के साथ ड्रॉपडाउन बॉक्स प्रदान करता है।
-
Radio
टाइप प्रत्येक ऑप्शन के लिए अलग-अलग रेडियो बटन प्रदान करता है।
-
Checkbox
टाइप प्रत्येक ऑप्शन के लिए अलग चेकबॉक्स प्रदान करता है। जब आप एक ही ऑप्शन के लिए कई सिलेक्शन प्रदान करना चाहते हैं तो आप इस ऑप्शन का उपयोग कर सकते हैं।
-
Image
कुछ हद तक रेडियो ऑप्शन टाइप के समान ही है, लेकिन एक यूजर को केवल टेक्स्ट के बजाय चुनने के लिए विभिन्न इमेजेस के साथ प्रस्तुत किया जाता है।
तो इतना ही है जहां तक की विभिन्न प्रकार के ऑप्शंस का सवाल है। पर्याप्त थ्योरी, चलो एक्शन में गोता लगाएं!
एक कॉन्फ़िगर करने योग्य प्रोडक्ट सेट अप करना
इस सेक्शन में, हम एडमिन साइड से एक कॉन्फ़िगर करने योग्य प्रोडक्ट सेटअप करेंगे. सबसे पहले, एडमिन साइड के बैकऐंड से Graphic T-Shirt
नामक एक सैंपल प्रोडक्ट बनाएं। आपको बस बेसिक प्रोडक्ट इनफॉरमेशन एंटर करने और कैटेगरी चुनने की आवश्यकता है। आपके द्वारा प्रोडक्ट में एंटर की गई डिटेल महत्वपूर्ण नहीं है, क्योंकि हम केवल प्रोडक्ट एडिट इंटरफेस में उपलब्ध Option टैब पर ध्यान केंद्रित करेंगे। मैं इस सेक्शन के अंत में इस पर वापस आ जाऊंगा।
हम मानते हैं कि हमारा T-Shirt प्रोडक्ट इस तरह से कॉन्फ़िगर करने योग्य है कि कोई भी रंग चुना जा सकता है, कुछ स्लोगन टेक्स्ट एंटर कर सकते हैं, और इमेज भी अपलोड कर सकते हैं जो T-Shirt पर प्रिंट होगी। आइए देखें कि ऑप्शंस का उपयोग करके इसे कैसे पूरा किया जाए।
एक “Color” ऑप्शन को जोड़ें
OpenCart के बैक एंड पर जाएं। Catalog > Options पर जाएं। यह स्टोर में मौजूदा ऑप्शंस को लिस्ट करेगा। नया Color ऑप्शन बनाने के लिए Insert बटन पर क्लिक करें।

जैसा कि ऊपर स्क्रीनशॉट में दिखाया गया है, वैल्यूज को भरे। हमने Option Name फील्ड में Color एंटर किया है। इससे एक टाइटल के रूप में प्रदर्शित किया जाएगा। अगला फील्ड Type है, जिसके लिए हमने Select को चुना है, क्योंकि हम रंग के लिए ड्रॉपडाउन प्रदान करना चाहते हैं। Sort Order बस एक निश्चित क्रम में विभिन्न ऑप्शंस को प्रदर्शित करने के लिए उपयोग किया जाता है। अभी के लिए, हम उस फील्ड में 1 एंटर करेंगे।
आप जब हमने बेसिक इनफार्मेशन जोड़ दी है, तो आपको ऑप्शन वैल्यूज जोड़नी होगी. जाहिर है, इस मामले में अलग-अलग रंग होंगे। Color ऑप्शन के लिए वैल्यूज को जोड़ने के लिए Add Option Value बटन पर क्लिक करें। स्क्रीन शॉट में, यह दिखाता है कि हमने Option Value Name में Red एंटर किया है और फिर से Sort Order 1 है। चलो अब सादगी के लिए Image फील्ड को इग्नोर करें। इसी तरह से दो और रंग जोड़ें, Blue और Green।
एक “Slogan Text” ऑक्शन जोड़ें
अब आगे बढ़ते हैं और “Slogan Text” ऑप्शन सेट करते हैं. फिर से Catalog > Options पेज पर Insert बटन पर क्लिक करें।

जैसे कि आप देख सकते हैं, हमने Option Name फील्ड में Slogan Text
एंटर किया है. वो Type में Text सेट है। Sort Order 2 पर सेट है।
एक “T-shirt Image” ऑप्शन जोड़ी
अंत वाला एक “T-Shirt Image” है, इसलिए चलो आगे बढ़ते हैं और इसे जोड़ते हैं। Catalog > Options पेज पर Insert बटन पर क्लिक करें।

जैसा कि आप देख सकते हैं, हमने Option Name फील्ड में T-Shirt Image
एंटर किया है। और Type में File सेट किया है. Sort Order 3 सेट है।
हमने “Options” स्टॉप सेट अप करने के साथ पूरा कर लिया है. अब, हम ऑफ को प्रोडक्ट के साथ जोड़ना होगा ताकि इसे फ्रंट एंड में प्रदर्शित किया जा सके। मुझे लगता है कि आपने “Graphic T-Shirt” नाम का सैंपल प्रोडक्ट बनाया है जैसा कि मैंने पहले उल्लेख किया है। यदि आपने अभी तक ऐसे नहीं किया है, तो इससे पहले कि आप अगले सेक्शन पर आगे बढ़े इसे कर ले!
प्रोडक्ट में ऑप्शंस को असाइन करें
चलो ऑप्शंस को जोड़ने के लिए तुरंत “Graphic T-Shirt” प्रोडक्ट को एडिट करें. प्रोडक्ट एडिटिंग इंटरफ़ेस में Option टैब पर जाएं। लेफ्ट हैंड साइड में, आपको टेक्सटबॉक्स दिखाई देगा जो ऑटो-कंपलीट है। यदि आप “Color” टाइप करते हैं, तो यह आपको “Color” ऑप्शन दिखाएगा जो हमने पहले जोड़ा था।

ऑटो-कंपलीट टेक्स्ट बॉक्स में Color ऑप्शन पर क्लिक करने पर स्क्रीनशॉट में दिखाए गए अनुसार रंग के लिए एक नई row उड़ जाएगी। उस सेक्शन में, आप अलग अलग ऑप्शन वैल्यूज जोड़ सकते हैं, जिसे आप फ्रंट एंड में रंग ऑप्शन के लिए प्रदर्शित करना चाहते हो. विभिन्न कलर ऑप्शंस को जोड़ने के लिए Add Option Value पर क्लिक करें।
जैसा कि आप देख सकते हैं मैंने तीन ऑप्शन जुड़े हैं: Blue
, Green
, और Red
। अन्य महत्वपूर्ण बात Price फील्ड है। प्रत्येक ऑप्शन के लिए, आप एंटर किए गए अमाउंट से +/- साइन का उपयोग करके प्राइस का वेरिएशन कर सकते हैं। अंत में, आपको प्रत्येक टाइप के ऑप्शन के लिए Quantity स्पेसिफाई करनी होगी, अन्यथा यह प्रिंटर में प्रदर्शित नहीं होगी. तो अब हमने “Color” ऑप्शन के साथ समाप्त कर लिया है।
अब उसी प्रकार के तरीके से “Slogan Text” असाइन करें। हमें इस फील्ड के लिए किसी कॉन्फ़िगरेशन की आवश्यकता नहीं है, कि यह सिंपल टेक्सट-बॉक्स होगा।

अंत में, आइए “T-Shirt Image” को असाइन करें. हमें इस फील्ड के लिए किसी भी कॉन्फ़िगरेशन की आवश्यकता नहीं है, क्योंकि यह एक साधारण फाइल अपलोड फील्ड होगी।

प्रोडक्ट के सभी तीन ऑप्शन स्पेसिफाई करने के बाद, इसे सेव करें. और मेरा विश्वास करो, आपने पूरा कर लिया है!
फ्रंट-एंड की एक टेस्ट राइड करें
चलिए सीधे-सीधे फ्रंट एंड के प्रोडक्ट डिटेल पेज पर विजिट करते हैं जिससे हम इसका परिणाम देख सके!

बहुत अच्छा लग रहा है, है ना? तो आपने बस एक कंफीग्र्ड करने योग्य T-Shirt रोड सेटअप किया है जो यूजर्स को रंग चुनने, स्लोगन के लिए टेक्स्ट एंटर करने और एक इमेज अपलोड करने की अनुमति देता है। आपने शायद वो किया हो कि प्रत्येक अलग रंग के साथ यह अतिरिक्त पैसे चार्ज करता है, जैसा कि बैक एंड में हमारे कॉन्फ़िगरेशन के अनुसार है!
तो अब आप OpenCart में ऑप्शन और कॉन्फ़िगर करने योग्य प्रोडक्ट बनाने में कंफर्टेबल होने चाहिए। तो आज के लिए इतना ही! मैं आपके फीडबैक जानना चाहूंगा।
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post