OpenCart के साथ एक कस्टम थीम बनाएँ: भाग तीन

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

इस सीरीज के पिछले भाग में, हमने सीखा कि कस्टम थीम कैसे बनाएं और इसे OpenCart के बैक-एंड से इनेबल करें। हमने यह भी अध्ययन किया कि एप्लिकेशन में टेम्पलेट ओवरराइडिंग सिस्टम कैसे काम करता है।

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

व्यापक रूप से बोलते हुए, जब हम OpenCart द्वारा प्रदान किये गए टेम्पलेट्स को देखते हैं, तो हम उन्हें तीन अलग-अलग केटेगरी में वर्गीकृत कर सकते हैं। यह ध्यान रखना महत्वपूर्ण है कि इसे OpenCart डॉक्यूमेंटेशन में आधिकारिक तौर पर नहीं बताया गया है, लेकिन इससे हमें यह समझने में मदद मिलेगी कि फ्रंट एंड में एक पूर्ण पेज जेनेरेट करने के लिए वास्तव में क्या होता है।

लेआउट टेम्पलेट्स

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

स्लॉट हेडर, फुटर, साइडबार एलिमेंट, और मॉड्यूल कंटेंट जैसे एलिमेंट्स को रेफेर कर सकते हैं। स्टोर फ्रंट-एंड में लगभग हर पेज के लिए, एक संबंधित लेआउट टेम्पलेट मौजूद है।

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

सब-टेम्पलेट्स

इस प्रकार का टेम्पलेट विशिष्ट कंटेंट के लिए एक स्लॉट उत्पन्न करता है। एक सामान्य सिनेरियो में, कंटेंट सब-टेम्पलेट द्वारा जेनेरेट होती है और इसे लेआउट टेम्पलेट में पुश किया जाता है। इस तरह का सबसे सरल उदाहरण template/common/header.tpl है। यह फ्रंट पेज के प्रत्येक पेज के लिए हेडर भाग जेनेरेट करने के लिए ज़िम्मेदार है।

और जैसा कि हमने पहले चर्चा की थी, OpenCart टेम्पलेट फाइलों को व्यवस्थित करने का एक अच्छा तरीका प्रदान करता है जैसे कि यह समझ में आता है कि header.tpl को common डायरेक्टरी में रखा गया है। इस डायरेक्टरी में अधिकांश टेम्पलेट स्लॉट-स्पेसिफिक कंटेंट उत्पन्न करते हैं जो अंत में लेआउट में प्लग किया जाता है।

मॉड्यूल टेम्पलेट्स

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

डिफ़ॉल्ट रूप से, लेआउट टेम्पलेट में चार अलग-अलग रीजन की पोजीशन उपलब्ध होती है। वो हैं:

Content Top
Content Bottom
Content Left
Content Right

आप इनमें से किसी भी पोजीशन में मॉड्यूल असाइन कर सकते हैं। जैसा कि नाम से पता चलता है, यदि आपने "Content Top" पोजीशन में मॉड्यूल असाइन किया है, तो यह पेज की मुख्य कंटेंट के ऊपर प्रदर्शित होगा। मॉड्यूल टेम्पलेट template/module डायरेक्टरी के भीतर पाए जाते हैं, इसलिए यदि आप एक नया मॉड्यूल बना रहे हैं, तो आपको इस डायरेक्टरी में एक संबंधित टेम्पलेट रखना होगा।

मॉड्यूल टेम्पलेट्स और सब-टेम्पलेट्स इस तरह से समान होते हैं कि उनका OpenCart द्वारा ट्रीट किया जाता है। इन दोनों को चाइल्ड टेम्पलेट के रूप में माना जाता है और पेज जनरेशन की प्रक्रिया में लेआउट टेम्पलेट पर पुश किया जाता है।

फ्रंट एंड में लेआउट टेम्पलेट डिस्कवरी

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

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

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

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

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

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

1. स्ट्रक्चर के आधार पर प्रिडिक्शन

किसी भी रूट के साथ संबंधित टेम्पलेट की प्रिडिक्शन करने का यह सबसे आसान तरीका है। OpenCart की टर्मिनोलॉजी में, "route" लिंक URL में एक क्वेरी-स्ट्रिंग वैरिएबल है।

उदाहरण के लिए, फ्रंट-एंड में निम्न लिंक URL पर विचार करें जो यूजर को लॉगिन पेज प्रदर्शित करता है:

https://www.youropencartdomain.com/index.php?route=account/login.

तो उपरोक्त URL में, account/login "route" पैरामीटर कि वैल्यू है जो हमारे लिए उपयोगी होगी। आप इस वैल्यू को डिफ़ॉल्ट थीम की template डायरेक्टरी में आसानी से मैप कर सकते हैं। इस मामले में, आपके द्वारा समाप्त किए गए टेम्पलेट पाथ की तरह कुछ है:

{opencart_document_root}/catalog/view/theme/default/template/account/login.tpl

