Сұйық қозғалтқышымен Shopify тақырыбын құрыңыз

Автор: Peter Berry

Жасалған Күн: 14 Шілде 2021

Жаңарту Күні: 13 Мамыр 2024

Сұйық қозғалтқышымен Shopify тақырыбын құрыңыз - Шығармашылық

Мазмұны

Тақырыптық файлдар мен қалталар
URL мекен-жайларын шаблондарға салыстыру
Сұйықтық: негіздері
Өнімді түсіну
Шығу
Логика
Сүзгілер
Келесі не?
Қосымша ресурстар мен шабыт

Соңғы бірнеше аптада мен Shopify тақырыбын Viewport Industries, Elliot Jay Stocks компаниясы және мен былтыр құрдық. Біз Shopify-ті бірнеше себептер бойынша таңдадық:

Бұл сандық және физикалық өнімдерді сатуға мүмкіндік береді
Бұл толығымен орналастырылған, бұл алаңдамайтын серверлерді білдіреді
Бұл біздің банкпен жақсы интеграцияланған бірқатар төлем шлюздерін қолдайды
Бұл тақырыпқа негізделген, яғни біз өзіміздің HTML, CSS және JavaScript сайттарымызды оңай қолдана аламыз

Shopify дүкеннен деректерді шаблондарға шығару үшін Liquid деп аталатын шаблондық жүйені қолданады. Сұйықтық - сіз бұрын қолданбаған Shopify тақырыбының бір ингредиенті болуы мүмкін және ол тиімді болуы мүмкін. Бірақ жақсы жаңалық - оны бастау онша қиын емес.

Егер сіз бұрын-соңды Smarty, ERB немесе Twig-ді қолданған болсаңыз, келесілер сізге таныс болады. Егер жоқ болса, алаңдамаңыз: бұл жай бірнеше қарапайым ережелерді білу ғана. Вебті әзірлеу құралдарына сұйықтық дағдыларын қосқаннан кейін, сіз клиенттерге арналған тақырыптарды тез арада бастауға мүмкіндік аласыз.

Тақырыптық файлдар мен қалталар

Shopify тақырыптары тек бірнеше файлдардан тұрады (.quid кеңейтімі бар HTML файлдары, CSS, JS, суреттер және т.б.) және қалталар. Тақырыптар қалағандай көрінуі және жұмыс істеуі мүмкін: шектеулер жоқ. Тақырыптың негізгі құрылымы:

активтер
конфигурация
макеттер
сұйық
үзінділер
шаблондар
404. сұйық
мақала. сұйық
блог. сұйық
сұйық
сұйық
сұйық
бет. сұйық
сұйық
сұйық

Осы файлдардың көмегімен сіз ең қарапайым тақырыптарды жасай аласыз. Әрине, кейбір CSS, JavaScript және бірнеше суреттер қосқыңыз келетін шығар. Сіз бұларды активтер қалтасына салған боларсыз. (Айта кету керек, қазіргі уақытта активтер қалтасындағы ішкі қалталарға рұқсат жоқ.)

Тақырыптардың қалай жұмыс істейтіні туралы және конфигурация мен үзінділердің қалталары туралы білу үшін мен Shopify Wiki-дегі Scratch және Theme Settings тақырыптарын оқуға кеңес беремін.

Сонымен қатар, сіз серіктес бағдарламасына тіркеліп, сынақ дүкенін құра аласыз және тест дүкенінің әкімші аймағындағы көптеген тегін тақырыптардың бірін тексере аласыз - тек тақырыптар мәзірінде орналасқан тақырып редакторына өтіңіз.

URL мекен-жайларын шаблондарға салыстыру

Shopify тақырыптары ағымдағы URL мекенжайын белгілі бір шаблонмен салыстыру арқылы жұмыс істейді. Мысалы, келесі URL мекенжайы бар өнімді қарап жатсақ ...

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

... содан кейін Shopify сіздіңді қолдануды білетін болады сұйықтық шаблон. Сондықтан сіз шаблондар үшін жоғарыда аталған файл атауларын ешқашан пайдаланбаңыз.

Ағымдағы URL-ке қатысты қай шаблонды көрсететінін білуге Shopify-дан басқа, ол бізге бірнеше нақты айнымалыларды ұсынады. Олар «шаблондық айнымалылар» деп аталады және бізге шаблондардағы деректерді көрсетуге мүмкіндік береді.

