लिक्विड इंजिनसह शॉपिफा थीम तयार करा

सामग्री

• थीम फाइल्स आणि फोल्डर्स
• टेम्पलेटमध्ये URL मॅप करणे
• द्रव: मूलभूत
• Product.liquid समजणे
• आउटपुट
• तर्कशास्त्र
• फिल्टर
• पुढे काय?
• पुढील संसाधने आणि प्रेरणा

गेल्या काही आठवड्यांपासून, मी व्हिएपोर्ट इंडस्ट्रीजसाठी शॉपिफा थीम तयार करीत आहे, इलियट जय स्टॉक्स आणि मी गेल्या वर्षी तयार केली. आम्ही अनेक कारणांमुळे शॉपिफाई निवडलेः

1. हे आम्हाला डिजिटल आणि भौतिक दोन्ही उत्पादने विकण्याची परवानगी देते
2. हे पूर्णपणे होस्ट केलेले आहे, याचा अर्थ काळजी करण्यासारखे सर्व्हर नाही
3. हे असंख्य पेमेंट गेटवेना समर्थन देते जे आमच्या बँकेत छान समाकलित झाले
4. हा थीम-आधारित आहे, याचा अर्थ असा आहे की आम्ही आमच्या विद्यमान साइटचे HTML, CSS आणि जावास्क्रिप्ट सहजपणे वापरू शकतो

शॉपिफाई आपल्या स्टोअरमधून आपल्या टेम्पलेटमध्ये डेटा आउटपुट करण्यासाठी लिक्विड नावाचे टेम्पलेट इंजिन वापरते. आपण यापूर्वी न वापरलेल्या शॉपिफाई थीमचा कदाचित लिक्विड घटक आहे आणि तो ऑफपुटिंग असू शकतो. पण चांगली बातमी अशी आहे की सुरुवात करणे इतके कठीण नाही.

जर आपण कधीही स्मार्ट, ईआरबी किंवा ट्विग वापरला असेल तर पुढील गोष्टी आपल्या परिचयाचे असतील. नसल्यास काळजी करू नका: ही काही सोप्या नियमांची शिकवण आहे. एकदा आपण आपल्या वेब विकास टूलकिटमध्ये लिक्विड कौशल्ये जोडली की आपण क्लायंटसाठी वेळोवेळी थीम तयार करण्यास सक्षम व्हाल.

थीम फाइल्स आणि फोल्डर्स

शॉपिफाई थीम असंख्य फायली (.liquid विस्तारासह HTML फायली, सीएसएस, जेएस, प्रतिमा आणि असेच) आणि फोल्डर्सशिवाय काहीच नसतात. आपल्याला पाहिजे असलेले थीम पाहू आणि कार्य करू शकतात: खरोखर कोणतेही प्रतिबंध नाहीत. थीमची मूलभूत रचना येथे आहेः

• मालमत्ता
• कॉन्फिगर करा
• लेआउट
• थीम.लिक्विड
• झलकी
• टेम्पलेट्स
• 404.liquid
• लेख.लिव्हिड
• blog.liquid
• cart.liquid
• संग्रह.लिक्विड
• index.liquid
• page.liquid
• product.liquid
• शोध.लिक्विड

या फायलींद्वारे आपण थीमचे सर्वात मूलभूत तयार करू शकता. नक्कीच, तुम्हाला कदाचित काही सीएसएस, जावास्क्रिप्ट आणि काही प्रतिमा जोडाव्याशा वाटतील. आपण मालमत्ता फोल्डरमध्ये ठेवले. (हे लक्षात घेण्यासारखे आहे की आपल्याला सध्या आपल्या मालमत्ता फोल्डरमध्ये सबफोल्डर्सची परवानगी नाही.)

थीम कशी कार्य करतात याविषयी अधिक माहितीसाठी आणि कॉन्फिगरेशन आणि स्निपेट्स फोल्डर्सबद्दल जाणून घेण्यासाठी, मी शॉपिफा विकीवर स्क्रॅच आणि थीम सेटिंग्जमधून थीम वाचण्याची शिफारस करतो.