जैसा कि आपने ध्यान दिया होगा, "route" वैल्यू का दूसरा भाग, "लॉगिन", टेम्पलेट फ़ाइल नाम (उपरोक्त मामले में login.tpl) बन जाता है। आइए एक और उदाहरण लें:

http://www.youropencartdomain.com/index.php?route=product/product&path=1&product_id=1

यह प्रोडक्ट डिटेल पेज के लिए "route" पैरामीटर फॉर्मेट का उदाहरण है। "route" पैरामीटर की वैल्यू product/product है, इसलिए इस रूट के लिए टेम्पलेट यहां पाया जाना चाहिए:

{opencart_document_root}/catalog/view/theme/default/template/product/product.tpl

2. The Geek Way

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

चलिए लिंक URL पर विचार करें जो यूजर को फ्रंट पेज में लॉगिन पेज प्रदर्शित करता है:

http://www.youropencartdomain.com/index.php?route=account/login

आप एक संबंधित कंट्रोलर फ़ाइल खोजने के लिए catalog/controller से संबंधित रूट की वैल्यू को मैप कर सकते हैं। तो इस मामले में, कंट्रोलर फ़ाइल के साथ आपको इस प्रकार समाप्त करना चाहिए:

{opencart_document_root}/catalog/controller/account/login.php

जैसा कि आपने देखा होगा, "route" वैल्यू का दूसरा भाग, "login", कंट्रोलर फ़ाइलनेम (उपरोक्त मामले में login.php) बन जाता है। एक बार जब आप एक संबंधित कंट्रोलर फ़ाइल पा लेते हैं, तो आपको कोड को कुछ इस तरह दिखना चाहिए:

$this->template = 'default/template/account/login.tpl';

यह OpenCart को बताने के लिए कंट्रोलर का तरीका है कि इसे "default" थीम से "login.tpl" लेआउट टेम्पलेट प्रदर्शित करना चाहिए। और हां, निश्चित रूप से, यदि इस टेम्पलेट को आपकी कस्टम थीम में ओवरराइड कर दिया गया है, तो उसे पहली प्राथमिकता दी जाएगी!

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

लेआउट टेम्पलेट के कॉमन एलिमेंट

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

आइए रिफरेन्स के लिए लेआउट टेम्पलेट फ़ाइल default/template/account/login.tpl को खोलें।

$header OpenCart पेज में हेडर भाग के कंटेंट को प्रदर्शित करता है। इससे संबंधित टेम्पलेट default/template/common/header.tpl पर पाया जा सकता है।

$footer एक OpenCart पेज में फुटर भाग के कंटेंट को प्रदर्शित करता है। इससे संबंधित टेम्पलेट default/template/common/footer.tpl पर पाया जा सकता है।

$column_left बैक-एंड से "Column Left" पोजीशन को एसाइन्ड सभी मॉड्यूल के आउटपुट को प्रदर्शित करने के लिए ज़िम्मेदार है। इससे संबंधित टेम्पलेट default/template/common/column_left.tpl पर पाया जा सकता है।

$column_right बैक एंड से "Column Right" पोजीशन को एसाइन्ड सभी मॉड्यूल के आउटपुट को प्रदर्शित करने के लिए ज़िम्मेदार है। इससे संबंधित टेम्पलेट default/template/common/column_right.tpl पर पाया जा सकता है।

लॉगिन पेज के राइट साइडबार में प्रदर्शित एक "Account" ब्लॉक इस तरह के कंटेंट का एक उदाहरण प्रदान करता है। जिस मामले में आप किसी विशिष्ट मॉड्यूल के आउटपुट को कस्टमाइज़ करना चाहते हैं, आपको उस फाइल को default/template/module/{modulename.tpl} पर मिलना चाहिए।

"Account" मॉड्यूल के मामले में, फ़ाइल default/template/module/account.tpl है। जैसा कि आप देख सकते हैं, मॉड्यूल टेम्पलेट फ़ाइल का नेमिंग कन्वेंशन अनुमान लगाने में काफी आसान है क्योंकि यह मॉड्यूल के नाम के समान ही है।

$content_top बैक-एंड से "Content Top" पोजीशन को एसाइन्ड सभी मॉड्यूल के आउटपुट को प्रदर्शित करने के लिए ज़िम्मेदार है। इससे संबंधित टेम्पलेट default/template/common/content_top.tpl पर पाया जा सकता है।

$content_bottom बैक एंड से "Content Bottom" पोजीशन को एसाइन्ड सभी मॉड्यूल के आउटपुट को प्रदर्शित करने के लिए ज़िम्मेदार है। इससे संबंधित टेम्पलेट default/template/common/content_bottom.tpl पर पाया जा सकता है।

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

सारांश

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

इस सीरीज के अंतिम भाग में, हम OpenCart होम पेज की लेआउट स्ट्रक्चर को बदलने के लिए एक विस्तृत उपयोग का उदाहरण देखेंगे। नीचे दिए गए फ़ीड में आपके विचार और कमैंट्स का स्वागत है!