Мысалы, біздің product.liquid шаблонында біз дұрыс атталғанға қол жеткізе аламыз өнім айнымалы. Бұл өнімнің атауын, сипаттамасын, бағасын және қол жетімділігін шаблонымызға енгізе аламыз дегенді білдіреді. Сұйық және шаблон айнымалыларының тіркесімін өз үлгілерімізге қатысты мәліметтермен толтыру үшін қолданамыз.

Үлгі айнымалыларының толық тізімін көру үшін Mark Dunkley’s Shopify Cheat Sheet-ке кіріңіз.

Сұйықтық: негіздері

Сұйықтық - тақырып дизайнерлері ретінде өмірімізді жеңілдету үшін осында. Мұны жасаудың негізгі тәсілдерінің бірі - макеттерді қолдану. Макеттер тақырып, негізгі навигация, колонтитул және т.с.с. сияқты жалпы парақ элементтерін қосуға өте ыңғайлы.

Жоғарыдағы менің папка құрылымында сіз аталған файлды байқайсыз сұйық макеттер қалтасында. Сіз theme.liquid деп біздің негізгі шаблон ретінде қарастыра аласыз. Біздің барлық басқа шаблондар, мысалы, product.liquid осы негізгі шаблон ішінде көрсетілген. Қаласаңыз, сізде бірнеше жоспарлар болуы мүмкін, бірақ әдепкіде әрқашан theme.liquid деп аталуы керек.

Мен United Pixelworkers ’theme.liquid файлын көрген емеспін, бірақ сіз оны төменде қызыл түспен көрсетілген аймақтардың белгісі бар деп елестете аласыз.

Сұйық орналасу келесідей болуы мүмкін:

! DOCTYPE html>
html>
бас>
{{content_for_header}}
тақырып> Бет тақырыбы осында / тақырып>
/ бас>
дене>
{{content_for_layout}}
/ дене>
/ html>

Сіз екі бұйра жақшаға оралған екі тіркесті байқайсыз: {{content_for_header}} және {{content_for_layout}}. Бұл сұйықтықтың іс-әрекеттегі алғашқы мысалдары.

Shopify көбінесе құжаттың бас> бөліміне белгілі бір файлдарды қосу үшін {{content_for_header}} қолданады: мысалы, бақылау кодына қосу. {{content_for_layout}} - бұл URL мекен-жайымен салыстырылған шаблонның мазмұны пайда болады. Мысалы, егер біз өнімнің бетін қарап жатсақ, біздің product.liquid файлы орналасу файлындағы {{content_for_layout}} орнын басады.

Өнімді түсіну

Енді макеттердің негіздерін оқып шыққаннан кейін, шаблонды қарау уақыты келді.Дүкендер өнімдерге қатысты, сондықтан қарастырайық сұйықтық.

Мұнда өнімнің өте қарапайым, бірақ функционалды мысалы келтірілген. Сұйық шаблон.

h2> {{product.title}} / h2>
{{ Өнім Сипаттамасы }}
{% if product.available%}
form action = «/ cart / add» method = «post»>
id = «product-select» name = ’id’> таңдаңыз
product.variants нұсқасындағы% үшін%}
параметр мәні = «{{variant.id}}»> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ таңдаңыз
енгізу түрі = «жіберу» аты = «қосу» мәні = «Себетке қосу» id = «сатып алу» />
/ форма>
{% else%}
p> Бұл өнім жоқ / p>
{% endif%}

Мұнда бірқатар негізгі сұйық ұғымдар бар. Оларды ретімен қарастырайық.

Шығу

Кодтың бірінші жолында сөз тіркесі бар {{product.title}}. Көрсетілген кезде бұл өнімнің тақырыбын шығарады, оны сіз қазір білесіз, URL мекен-жайы бойынша анықтайды. Төмендегі Біріккен Pixelworkers мысалында өнімнің атауы жай «Индианаполис» болып табылады.

Сұйықтық нүктелік синтаксистік форматты қолданады. Бұл жағдайда {{product.title}} өнім шаблонының айнымалысына және оның атрибутына теңестіріледі. Біз өнімнің сипаттамасын қолдана отырып дәл осылай шығара аламыз {{ Өнім Сипаттамасы }}.

