लिक्विड इंजन के साथ Shopify थीम बनाएं

विषय

• थीम फ़ाइलें और फ़ोल्डर्स
• टेम्प्लेट में URL मैप करना
• तरल: मूल बातें
• उत्पाद को समझना।तरल
• उत्पादन
• तर्क
• फिल्टर
• आगे क्या होगा?
• आगे के संसाधन और प्रेरणा

पिछले कुछ हफ्तों में, मैं कंपनी इलियट जे स्टॉक्स और मैंने पिछले साल बनाई गई व्यूपोर्ट इंडस्ट्रीज के लिए Shopify थीम का निर्माण कर रहा हूं। हमने कई कारणों से Shopify को चुना:

1. यह हमें डिजिटल और भौतिक दोनों उत्पादों को बेचने की अनुमति देता है
2. यह पूरी तरह से होस्ट किया गया है, जिसका अर्थ है कि चिंता करने के लिए कोई सर्वर नहीं है
3. यह कई भुगतान गेटवे का समर्थन करता है जो हमारे बैंक के साथ अच्छी तरह से एकीकृत होते हैं
4. यह विषय-आधारित है, जिसका अर्थ है कि हम अपनी मौजूदा साइट के HTML, CSS और JavaScript का आसानी से पुन: उपयोग कर सकते हैं

Shopify आपके स्टोर से आपके टेम्प्लेट में डेटा आउटपुट करने के लिए लिक्विड नामक टेम्पलेट इंजन का उपयोग करता है। लिक्विड शायद एक Shopify थीम का एक घटक है जिसका आपने पहले उपयोग नहीं किया है और यह अपमानजनक हो सकता है। लेकिन अच्छी खबर यह है कि शुरुआत करना इतना मुश्किल नहीं है।

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

थीम फ़ाइलें और फ़ोल्डर्स

Shopify थीम कई फाइलों (.liquid एक्सटेंशन वाली HTML फाइलें, CSS, JS, इमेज आदि) और फोल्डर से ज्यादा कुछ नहीं हैं। थीम आपकी इच्छानुसार दिख सकती है और काम कर सकती है: वास्तव में कोई प्रतिबंध नहीं हैं। यहाँ एक विषय की मूल संरचना है:

• संपत्ति
• कॉन्फ़िग
• लेआउट
• विषय.तरल
• के टुकड़े
• खाके
• ४०४.तरल
• लेख.तरल
• ब्लॉग.तरल
• गाड़ी.तरल
• संग्रह.तरल
• अनुक्रमणिका.तरल
• पृष्ठ.तरल
• उत्पाद.तरल
• खोज.तरल

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

थीम कैसे काम करती है, इसके बारे में अधिक जानने के लिए, और कॉन्फिग और स्निपेट्स फोल्डर के बारे में जानने के लिए, मैं Shopify विकी पर स्क्रैच और थीम सेटिंग्स से थीम पढ़ने की सलाह दूंगा।

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

टेम्प्लेट में URL मैप करना

Shopify थीम वर्तमान URL को एक विशिष्ट टेम्प्लेट में मैप करके काम करती है। उदाहरण के लिए, यदि हम कोई ऐसा उत्पाद देख रहे हैं जिसमें निम्न URL है...

http://www.unitedpixelworkers.com/products/indianapolis

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

Shopify के अलावा यह जानने के लिए कि वर्तमान URL के संबंध में कौन सा टेम्प्लेट प्रदर्शित करना है, यह हमारे लिए कई विशिष्ट चर उपलब्ध कराता है। इन्हें 'टेम्पलेट चर' के रूप में जाना जाता है और हमें अपने टेम्प्लेट में डेटा प्रदर्शित करने में सक्षम बनाता है।

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

उपलब्ध टेम्प्लेट वेरिएबल्स की पूरी सूची के लिए, मार्क डंकले की शोपिफाई चीट शीट पर जाएं।

तरल: मूल बातें

लिक्विड यहां हमारे जीवन को थीम डिजाइनरों के रूप में आसान बनाने के लिए है। ऐसा करने के मुख्य तरीकों में से एक लेआउट के उपयोग के साथ है। लेआउट सामान्य पृष्ठ तत्वों जैसे हेडर, मुख्य नेविगेशन, पाद लेख आदि को शामिल करने के लिए आदर्श हैं।

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

मैंने यूनाइटेड पिक्सेलवर्कर्स की थीम.लिक्विड फ़ाइल नहीं देखी है, लेकिन आप कल्पना कर सकते हैं कि इसमें नीचे लाल रंग में उल्लिखित क्षेत्रों के लिए मार्क अप है।

यहां बताया गया है कि एक मूल विषय क्या है। तरल लेआउट इस तरह दिख सकता है:

1. !DOCTYPE html>
2. एचटीएमएल>
3. सिर>
4. {{ content_for_header }}
5. शीर्षक>पृष्ठ शीर्षक यहां जाता है/शीर्षक>
6. /सिर>
7. शरीर>
8. {{ content_for_layout }}
9. /शरीर>
10. /html>

आप डबल घुंघराले ब्रेसिज़ में लिपटे दो वाक्यांश देखेंगे: {{ content_for_header }} तथा {{ content_for_layout }}. ये लिक्विड इन एक्शन के हमारे पहले उदाहरण हैं।

Shopify अक्सर किसी दस्तावेज़ के शीर्ष> अनुभाग में विशिष्ट फ़ाइलें जोड़ने के लिए {{ content_for_header }} का उपयोग करता है: उदाहरण के लिए, ट्रैकिंग कोड जोड़ना। {{ content_for_layout }} वह जगह है जहां हमारे URL-मैप किए गए टेम्प्लेट की सामग्री दिखाई देगी। उदाहरण के लिए, यदि हम कोई उत्पाद पृष्ठ देख रहे हैं, तो हमारी product.liquid फ़ाइल हमारी लेआउट फ़ाइल में {{ content_for_layout }} का स्थान ले लेगी।

उत्पाद को समझना।तरल

अब जब हम लेआउट की मूल बातें पढ़ चुके हैं, तो यह एक टेम्प्लेट को देखने का समय है।दुकानें सभी उत्पादों के बारे में हैं, तो आइए देखें उत्पाद.तरल.

यहां उत्पाद का एक बहुत ही सरल लेकिन कार्यात्मक उदाहरण है। तरल टेम्पलेट।

1. h2>{{उत्पाद.शीर्षक}}/h2>
2. {{ उत्पाद वर्णन }}
3. {% अगर उत्पाद उपलब्ध है%}
4. प्रपत्र क्रिया = "/ कार्ट/जोड़ें" विधि = "पोस्ट">
5. आईडी चुनें = "उत्पाद-चयन" नाम = 'आईडी'>
6. {% उत्पाद में प्रकार के लिए।%}
7. विकल्प मूल्य = "{{variant.id}}"> {{ प्रकार। शीर्षक}} - { प्रकार। मूल्य}/विकल्प>
8. {% अंत%}
9. /चुनें>
10. इनपुट प्रकार = "सबमिट करें" नाम = "जोड़ें" मूल्य = "कार्ट में जोड़ें" आईडी = "खरीद" />
11. /फॉर्म>
12. {% अन्य %}
13. p>यह उत्पाद उपलब्ध नहीं है/p>
14. {% अगर अंत %}

यहां कई प्रमुख लिक्विड कॉन्सेप्ट काम कर रहे हैं। आइए उन्हें क्रम से देखें।

उत्पादन

कोड की पहली पंक्ति में वाक्यांश शामिल है {{उत्पाद.शीर्षक}}. जब प्रस्तुत किया जाता है, तो यह उत्पाद के शीर्षक को आउटपुट करेगा, जिसे अब आप जानते हैं कि यूआरएल द्वारा निर्धारित किया जाता है। नीचे दिए गए संयुक्त पिक्सेलवर्कर्स उदाहरण में, उत्पाद का शीर्षक केवल 'इंडियानापोलिस' है।

लिक्विड डॉट सिंटैक्स प्रारूप का उपयोग करता है। इस उदाहरण में, {{ product.title }} उत्पाद टेम्प्लेट वैरिएबल और उसके शीर्षक विशेषता के बराबर है। हम उत्पाद विवरण को उसी तरह से आउटपुट कर सकते हैं {{ उत्पाद वर्णन }}.

इसे तरल शब्दों में इस रूप में जाना जाता है उत्पादन. सभी आउटपुट को डबल कर्ली ब्रेसेस द्वारा निरूपित किया जाता है, जैसे: {{your_output}}।

तर्क

कोड की अगली पंक्ति पर, आप एक कर्ली ब्रेस में एक स्टेटमेंट देखेंगे जिसके बाद %: इस मामले में, {% अगर उत्पाद उपलब्ध है%}. लिक्विड में यह एक और महत्वपूर्ण अवधारणा है जिसे कहा जाता है तर्क. और नीचे, आप {% और%} और अंत में {% endif %} स्टेटमेंट देखेंगे।

यह अगर बयान एक या अधिक स्थितियों के आधार पर हमें यह निर्धारित करने में सक्षम बनाता है कि हमारा टेम्प्लेट क्या प्रदर्शित करता है: इस मामले में, हमारा उत्पाद उपलब्ध है या नहीं। प्रभावी रूप से यह कह रहा है, "यदि हमारा उत्पाद उपलब्ध है, तो उससे संबंधित जानकारी दिखाएं; अन्यथा एक संदेश दिखाएं जिससे उपयोगकर्ता को पता चले कि यह स्टॉक में नहीं है"।

लिक्विड में सभी लॉजिक स्टेटमेंट कर्ली ब्रेस प्रतिशत नोटेशन का उपयोग करते हैं, यानी {% if …%}। बस अपने बयानों को ठीक से बंद करना याद रखें, या आप मुश्किल में पड़ जाएंगे। उदाहरण के लिए:

1. {% अगर उत्पाद उपलब्ध है%}
2. यहां कार्ट में जोड़ें बटन दिखाएं
3. {% अन्य %}
4. उत्पाद अगली बार कब उपलब्ध होगा, इस बारे में संदेश प्रदर्शित करें
5. {% अगर अंत %}

फिल्टर

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

ऊपर दिए गए product.liquid उदाहरण को देखते हुए, आप देखेंगे { पैसे }. वैरिएंट एक ऐसा शब्द है जिसका उपयोग किसी उत्पाद की विविधता का वर्णन करने के लिए किया जाता है: उदाहरण के लिए, विभिन्न रंग और आकार। यहाँ जो दिलचस्प है वह यह है कि हम मूल्य आउटपुट को बदलने के लिए एक फ़िल्टर का उपयोग करते हैं - इस मामले में, मनी फ़िल्टर का उपयोग करके। इसके परिणामस्वरूप कीमत के सामने दुकान का मुद्रा चिन्ह जोड़ा जाएगा।

अन्य फिल्टर में शामिल हैं स्ट्रिप_एचटीएमएल, जो किसी दिए गए पाठ से किसी भी HTML टैग को हटा देगा और यूकेस, जो इसे अपर केस में बदल देगा।

आप एक साथ फ़िल्टर भी जोड़ सकते हैं। उदाहरण के लिए:

1. {लेख सामग्री}

इस उदाहरण में, हम आलेख टेम्पलेट चर की सामग्री विशेषता ले रहे हैं और इसे स्ट्रिप_एचटीएमएल फ़िल्टर और अंत में ट्रंकेट फ़िल्टर में पास कर रहे हैं। आप देखेंगे कि ट्रंकेट फ़िल्टर हमें यह निर्दिष्ट करने की अनुमति देता है कि हम कितने समय के लिए अंतिम आउटपुट चाहते हैं: इस मामले में, 20 वर्ण।

फ़िल्टर हमें टेम्प्लेट में स्क्रिप्ट और छवि तत्व बनाने का त्वरित कार्य करने की अनुमति भी देते हैं। संबद्ध ऑल्ट टैग वाली छवि को आउटपुट करने के लिए फ़िल्टर का उपयोग करने का एक बहुत तेज़ तरीका यहां दिया गया है:

1. { एसेट_यूआरएल }

हमारे Shopify थीम में इसका उपयोग करने के परिणामस्वरूप हमारे टेम्पलेट में निम्नलिखित img तत्व प्रस्तुत किए जाएंगे:

1. img src="/files/shops/your_shop_number/assets/logo.png" alt="साइट लोगो" />

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

आगे क्या होगा?

उम्मीद है, इन कुछ उदाहरणों ने आपको दिखाया है कि लिक्विड इतना जटिल नहीं है। बेशक, आप इसके साथ और भी बहुत कुछ कर सकते हैं, लेकिन आउटपुट, लॉजिक और फिल्टर्स में महारत हासिल करके, आप Shopify थीम बनाने के लिए जो कुछ भी चाहिए, उसे समझने के रास्ते पर हैं।

आगे के संसाधन और प्रेरणा

• उपयोगी स्टार्टर Shopify ट्यूटोरियल
• मार्क डंकले की Shopify चीट शीट
• Blankify: एक Shopify स्टार्टर थीम
• ट्यूटोरियल: स्क्रैच से थीम बनाना Building
• Shopify पार्टनर प्रोग्राम
• 40 प्रेरक Shopify स्टोरify