విషయము
- థీమ్ ఫైల్స్ మరియు ఫోల్డర్లు
- URL లను టెంప్లేట్‌లకు మ్యాపింగ్ చేస్తోంది
- ద్రవ: ప్రాథమికాలు
- Product.liquid ను అర్థం చేసుకోవడం
- అవుట్పుట్
- లాజిక్
- ఫిల్టర్లు
- తర్వాత ఏమిటి?
- మరింత వనరులు మరియు ప్రేరణ
గత కొన్ని వారాలుగా, నేను వ్యూపోర్ట్ ఇండస్ట్రీస్, ఇలియట్ జే స్టాక్స్ అనే సంస్థ కోసం షాపిఫై థీమ్‌ను నిర్మిస్తున్నాను మరియు నేను గత సంవత్సరం ఏర్పడ్డాను. మేము అనేక కారణాల వల్ల Shopify ని ఎంచుకున్నాము:
- ఇది డిజిటల్ మరియు భౌతిక ఉత్పత్తులను విక్రయించడానికి అనుమతిస్తుంది
- ఇది పూర్తిగా హోస్ట్ చేయబడింది, దీని అర్థం ఆందోళన చెందడానికి సర్వర్లు లేవు
- ఇది మా బ్యాంక్‌తో చక్కగా కలిసిపోయే అనేక చెల్లింపు గేట్‌వేలకు మద్దతు ఇస్తుంది
- ఇది థీమ్-ఆధారితమైనది, అంటే మన ప్రస్తుత సైట్ యొక్క HTML, CSS మరియు జావాస్క్రిప్ట్‌లను సులభంగా తిరిగి ఉపయోగించుకోవచ్చు
మీ స్టోర్ నుండి డేటాను మీ టెంప్లేట్‌లలోకి అవుట్పుట్ చేయడానికి Shopify లిక్విడ్ అనే టెంప్లేట్ ఇంజిన్‌ను ఉపయోగిస్తుంది. మీరు ఇంతకు మునుపు ఉపయోగించని షాపిఫై థీమ్ యొక్క ఒక అంశం లిక్విడ్ మరియు ఇది ఆఫ్‌పుట్ కావచ్చు. శుభవార్త ఏమిటంటే ప్రారంభించడం నిజంగా అంత కష్టం కాదు.
మీరు ఎప్పుడైనా స్మార్టీ, ERB లేదా కొమ్మలను ఉపయోగించినట్లయితే, ఈ క్రిందివి మీకు సుపరిచితం. కాకపోతే, చింతించకండి: ఇది కొన్ని సాధారణ నియమాలను నేర్చుకోవడం మాత్రమే. మీరు మీ వెబ్ డెవలప్‌మెంట్ టూల్‌కిట్‌కు ద్రవ నైపుణ్యాలను జోడించిన తర్వాత, మీరు ఎప్పుడైనా ఖాతాదారుల కోసం థీమ్లను రూపొందించడం ప్రారంభించగలరు.
థీమ్ ఫైల్స్ మరియు ఫోల్డర్లు
Shopify థీమ్‌లు అనేక ఫైళ్లు (.లిక్యూడ్ ఎక్స్‌టెన్షన్, CSS, JS, ఇమేజెస్ మరియు మొదలైనవి ఉన్న HTML ఫైల్‌లు) మరియు ఫోల్డర్ల కంటే ఎక్కువ కాదు. మీకు కావలసిన విధంగా థీమ్‌లు చూడవచ్చు మరియు పని చేయగలవు: నిజంగా పరిమితులు లేవు. థీమ్ యొక్క ప్రాథమిక నిర్మాణం ఇక్కడ ఉంది:
- ఆస్తులు
- ఆకృతీకరణ
- లేఅవుట్లు
- theme.liquid
- స్నిప్పెట్స్
- టెంప్లేట్లు
- 404.లిక్విడ్
- article.liquid
- blog.liquid
- cart.liquid
- collection.liquid
- index.liquid
- page.liquid
- product.liquid
- search.liquid
ఈ ఫైళ్ళతో, మీరు చాలా ప్రాథమిక థీమ్లను సృష్టించవచ్చు. వాస్తవానికి, మీరు బహుశా కొన్ని CSS, జావాస్క్రిప్ట్ మరియు కొన్ని చిత్రాలలో జోడించాలనుకుంటున్నారు. మీరు వీటిని ఆస్తుల ఫోల్డర్‌లో ఉంచారు. (మీరు ప్రస్తుతం మీ ఆస్తి ఫోల్డర్‌లో సబ్ ఫోల్డర్‌లను అనుమతించలేదని గమనించాలి.)
థీమ్స్ ఎలా పని చేస్తాయనే దాని గురించి మరియు కాన్ఫిగర్ మరియు స్నిప్పెట్స్ ఫోల్డర్ల గురించి తెలుసుకోవడానికి, షాపిఫై వికీలోని స్క్రాచ్ మరియు థీమ్ సెట్టింగుల నుండి థీమ్ చదవమని నేను సిఫార్సు చేస్తున్నాను.
ప్రత్యామ్నాయంగా మీరు ఉచిత భాగస్వామి ప్రోగ్రామ్‌కు సైన్ అప్ చేయవచ్చు, ఒక పరీక్షా దుకాణాన్ని సృష్టించవచ్చు మరియు మీ టెస్ట్ షాప్ యొక్క నిర్వాహక ప్రాంతం నుండి అందుబాటులో ఉన్న అనేక ఉచిత థీమ్‌లలో ఒకదాన్ని తనిఖీ చేయవచ్చు - థీమ్స్ మెనులో ఉన్న థీమ్ ఎడిటర్‌కు వెళ్లండి.
URL లను టెంప్లేట్‌లకు మ్యాపింగ్ చేస్తోంది
ప్రస్తుత URL ను నిర్దిష్ట టెంప్లేట్‌కు మ్యాప్ చేయడం ద్వారా Shopify థీమ్‌లు పని చేస్తాయి. ఉదాహరణకు, మేము ఈ క్రింది URL ఉన్న ఉత్పత్తిని చూస్తున్నట్లయితే ...
http://www.unitedpixelworkers.com/products/indianapolis
... అప్పుడు Shopify మీ ఉపయోగించడానికి తెలుస్తుంది product.liquid టెంప్లేట్. ఈ కారణంగానే మీరు ఎప్పుడైనా మీ టెంప్లేట్ల కోసం పైన జాబితా చేసిన ఫైల్ పేర్లను మాత్రమే ఉపయోగించాలి.
ప్రస్తుత URL కు సంబంధించి ఏ మూసను ప్రదర్శించాలో Shopify తెలుసుకోవడంతో పాటు, ఇది చాలా నిర్దిష్ట వేరియబుల్స్ మనకు అందుబాటులో ఉంచుతుంది. వీటిని ‘టెంప్లేట్ వేరియబుల్స్’ అని పిలుస్తారు మరియు మా టెంప్లేట్‌లలో డేటాను ప్రదర్శించడానికి వీలు కల్పిస్తుంది.
ఉదాహరణకు మా product.liquid template లో, సముచితంగా పేరు పెట్టబడిన వాటికి ప్రాప్యత ఉంది ఉత్పత్తి వేరియబుల్. దీని అర్థం మేము మా టెంప్లేట్‌లో పేరు, వివరణ, ధర మరియు మా ఉత్పత్తి లభ్యతను అవుట్పుట్ చేయవచ్చు. మా ఉత్పత్తులకు సంబంధించిన డేటాతో మా టెంప్లేట్‌లను జనసాంద్రత చేయడానికి మేము ద్రవ మరియు టెంప్లేట్ వేరియబుల్స్ కలయికను ఉపయోగిస్తాము.
అందుబాటులో ఉన్న టెంప్లేట్ వేరియబుల్స్ యొక్క పూర్తి జాబితా కోసం, మార్క్ డంక్లే యొక్క షాపిఫై చీట్ షీట్‌ను సందర్శించండి.
ద్రవ: ప్రాథమికాలు
థీమ్ డిజైనర్లుగా మన జీవితాలను సులభతరం చేయడానికి లిక్విడ్ ఇక్కడ ఉంది. ఇది చేసే ప్రధాన మార్గాలలో ఒకటి లేఅవుట్ల వాడకం. శీర్షిక, ప్రధాన నావిగేషన్, ఫుటరు మరియు వంటి సాధారణ పేజీ అంశాలను చేర్చడానికి లేఅవుట్లు అనువైనవి.
పైన ఉన్న నా ఫోల్డర్ నిర్మాణంలో, మీరు అనే ఫైల్‌ను గమనించవచ్చు theme.liquid లేఅవుట్ల ఫోల్డర్‌లో. మీరు మా మాస్టర్ టెంప్లేట్‌గా థీమ్.లిక్విడ్ గురించి ఆలోచించవచ్చు. Product.liquid వంటి మా అన్ని ఇతర టెంప్లేట్లు ఈ మాస్టర్ టెంప్లేట్ లోపల ఇవ్వబడ్డాయి. మీరు కోరుకుంటే ఒకటి కంటే ఎక్కువ లేఅవుట్‌లను కలిగి ఉండవచ్చు, కానీ డిఫాల్ట్‌గా ఎల్లప్పుడూ థీమ్.లిక్విడ్ అని పిలువబడాలి.
నేను యునైటెడ్ పిక్సెల్ వర్కర్స్ థీమ్.లిక్విడ్ ఫైల్‌ను చూడలేదు, కానీ దిగువ ఎరుపు రంగులో పేర్కొన్న ప్రాంతాలకు మార్క్ అప్ ఉన్నట్లు మీరు imagine హించవచ్చు.
ప్రాథమిక థీమ్ ఇక్కడ ఉంది. లిక్విడ్ లేఅవుట్ ఎలా ఉంటుంది:
- ! DOCTYPE html>
- html>
- తల>
- {{content_for_header}}
- శీర్షిక> పేజీ శీర్షిక ఇక్కడకు వెళుతుంది / శీర్షిక>
- / తల>
- శరీరం>
- {{content_for_layout}}
- / శరీరం>
- / html>
డబుల్ కర్లీ కలుపులతో చుట్టబడిన రెండు పదబంధాలను మీరు గమనించవచ్చు: {{content_for_header}} మరియు {{content_for_layout}}. ఇవి లిక్విడ్ ఇన్ యాక్షన్ యొక్క మా మొదటి ఉదాహరణలు.
షాపిఫై తరచుగా పత్రం యొక్క హెడ్> విభాగానికి నిర్దిష్ట ఫైళ్ళను జోడించడానికి {{content_for_header} uses ను ఉపయోగిస్తుంది: ఉదాహరణకు, ట్రాకింగ్ కోడ్‌లో జోడించడం. URL {content_for_layout}} అంటే మా URL- మ్యాప్ చేసిన టెంప్లేట్ యొక్క కంటెంట్ కనిపిస్తుంది. ఉదాహరణకు, మేము ఉత్పత్తి పేజీని చూస్తున్నట్లయితే, మా product.liquid ఫైల్ మా లేఅవుట్ ఫైల్‌లో {{content_for_layout} replace ని భర్తీ చేస్తుంది.
Product.liquid ను అర్థం చేసుకోవడం
ఇప్పుడు మేము లేఅవుట్ల యొక్క ప్రాథమిక అంశాల ద్వారా నడుస్తున్నాము, ఇది ఒక టెంప్లేట్‌ను చూడవలసిన సమయం.షాపులు అన్నీ ఉత్పత్తుల గురించి, కాబట్టి చూద్దాం product.liquid.
Product.liquid template యొక్క చాలా సరళమైన కానీ క్రియాత్మకమైన ఉదాహరణ ఇక్కడ ఉంది.
- h2> {{product.title}} / h2>
- {{ ఉత్పత్తి వివరణ }}
- product% ఉంటే ఉత్పత్తి. అందుబాటులో%}
- form action = "/ cart / add" method = "post">
- id = "product-select" name = ’id’> ఎంచుకోండి
- product.vantants% in లో వేరియంట్ కోసం {%
- ఎంపిక విలువ = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
- end% endfor%}
- / ఎంచుకోండి>
- ఇన్పుట్ రకం = "సమర్పించు" పేరు = "జోడించు" విలువ = "బండికి జోడించు" id = "కొనుగోలు" />
- / రూపం>
- {% లేకపోతే %}
- p> ఈ ఉత్పత్తి అందుబాటులో లేదు / p>
- {% endif%}
ఇక్కడ పనిలో అనేక కీలకమైన ద్రవ అంశాలు ఉన్నాయి. వాటిని క్రమంగా చూద్దాం.
అవుట్పుట్
కోడ్ యొక్క మొదటి పంక్తి పదబంధాన్ని కలిగి ఉంది {{product.title}}. అన్వయించినప్పుడు, ఇది ఉత్పత్తి యొక్క శీర్షికను అవుట్పుట్ చేస్తుంది, ఇది మీకు ఇప్పుడు తెలిసినట్లుగా URL ద్వారా నిర్ణయించబడుతుంది. దిగువ యునైటెడ్ పిక్సెల్ వర్కర్స్ ఉదాహరణలో, ఉత్పత్తి శీర్షిక కేవలం ‘ఇండియానాపోలిస్’.
లిక్విడ్ డాట్ సింటాక్స్ ఆకృతిని ఉపయోగిస్తుంది. ఈ సందర్భంలో, template {product.title} the ఉత్పత్తి టెంప్లేట్ వేరియబుల్ మరియు దాని టైటిల్ లక్షణానికి సమానం. మేము ఉత్పత్తి వివరణను ఉపయోగించి అదే విధంగా అవుట్పుట్ చేయవచ్చు {{ ఉత్పత్తి వివరణ }}.
దీనిని లిక్విడ్ పరంగా అంటారు అవుట్పుట్. అన్ని అవుట్పుట్ ఈ క్రింది విధంగా డబుల్ కర్లీ కలుపుల ద్వారా సూచించబడుతుంది: {{your_output}}.
లాజిక్
కోడ్ యొక్క తదుపరి పంక్తిలో, మీరు వంకర కలుపులో ఒక ప్రకటనను గమనించవచ్చు, దాని తరువాత%: ఈ సందర్భంలో, product% ఉంటే ఉత్పత్తి. అందుబాటులో%}. లిక్విడ్‌లో ఇది మరొక ముఖ్యమైన భావన తర్కం. మరింత క్రిందికి, మీరు else% else%} మరియు చివరకు {% endif%} స్టేట్‌మెంట్‌లను గమనించవచ్చు.
ఇది స్టేట్మెంట్ ఉంటే ఒకటి లేదా అంతకంటే ఎక్కువ షరతుల ఆధారంగా మా టెంప్లేట్ ప్రదర్శించే వాటిని నిర్దేశించడానికి మాకు సహాయపడుతుంది: ఈ సందర్భంలో, మా ఉత్పత్తి అందుబాటులో ఉందో లేదో. సమర్థవంతంగా ఇది ఇలా చెబుతోంది, “మా ఉత్పత్తి అందుబాటులో ఉంటే, దానికి సంబంధించిన సమాచారాన్ని చూపించు; లేకపోతే అది స్టాక్ అయిందని వినియోగదారుకు తెలియజేసే సందేశాన్ని చూపించు ”.
లిక్విడ్‌లోని అన్ని లాజిక్ స్టేట్‌మెంట్‌లు కర్లీ బ్రేస్ శాతం సంజ్ఞామానాన్ని ఉపయోగిస్తాయి, అనగా {% ఉంటే…%}. మీ స్టేట్‌మెంట్‌లను సముచితంగా మూసివేయాలని గుర్తుంచుకోండి లేదా మీరు ఇబ్బందుల్లో పడతారు. ఉదాహరణకి:
- product% ఉంటే ఉత్పత్తి. అందుబాటులో%}
- కార్ట్ బటన్కు జోడించు ఇక్కడ చూపించు
- {% లేకపోతే %}
- ఉత్పత్తి ఎప్పుడు అందుబాటులో ఉంటుంది అనే దాని గురించి సందేశాన్ని ప్రదర్శించండి
- {% endif%}
ఫిల్టర్లు
ద్రవ మా ఉత్పత్తిని అనేక విధాలుగా మార్చటానికి అనుమతిస్తుంది. వీటిలో ఒకటి ఫిల్టర్లను ఉపయోగించడం. ఫిల్టర్‌లోకి వెళ్లే కంటెంట్ ఒక నిర్దిష్ట మార్గంలో మార్చబడిన మరొక చివర బయటకు వస్తుంది.
పైన ఉన్న product.liquid ఉదాహరణను చూస్తే, మీరు గమనించవచ్చు {డబ్బు}. వేరియంట్ అనేది ఉత్పత్తి యొక్క వైవిధ్యాన్ని వివరించడానికి ఉపయోగించే పదం: ఉదాహరణకు, విభిన్న రంగులు మరియు పరిమాణాలు. ఇక్కడ ఆసక్తికరమైన విషయం ఏమిటంటే, ధర అవుట్‌పుట్‌ను మార్చడానికి మేము ఫిల్టర్‌ను ఉపయోగిస్తాము - ఈ సందర్భంలో, డబ్బు ఫిల్టర్‌ను ఉపయోగించడం ద్వారా. దీని ఫలితంగా దుకాణం యొక్క కరెన్సీ చిహ్నం ధర ముందు భాగంలో జోడించబడుతుంది.
ఇతర ఫిల్టర్లలో ఉన్నాయి స్ట్రిప్_హెచ్ఎమ్, ఇచ్చిన టెక్స్ట్ నుండి ఏదైనా HTML ట్యాగ్‌లను తీసివేస్తుంది మరియు ucase, ఇది అప్పర్ కేస్‌గా మారుస్తుంది.
మీరు ఫిల్టర్లను కూడా కలిసి చేరవచ్చు. ఉదాహరణకి:
- {article.content}
ఈ సందర్భంలో, మేము ఆర్టికల్ టెంప్లేట్ వేరియబుల్ యొక్క కంటెంట్ లక్షణాన్ని తీసుకొని దానిని స్ట్రిప్_హెచ్ఎమ్ ఫిల్టర్కు మరియు చివరకు కత్తిరించే ఫిల్టర్కు పంపుతున్నాము. తుది అవుట్పుట్ ఎంతసేపు ఉండాలని మేము కోరుకుంటున్నారో పేర్కొనడానికి కత్తిరించే వడపోత మాకు అనుమతిస్తుందని మీరు గమనించవచ్చు: ఈ సందర్భంలో, 20 అక్షరాలు.
టెంప్లేట్‌లలో స్క్రిప్ట్ మరియు ఇమేజ్ ఎలిమెంట్స్‌ని త్వరగా సృష్టించడానికి ఫిల్టర్లు కూడా అనుమతిస్తాయి. అనుబంధ ఆల్ట్ ట్యాగ్‌తో చిత్రాన్ని అవుట్పుట్ చేయడానికి ఫిల్టర్‌ను ఉపయోగించడానికి ఇక్కడ చాలా శీఘ్ర మార్గం:
- {ఆస్తి_ర్ల్}
మా Shopify థీమ్‌లో దీన్ని ఉపయోగించడం వల్ల మా టెంప్లేట్‌లో కింది img మూలకం ఇవ్వబడుతుంది:
- img src = "/ files / shop / your_shop_number / assets / logo.png" alt = "సైట్ లోగో" />
ది ఆస్తి_ఆర్ల్ ప్రస్తుత థీమ్‌కు పూర్తి మార్గాన్ని అందించే ఫిల్టర్ చాలా ఉపయోగకరంగా ఉంటుంది ఆస్తులు ఫోల్డర్. ఈ ఫిల్టర్‌ను ఉపయోగించడం ద్వారా మీరు మీ థీమ్‌ను బహుళ షాపుల్లో వర్తింపజేయడం సాధ్యపడుతుంది మరియు మార్గాల గురించి ఆందోళన చెందాల్సిన అవసరం లేదు.
తర్వాత ఏమిటి?
లిక్విడ్ అంత క్లిష్టంగా లేదని ఈ కొన్ని ఉదాహరణలు మీకు చూపించాయని ఆశిద్దాం. వాస్తవానికి, మీరు దీన్ని చేయగలిగేది చాలా ఎక్కువ, కానీ అవుట్పుట్, లాజిక్ మరియు ఫిల్టర్లను మాస్టరింగ్ చేయడం ద్వారా, మీరు షాపిఫై థీమ్‌ను నిర్మించాల్సిన అవసరం ఏమిటో అర్థం చేసుకోవడానికి మీరు బాగానే ఉన్నారు.
మరింత వనరులు మరియు ప్రేరణ
- ఉపయోగకరమైన స్టార్టర్ Shopify ట్యుటోరియల్స్
- మార్క్ డంక్లే యొక్క షాపిఫై చీట్ షీట్
- బ్లాంకీఫై: షాపిఫై స్టార్టర్ థీమ్
- ట్యుటోరియల్: మొదటి నుండి థీమ్‌ను నిర్మించడం
- Shopify భాగస్వామి ప్రోగ్రామ్
- 40 ఉత్తేజకరమైన Shopify దుకాణాలు