वैकल्पिकरित्या आपण विनामूल्य भागीदार प्रोग्राममध्ये साइन अप करू शकता, चाचणी दुकान तयार करू शकता आणि आपल्या चाचणीच्या दुकानातील प्रशासकीय क्षेत्रातून उपलब्ध बर्‍याच विनामूल्य थीमपैकी एकची तपासणी करू शकता - फक्त थीम्स मेनूमध्ये असलेल्या थीम संपादकात जा.

टेम्पलेटमध्ये URL मॅप करणे

विशिष्ट टेम्पलेटवर वर्तमान URL मॅप करुन शॉपिफा थीम कार्य करतात. उदाहरणार्थ, आम्ही अशी URL पहात असलेले उत्पादन पहात असल्यास ...

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

... तर शॉपिफाईला आपले वापरायचे कळेल product.liquid टेम्पलेट. या कारणास्तव असे आहे की आपण आपल्या टेम्पलेटसाठी फक्त वर सूचीबद्ध फाईल नावेच वापरली पाहिजेत.

सद्य यूआरएलच्या संदर्भात कोणते टेम्पलेट प्रदर्शित करायचे हे जाणून शॉपिफाय व्यतिरिक्त, ते आमच्यासाठी बरेच विशिष्ट व्हेरिएबल्स उपलब्ध करतात. हे ‘टेम्पलेट व्हेरिएबल्स’ म्हणून ओळखले जातात आणि आमच्या टेम्पलेटमध्ये डेटा प्रदर्शित करण्यास सक्षम करतात.

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

उपलब्ध टेम्पलेट व्हेरिएबल्सच्या पूर्ण सूचीसाठी, मार्क डन्कलेच्या शॉपिफा चीट शीटला भेट द्या.

द्रव: मूलभूत

लिक्विड थीम डिझाइनर म्हणून आपले जीवन सुलभ करण्यासाठी येथे आहे. हे करण्याचा एक मुख्य मार्ग म्हणजे लेआउट वापरणे. शीर्षलेख, मुख्य नेव्हिगेशन, तळटीप इत्यादी सारख्या सामान्य पृष्ठ घटकांचा समावेश करण्यासाठी लेआउट आदर्श आहेत.

वरील माझ्या फोल्‍डर रचनेत आपल्‍याला एक फाईल दिसेल थीम.लिक्विड लेआउट फोल्डर मध्ये. आपण आमचा टेम्पलेट म्हणून थीम.लिक्विडचा विचार करू शकता. आमची इतर सर्व टेम्पलेट्स, जसे की product.liquid, या मास्टर टेम्पलेटमध्ये प्रस्तुत केली गेली आहेत. आपली इच्छा असल्यास आपल्याकडे एकापेक्षा जास्त लेआउट असू शकतात परंतु डीफॉल्ट नेहमीच थीम.लिक्विड असे म्हटले पाहिजे.

मी युनायटेड पिक्सेलवर्कर्सची थीम.लिक्विड फाईल पाहिली नाही, परंतु आपण त्यामध्ये लाल रंगात रेखांकित केलेल्या भागासाठी मार्क अप असल्याची कल्पना करू शकता.

मूलभूत थीम कशा असावी हे येथे आहे.