Бұл сұйық терминдер ретінде белгілі шығу. Барлық шығыс қос бұрымды жақшалармен белгіленеді, келесідей: {{your_output}}.

Логика

Кодтың келесі жолында сіз бұйра жақшадағы сөйлемді, содан кейін% -ды байқайсыз: бұл жағдайда, {% if product.available%}. Бұл сұйықтықтағы тағы бір маңызды ұғым логика. Одан әрі, сіз {% else%} және соңында {% endif%} мәлімдемелерін байқайсыз.

Бұл егер мәлімдеме бізге бір немесе бірнеше шартқа негізделген шаблон көрсететін нәрсені айтуға мүмкіндік береді: бұл жағдайда біздің өнім қол жетімді ме, жоқ па. Тиімді түрде бұл «егер біздің өнім бар болса, оған қатысты ақпаратты көрсетіңіз; әйтпесе пайдаланушыға оның қоймада жоқ екенін хабарлау туралы хабарлама көрсетіңіз ».

Сұйықтағы барлық логикалық тұжырымдар бұйралардың пайыздық белгісін пайдаланады, яғни {% if…%}. Өтініштеріңізді тиісті түрде жабуды ұмытпаңыз, әйтпесе сіз қиындықтарға тап боласыз. Мысалға:

{% if product.available%}
Себетке қосу батырмасын осы жерде көрсетіңіз
{% else%}
Өнім келесіде қашан қол жетімді болатыны туралы хабарды көрсетіңіз
{% endif%}

Сүзгілер

Сұйықтық біздің өнімімізді бірнеше тәсілмен басқаруға мүмкіндік береді. Соның бірі - сүзгілерді қолдану. Сүзгіге кіретін мазмұн екінші жағынан белгілі бір жолмен өзгертіліп шығады.

Жоғарыдағы сұйық мысалға қарап, сіз байқайсыз {ақша}. Нұсқа - бұл өнімнің өзгеруін сипаттайтын термин: мысалы, әртүрлі түстер мен өлшемдер. Мұндағы қызықты нәрсе - біз баға шығынын өзгерту үшін сүзгіні қолданамыз - бұл жағдайда ақша сүзгісін қолдану арқылы. Бұл бағаның алдыңғы жағына дүкеннің валюта белгісін қосуға әкеледі.

Басқа сүзгілерге кіреді жолақ_html, ол мәтіннің кез келген HTML тегтерін алып тастайды және ucase, оны үлкен әріпке айналдырады.

Сіз сондай-ақ сүзгілерді біріктіре аласыз. Мысалға:

{article.content}

Бұл жағдайда біз мақала үлгісінің ауыспалы мазмұнының төлсипатын қабылдап, оны strip_html сүзгісіне және соңында кесілген сүзгіге жібереміз. Қысқартылған сүзгі бізге соңғы шығудың қанша уақытты қажет ететіндігін анықтауға мүмкіндік беретінін байқайсыз: бұл жағдайда 20 таңба.

Сондай-ақ, сүзгілер бізге шаблондарда сценарийлер мен кескін элементтерін жасау бойынша тез жұмыс істеуге мүмкіндік береді. Байланыстырылған alt тегімен кескін шығару үшін сүзгіні пайдаланудың өте жылдам әдісі:

{asset_url}

Мұны Shopify тақырыбында пайдалану біздің шаблонымызда келесі img элементінің пайда болуына әкеледі:

img src = «/ files / shop / your_shop_number / активтер / logo.png» alt = «Сайт лого» />

The актив_урл сүзгі өте пайдалы, өйткені ол ағымдағы тақырыпқа толық жолды қайтарады активтер папка. Бұл сүзгіні пайдалану сіздің тақырыпты бірнеше дүкендерде қолдануға мүмкіндік береді және жолдар туралы алаңдамайсыз.

Келесі не?

Осы бірнеше мысал сізге сұйықтықтың онша күрделі еместігін көрсетті деп үміттенемін. Әрине, мұнда сіз жасай алатын әлдеқайда көп нәрсе бар, бірақ шығуды, логиканы және сүзгілерді игере отырып, сіз Shopify тақырыбын құруға қажеттінің көп бөлігін түсінуге дайынсыз.