Կառուցեք Shopify թեման ՝ Հեղուկ շարժիչով

Հեղինակ: Peter Berry

Ստեղծման Ամսաթիվը: 14 Հուլիս 2021

Թարմացման Ամսաթիվը: 13 Մայիս 2024

Կառուցեք Shopify թեման ՝ Հեղուկ շարժիչով - Ստեղծագործական

Բովանդակություն

Թեմայի ֆայլեր և պանակներ
URL- ների քարտեզագրում կաղապարներին
Հեղուկ. Հիմունքները
Հասկանալով արտադրանքը. Հեղուկ
Արդյունք
Տրամաբանություն
Fտիչներ
Ինչ է հաջորդը
Հետագա ռեսուրսներ և ոգեշնչում

Վերջին մի քանի շաբաթների ընթացքում ես կառուցում էի Shopify թեման Viewport Industries- ի, Elliot Jay Stocks ընկերության և ես, որը ստեղծեցինք անցյալ տարի: Մենք ընտրել ենք Shopify- ը մի քանի պատճառով.

Այն մեզ թույլ է տալիս վաճառել ինչպես թվային, այնպես էլ ֆիզիկական արտադրանք
Այն ամբողջությամբ տեղակայված է, ինչը նշանակում է, որ սերվերներ չկան անհանգստանալու համար
Այն աջակցում է մի շարք վճարային դարպասների, որոնք լավ ինտեգրվում են մեր բանկին
Դա թեմայի հիման վրա է, ինչը նշանակում է, որ մենք կարող ենք հեշտությամբ վերաօգտագործել մեր առկա կայքի HTML, CSS և JavaScript- ը

Shopify- ն օգտագործում է հեղուկ կոչվող ձևանմուշի շարժիչը `ձեր խանութից ձեր ձևանմուշների մեջ տվյալներ արտահանելու համար: Հեղուկը թերեւս Shopify թեմայի այն բաղադրիչն է, որը նախկինում չեք օգտագործել, և այն կարող է փոխարինվել: Բայց լավ նորությունն այն է, որ սկսելն իսկապես այնքան էլ դժվար չէ:

Եթե դուք երբևէ օգտագործել եք Smarty, ERB կամ Twig, ապա հետևյալը ձեզ ծանոթ կլինի: Եթե ոչ, մի անհանգստացեք. Դա պարզապես մի քանի պարզ կանոններ սովորելու խնդիր է: Հեղուկի հմտությունները ձեր վեբ մշակման գործիքակազմում ավելացնելուց հետո կկարողանաք կարճ ժամանակում սկսել թեմաներ կառուցել հաճախորդների համար:

Թեմայի ֆայլեր և պանակներ

Shopify թեմաները ոչ այլ ինչ են, քան մի շարք ֆայլեր (HTML ֆայլեր `հեղուկ ընդլայնմամբ, CSS, JS, պատկերներ և այլն) և պանակներ: Թեմաները կարող են նայել և աշխատել այնպես, ինչպես դուք եք ցանկանում. Սահմանափակումներ իսկապես չկան: Ահա թեմայի հիմնական կառուցվածքը.

ակտիվներ
կազմաձեւել
դասավորություններ
թեմա. հեղուկ
հատվածներ
կաղապարներ
404. հեղուկ
հոդված. հեղուկ
բլոգ.հեղուկ
սայլ. հեղուկ
հավաքածու. հեղուկ
ինդեքս. հեղուկ
էջ.հեղուկ
արտադրանք. հեղուկ
որոնում. հեղուկ

Այս ֆայլերի միջոցով դուք կարող եք ստեղծել թեմաներից ամենահիմնականը: Իհարկե, հավանաբար կցանկանայիք ավելացնել CSS, JavaScript և մի քանի պատկերներ: Դրանք կտեղադրեիք ակտիվների պանակում: (Հարկ է նշել, որ ձեր ակտիվների պանակում ներկայումս ձեզ թույլ չեն տալիս ենթապանակներ):

Թեմաների աշխատանքի մասին ավելին իմանալու և կազմաձևերի և հատվածների թղթապանակների մասին տեղեկանալու համար, ես խորհուրդ կտամ կարդալ թեմաները ratրոյից և Թեմայի կարգավորումներից Shopify Wiki- ում:

Այլընտրանքորեն կարող եք գրանցվել անվճար Գործընկեր ծրագրի մեջ, ստեղծել փորձնական խանութ և ստուգել ձեր փորձնական խանութի ադմինիստրատորի տարածքում առկա բազմաթիվ անվճար թեմաներից մեկը ՝ պարզապես անցեք Թեմաների ցանկում գտնվող թեմայի խմբագրին:

URL- ների քարտեզագրում կաղապարներին