1. ! डॉक्टर एचटीएमएल>
2. html>
3. डोके>
4. {{सामग्री_साठी_हेडर}
5. शीर्षक> पृष्ठ शीर्षक येथे आहे / शीर्षक>
6. / डोके>
7. शरीर>
8. _ {सामग्री_वस्तू_पर्यादी}
9. / बॉडी>
10. / html>

दुहेरी कुरळे कंसात लपेटलेली दोन वाक्ये आपल्या लक्षात येतील: {{सामग्री_साठी_हेडर} आणि _ {सामग्री_वस्तू_पर्यादी}. लिक्विड अ‍ॅक्शन मधील ही आमची पहिली उदाहरणे आहेत.

शॉपिफाईड दस्तऐवजाच्या विभागामध्ये> मुख्य विभागात विशिष्ट फायली जोडण्यासाठी often {सामग्री_for_header} uses सहसा वापरते: उदाहरणार्थ, ट्रॅकिंग कोड जोडणे. आमच्या URL- मॅप केलेल्या टेम्पलेटची सामग्री जिथे दिसते तेथे our {सामग्री_for_layout}. आहे. उदाहरणार्थ, आम्ही एखादे उत्पादन पृष्ठ पहात असल्यास, आमची product.liquid फाईल आमच्या लेआउट फाइलमध्ये {{सामग्री_for_layout} replace पुनर्स्थित करेल.

Product.liquid समजणे

आता आम्ही लेआउटच्या मूलभूत गोष्टींकडे धाव घेत आहोत, आता टेम्प्लेट पाहण्याची वेळ आली आहे.दुकाने सर्व उत्पादनांविषयी असतात, चला तर मग पाहूया product.liquid.

प्रॉडक्ट.लिव्हिड टेम्पलेटचे येथे एक अगदी साधे परंतु कार्यक्षम उदाहरण आहे.

1. h2> {{product.title} </ h2>
2. . {product.description}
3. product% असल्यास उत्पादन. उपलब्ध% if
4. फॉर्म अ‍ॅक्शन = "/ कार्ट / "ड" मेथड = "पोस्ट">
5. आयडी = "उत्पादन-निवड" नाव = ’आयडी’> निवडा
6. प्रॉडक्ट.व्हेरिएंट% var मध्ये भिन्नतेसाठी {%
7. पर्याय मूल्य = "{{variant.id}}"> {{variant.title}} - {variant.price} / विकल्प>
8. % end%% साठी
9. / निवडा>
10. इनपुट प्रकार = "सबमिट" नाव = "जोडा" मूल्य = "कार्टमध्ये जोडा" आयडी = "खरेदी" />
11. / फॉर्म>
12. {% अन्य%
13. p> हे उत्पादन उपलब्ध नाही </ p>
14. end% अंतिम%}

येथे कामावर बर्‍याच की लिक्विड संकल्पना आहेत. चला त्या क्रमाने पाहू या.

आउटपुट

कोडच्या पहिल्या ओळीत हा वाक्यांश आहे . {product.title}. प्रस्तुत केल्यावर, हे उत्पादनाचे शीर्षक आउटपुट करेल, जे आपल्याला आता माहित आहे की यूआरएल द्वारे निर्धारित केले गेले आहे. खाली युनायटेड पिक्सेलवर्कर्सच्या उदाहरणामध्ये, उत्पादनाचे शीर्षक फक्त ‘इंडियानापोलिस’ आहे.

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

हे लिक्विड अटींमध्ये म्हणून ओळखले जाते आउटपुट. सर्व आउटपुट दुहेरी कुरळे कंस द्वारे दर्शविलेले आहे: {{your_output}}.

तर्कशास्त्र

कोडच्या पुढच्या ओळीवर, तुम्हाला एक कुरळे कंसात एक विधान दिसेल ज्याच्या नंतर%% असेल: या प्रकरणात, product% असल्यास उत्पादन. उपलब्ध% if. म्हणून ओळखल्या जाणार्‍या लिक्विडमधील ही आणखी एक महत्त्वाची संकल्पना आहे तर्कशास्त्र. पुढे खाली, आपल्याला else%%%} आणि शेवटी {% endif%} स्टेटमेन्ट लक्षात येईल.

हे तर विधान एक किंवा अधिक अटींवर आधारित, आमचे टेम्पलेट काय प्रदर्शित करते हे सांगण्यास आम्हाला सक्षम करते: या प्रकरणात, आमचे उत्पादन उपलब्ध आहे की नाही. प्रभावीपणे हे म्हणत आहे की, “जर आमचे उत्पादन उपलब्ध असेल तर त्यासंबंधित माहिती दर्शवा; अन्यथा संदेश संपला की वापरकर्त्यास तो संपला नाही. ”

लिक्विडमधील सर्व लॉजिक स्टेटमेन्ट्स कर्ली ब्रेस टक्केवारी संकेत वापरतात, म्हणजेच {% if…%}. फक्त आपली विधाने योग्यरित्या बंद करणे लक्षात ठेवा किंवा आपण अडचणीत पडाल. उदाहरणार्थ:

1. product% असल्यास उत्पादन. उपलब्ध% if
2. कार्टमध्ये जोडा बटण येथे दर्शवा
3. {% अन्य%
4. पुढील उत्पादन केव्हा उपलब्ध असेल याविषयी संदेश प्रदर्शित करा
5. end% अंतिम%}

फिल्टर

लिक्विड आम्हाला आमच्या उत्पादनास अनेक प्रकारे हाताळण्यास सक्षम करते. यापैकी एक फिल्टर वापरणे आहे. फिल्टरमध्ये गेलेली सामग्री विशिष्ट मार्गाने बदललेली दुसरी टोका बाहेर येईल.

वरील product.liquid उदाहरणाकडे पहात आहात, आपल्याला लक्षात येईल {पैसे. व्हेरिएंट ही एक संज्ञा असते जी उत्पादनांच्या भिन्नतेचे वर्णन करण्यासाठी वापरली जाते: उदाहरणार्थ, भिन्न रंग आणि आकार. येथे सर्वात मनोरंजक बाब म्हणजे आम्ही किंमत उत्पादन बदलण्यासाठी फिल्टर वापरतो - या प्रकरणात, मनी फिल्टरचा वापर करून. यामुळे दुकानाचे चलन प्रतीक किंमतीच्या अग्रभागी जोडले जाईल.

इतर फिल्टरमध्ये समाविष्ट आहे स्ट्रिप_एचटीएमएल, जे दिलेल्या मजकूराच्या तुकड्यातून आणि कोणतेही HTML टॅग काढून टाकेल उकेस, जे त्यास अप्पर केसमध्ये रूपांतरित करेल.

आपण एकत्र फिल्टरमध्ये देखील सामील होऊ शकता. उदाहरणार्थ:

1. {आर्टिकल कॉन्टेन्ट}

या प्रकरणात, आम्ही लेख टेम्पलेट व्हेरिएबलची सामग्री विशेषता घेत आहोत आणि त्यास स्ट्रिप_एचटीएमएल फिल्टर आणि शेवटी ट्रंककेट फिल्टरकडे पाठवित आहोत. आपल्या लक्षात येईल की ट्रंककेट फिल्टर आम्हाला अंतिम आउटपुट किती काळ हवा आहे हे निर्दिष्ट करण्यास अनुमती देते: या प्रकरणात, 20 वर्ण.

फिल्टर आम्हाला टेम्पलेटमध्ये स्क्रिप्ट आणि प्रतिमा घटक तयार करण्याचे द्रुत कार्य करण्यास देखील अनुमती देतात. येथे संबंधित वेल्ड टॅगसह प्रतिमा आउटपुट करण्यासाठी फिल्टर वापरण्याचा एक अतिशय जलद मार्ग आहे:

1. set मालमत्ता_उर्ल}

आमच्या शॉपिफा थीममध्ये याचा वापर केल्याने आमच्या टेम्पलेटमध्ये पुढील img घटक प्रस्तुत केला जाईल:

1. img src = "/ फायली / दुकाने / आपले_शॉप_नम्बर / मालमत्ता / लोगो.png" alt = "साइट लोगो" />

द asset_url सध्याच्या थीमसाठी पूर्ण पथ परत केल्यामुळे फिल्टर खूप उपयुक्त आहे मालमत्ता फोल्डर. हा फिल्टर वापरणे आपल्यास आपली थीम एकाधिक दुकानांमध्ये लागू करणे शक्य करते आणि आपल्याला पथांची चिंता करण्याची आवश्यकता नाही.

पुढे काय?

आशा आहे की या काही उदाहरणांमुळे आपल्याला दिसून आले आहे की लिक्विड इतका गुंतागुंतीचा नाही. नक्कीच, त्यासह आपण बरेच काही करू शकता परंतु आउटपुट, लॉजिक आणि फिल्टर्समध्ये प्रभुत्व मिळविण्यामुळे, आपल्याला शॉपिफा थीम तयार करण्याची आवश्यकता असलेल्या बहुतेक गोष्टी समजून घेण्याच्या मार्गावर आहात.

पुढील संसाधने आणि प्रेरणा

• उपयुक्त स्टार्टर शॉपिफ ट्यूटोरियल
• मार्क डन्कलेची शॉपिफाईड चीट पत्रक
• ब्लँकिफाईः शॉपिफाई स्टार्टर थीम
• ट्यूटोरियल: सुरवातीपासून थीम तयार करणे
• शॉपिफा पार्टनर प्रोग्राम
• 40 प्रेरणादायक शॉपिफा स्टोअर