Shopify թեմաներն աշխատում են `ընթացիկ URL- ն որոշակի ձևանմուշի վրա քարտեզագրելով: Օրինակ, եթե մենք դիտում ենք արտադրանք, որն ունի հետևյալ URL ...

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

... ապա Shopify- ը կիմանա օգտագործել ձերը արտադրանք. հեղուկ շաբլոն Այս պատճառով է, որ ձեր կաղապարների համար պետք է միայն երբևէ օգտագործել միայն վերը թվարկված ֆայլերի անունները:

Բացի Shopify- ից `իմանալով, թե որ ձևանմուշը պետք է ցուցադրվի` կապված ներկայիս URL- ի հետ, այն մեզ հասանելի է դարձնում մի շարք շատ հատուկ փոփոխականների: Դրանք հայտնի են որպես «կաղապարի փոփոխականներ» և մեզ հնարավորություն են տալիս տվյալներ ցուցադրել մեր ձևանմուշներում:

Օրինակ ՝ մեր product.liquid ձևանմուշում մենք ունենք մուտք դեպի համապատասխան անուն արտադրանք փոփոխական Սա նշանակում է, որ մենք կարող ենք մեր ձևանմուշում դուրս բերել մեր արտադրանքի անվանումը, նկարագիրը, գինը և մատչելիությունը: Մենք կօգտագործենք Հեղուկ և ձևանմուշների փոփոխականների համադրություն ՝ մեր ձևանմուշները մեր արտադրանքին վերաբերող տվյալներով լրացնելու համար:

Առկա կաղապարի փոփոխականների ամբողջական ցուցակի համար այցելեք Mark Dunkley’s Shopify Cheat Sheet:

Հեղուկ. Հիմունքները

Հեղուկն այստեղ է ՝ որպես թեմաների դիզայներներ մեր կյանքն ավելի հեշտ դարձնելու համար: Դա կատարելու հիմնական ձևերից մեկը դասավորությունների օգտագործման հետ է: Դասավորությունները իդեալական են էջի ընդհանուր տարրեր ներառելու համար ՝ վերնագիր, հիմնական նավարկություն, էջատակ և այլն:

Վերևի իմ պանակի կառուցվածքում դուք կնկատեք ֆայլ, որը կոչվում է թեմա. հեղուկ դասավորությունների պանակում: Theme.liquid- ը կարող եք մտածել որպես մեր հիմնական ձևանմուշ: Մեր բոլոր մյուս ձևանմուշները, օրինակ ՝ product.liquid- ը, ներկայացված են այս հիմնական ձևանմուշի ներսում: Wishանկության դեպքում կարող եք ունենալ մեկից ավելի դասավորություն, բայց լռելյայն մեկը միշտ պետք է անվանել theme.liquid:

Ես չեմ տեսել United Pixelworkers- ի թեման. Հեղուկ ֆայլը, բայց կարող եք պատկերացնել, որ այն պարունակում է վերևում կարմիրով ուրվագծված տարածքների նշանը:

Ահա թե ինչպիսին կարող է լինել հիմնական թեման: հեղուկ դասավորությունը.

! 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>
{{ ապրանքի նկարագրությունը }}
{% եթե ապրանքը: մատչելի%}
form action = "/ զամբյուղ / ավելացնել" մեթոդ = "գրառում">
ընտրեք id = "product-select" name = 'id'>
{% արտադրանքի տարբերակի համար: փոփոխականներ%}
տարբերակի արժեք = "{{variant.id}}"> {{variant.title}} - {variant.price} / տարբերակ>
{% endfor%}
/ ընտրեք>
մուտքագրման տեսակ = "ներկայացնել" անուն = "ավելացնել" արժեք = "Ավելացնել զամբյուղին" id = "գնում" />
/ ձև>
{% ուրիշ%}
p> Այս ապրանքը մատչելի չէ / p>
{% endif%}

Այստեղ գործում են մի շարք առանցքային Հեղուկ հասկացություններ: Եկեք նայենք նրանց ըստ հերթականության:

Արդյունք

Կոդի առաջին տողը պարունակում է արտահայտությունը {{product.title}}, Երբ մատուցվում է, սա կտա արտադրանքի վերնագիրը, որը, ինչպես հիմա գիտեք, որոշվում է URL- ի միջոցով: Ստորև բերված Միացյալ Pixelworkers- ի օրինակում ապրանքի անվանումը պարզապես «Ինդիանապոլիս» է:

Հեղուկն օգտագործում է կետային շարահյուսության ձևաչափը: Այս դեպքում {{product.title}} հավասար է ապրանքի ձևանմուշի փոփոխականին և դրա վերնագրի հատկանիշին: Մենք կարող ենք արտադրանքի նկարագրությունը դուրս բերել նույն ձևով ՝ օգտագործելով {{ ապրանքի նկարագրությունը }}.

Այս հեղուկը հայտնի է որպես ելք, Բոլոր արդյունքները նշվում են կրկնակի գանգուր ամրացումների միջոցով, հետևյալ կերպ. {{Your_output}}:

Տրամաբանություն

Կոդի հաջորդ տողում դուք կնկատեք գանգուր ամրագոտու հայտարարություն, որին հաջորդում է%. Այս դեպքում ՝ {% եթե ապրանքը: մատչելի%}, Սա հեղուկի մեկ այլ կարևոր հասկացություն է, որը հայտնի է որպես տրամաբանություն, Ավելի ներքև, դուք կնկատեք {% else%} և վերջապես {% endif%} հայտարարությունները:

Սա եթե հայտարարություն հնարավորություն է տալիս մեզ թելադրել, թե ինչ է ցույց տալիս մեր ձևանմուշը ՝ հիմնված մեկ կամ մի քանի պայմանների վրա. այս դեպքում ՝ մեր արտադրանքը մատչելի է, թե ոչ: Արդյունավետորեն սա ասում է. «Եթե մեր արտադրանքը մատչելի է, ցույց տուր դրա հետ կապված տեղեկությունները. հակառակ դեպքում ցույց տվեք հաղորդագրություն ՝ օգտագործողին տեղյակ պահելով, որ իր ֆոնդից դուրս է »:

Հեղուկում պարունակվող բոլոր տրամաբանական հայտարարությունները օգտագործում են գանգուր ամրացման տոկոսի նշում, այսինքն ՝ {% եթե…%}: Պարզապես հիշեք, որ պատշաճ կերպով փակեք ձեր հայտարարությունները, այլապես խնդիրներ չեք առաջանա: Օրինակ:

{% եթե ապրանքը: մատչելի%}
Showուցադրել Ավելացնել զամբյուղի կոճակը այստեղ
{% ուրիշ%}
Messageուցադրել հաղորդագրություն այն մասին, թե երբ է ապրանքը հաջորդ հասանելի լինելու
{% endif%}

Fտիչներ

Հեղուկը մեզ հնարավորություն է տալիս շահարկել մեր արդյունքը մի քանի եղանակներով: Դրանցից մեկը ֆիլտրերի օգտագործումն է: Theտիչի մեջ մտնող բովանդակությունը դուրս կգա հատուկ ձևով փոփոխված մյուս ծայրից:

Նայելով ապրանքի վերևում գտնվող հեղուկ օրինակին ՝ դուք կնկատեք {փող}, Տարբերակը տերմին է, որն օգտագործվում է ապրանքի տատանումները նկարագրելու համար. Օրինակ ՝ տարբեր գույներ և չափեր: Հետաքրքիրն այստեղ այն է, որ մենք օգտագործում ենք զտիչ ՝ գինը թողարկելու համար փոխելու համար. Այս դեպքում ՝ օգտագործելով փողի զտիչը: Դա կհանգեցնի նրան, որ խանութի արժույթի խորհրդանիշը կավելացվի գնի դիմային հատվածին:

Այլ զտիչները ներառում են strip_html, որը կտարածի ցանկացած HTML պիտակ տվյալ տեքստի կտորից և ucase, որը այն կվերածի մեծատառի:

Կարող եք նաև միացնել զտիչները միասին: Օրինակ:

{Article.content}

Այս դեպքում մենք վերցնում ենք հոդվածի ձևանմուշի փոփոխականի բովանդակության ատրիբուտը և փոխանցում ենք այն strip_html ֆիլտրին և, վերջապես, կտրված ֆիլտրին: Դուք կնկատեք, որ կարճացված ֆիլտրը թույլ է տալիս մեզ հստակեցնել, թե որքան ժամանակ ենք ուզում ունենալ վերջնական արդյունքը. Այս դեպքում ՝ 20 նիշ:

Fտիչները նաև թույլ են տալիս արագ աշխատել կաղապարներում սցենարի և պատկերի տարրերի ստեղծման ուղղությամբ: Ահա մի զտիչ օգտագործելու շատ արագ միջոց ՝ կապված alt alt պիտակով պատկեր դուրս բերելու համար.

{asset_url}

Մեր Shopify թեմայում սա օգտագործելը կհանգեցնի նրան, որ հետևյալ img տարրը ներկայացվի մեր ձևանմուշում.

img src = "/ ֆայլեր / խանութներ / քո_շոփ_թիվ / ակտիվներ / logo.png" alt = "Կայքի լոգո" />

Ի asset_url զտիչը շատ օգտակար է, քանի որ այն վերադարձնում է ընթացիկ թեմայի ամբողջական ուղին ակտիվներ թղթապանակ Այս զտիչի օգտագործումը հնարավորություն է տալիս կիրառել ձեր թեման բազմաթիվ խանութներում և այլևս չմտահոգվել ճանապարհների մասին:

Ինչ է հաջորդը

Հուսով եմ, այս մի քանի օրինակները ցույց են տվել, որ Հեղուկն այնքան էլ բարդ չէ: Իհարկե, դրանով շատ ավելին կարող եք անել, բայց յուրացնելով արդյունքը, տրամաբանությունն ու ֆիլտրերը ՝ դուք գտնվում եք ճանապարհին ՝ հասկանալու, թե ինչն է ձեզ հարկավոր Shopify թեման կառուցելու համար: