Téama Shopify a thógáil leis an inneall Leachtach

Údar: Peter Berry

Dáta An Chruthaithe: 14 Iúil 2021

An Dáta Nuashonraithe: 13 Bealtaine 2024

Téama Shopify a thógáil leis an inneall Leachtach - Cruthaitheach

Ábhar

Comhaid téama agus fillteáin
URLanna a mhapáil le teimpléid
Leachtach: na buneilimintí
Táirge.liquid a thuiscint
Aschur
Loighic
Scagairí
Cad eile?
Acmhainní agus inspioráid bhreise

Le cúpla seachtain anuas, bhí mé ag tógáil téama Shopify do Viewport Industries, an chuideachta Elliot Jay Stocks agus a bhunaigh mé anuraidh. Roghnaigh muid Shopify ar chúiseanna éagsúla:

Ligeann sé dúinn táirgí digiteacha agus fisiceacha a dhíol
Tá sé óstáilte go hiomlán, rud a chiallaíonn nach bhfuil aon fhreastalaithe buartha faoi
Tacaíonn sé le roinnt geataí íocaíochta a chomhtháthaíonn go deas lenár mbanc
Tá sé bunaithe ar théamaí, rud a chiallaíonn gur féidir linn HTML, CSS agus JavaScript an láithreáin atá againn a athúsáid go héasca

Úsáideann Shopify inneall teimpléid ar a dtugtar Leacht chun sonraí ó do stór a aschur i do theimpléid. B'fhéidir gurb é leacht an comhábhar amháin de théama Shopify nár úsáid tú roimhe seo agus féadann sé a bheith aschurtha. Is é an dea-scéal, áfach, nach bhfuil sé chomh deacair sin a thosú i ndáiríre.

Má d'úsáid tú Smarty, ERB nó Twig riamh, beidh an méid seo a leanas eolach ort. Mura bhfuil, ná bíodh imní ort: níl ort ach cúpla riail shimplí a fhoghlaim. Nuair a bheidh scileanna Leachtacha curtha agat le do fhoireann uirlisí forbartha gréasáin, beidh tú in ann téamaí a thógáil do chliaint in am ar bith.

Comhaid téama agus fillteáin

Níl i dtéamaí Shopify ach níos mó ná roinnt comhad (comhaid HTML le síneadh .liquid, CSS, JS, íomhánna, agus mar sin de) agus fillteáin. Is féidir le téamaí breathnú agus obair, áfach, a theastaíonn uait: níl aon srianta ann i ndáiríre. Seo bunstruchtúr téama:

sócmhainní
config
leagan amach
téama.liquid
snippets
teimpléid
404.liquid
alt.liquid
blag.liquid
cart.liquid
bailiúchán.liquid
innéacs.liquid
lch.liquid
táirge.liquid
cuardaigh.liquid

Leis na comhaid seo, is féidir leat na téamaí is bunúsaí a chruthú. Ar ndóigh, is dócha gur mhaith leat roinnt CSS, JavaScript agus cúpla íomhá a chur isteach. Chuirfidh tú iad seo san fhillteán sócmhainní. (Ní miste a rá nach gceadaítear duit fo-fhillteáin i d’fhillteán sócmhainne faoi láthair.)

Chun tuilleadh a fháil amach faoin gcaoi a n-oibríonn téamaí, agus chun eolas a fháil faoi na fillteáin cumraíochta agus snippets, mholfainn Téama a léamh ó Scratch agus Socruithe Téama ar an Wiki Shopify.

Nó is féidir leat clárú leis an gclár Comhpháirtí saor in aisce, siopa tástála a chruthú agus iniúchadh a dhéanamh ar cheann de na téamaí saor in aisce atá ar fáil ó limistéar riaracháin do shiopa tástála - ach téigh chuig eagarthóir an téama atá sa roghchlár Téamaí.

URLanna a mhapáil le teimpléid

Oibríonn téamaí Shopify tríd an URL reatha a mhapáil go teimpléad ar leith. Mar shampla, má táimid ag féachaint ar tháirge a bhfuil an URL seo a leanas aige ...

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

... ansin beidh a fhios ag Shopify do chuid a úsáid táirge.liquid teimpléad. Is ar an gcúis seo nár cheart duit ach ainmneacha na gcomhad atá liostaithe thuas a úsáid le haghaidh do theimpléid.

Chomh maith le Shopify a bheith ar an eolas faoin teimpléad atá le taispeáint i ndáil leis an URL reatha, cuireann sé roinnt athróg an-sonrach ar fáil dúinn. Tugtar ‘athróga teimpléid’ orthu seo agus cuireann siad ar ár gcumas sonraí a thaispeáint inár dteimpléid.

Mar shampla inár dteimpléad táirge.liquid, tá rochtain againn ar an duine atá ainmnithe go hiomchuí táirge athróg. Ciallaíonn sé seo gur féidir linn ainm, tuairisc, praghas agus infhaighteacht ár dtáirge a aschur inár dteimpléad. Úsáidfimid an teaglaim d’athróga Leachtacha agus teimpléid chun sonraí a bhaineann lenár dtáirgí a áireamh inár dteimpléid.

Le liosta iomlán de na hathróga teimpléid atá ar fáil a fháil, tabhair cuairt ar Bhileog Cheat Shopify Mark Dunkley.

Leachtach: na buneilimintí

Tá Leacht anseo chun ár saol mar dhearthóirí téama a dhéanamh níos éasca. Ceann de na príomhbhealaí a dhéanann sé seo is ea leagan amach a úsáid. Tá leagan amach oiriúnach chun eilimintí leathanaigh coitianta a áireamh mar cheanntásc, príomh-nascleanúint, buntásc agus mar sin de.

I struchtúr mo fhillteáin thuas, tabharfaidh tú faoi deara comhad darb ainm téama.liquid san fhillteán leagan amach. Is féidir leat smaoineamh ar theme.liquid mar ár máistir-theimpléad. Déantar ár gcuid teimpléid eile go léir, mar shampla product.liquid, a sholáthar laistigh den mháistir-theimpléad seo. Féadfaidh níos mó ná leagan amach amháin a bheith agat más mian leat, ach ba cheart téama.liquid a thabhairt ar an gceann réamhshocraithe i gcónaí.

Ní fhaca mé comhad theme.liquid United Pixelworkers ’, ach d’fhéadfá a shamhlú ina bhfuil an marc suas do na réimsí atá imlínithe i dearg thíos.

Seo an chuma a bheidh ar leagan amach bunúsach téama.liquid:

! DOCTYPE html>
html>
ceann>
{{content_for_header}}
teideal> Leathanach Teideal Téigh Seo / teideal>
/ ceann>
comhlacht>
{{content_for_layout}}
/ comhlacht>
/ html>

Tabharfaidh tú faoi deara dhá abairt atá fillte i braces dúbailte chatach: {{content_for_header}} agus {{content_for_layout}}. Seo iad ár gcéad samplaí de Leacht i ngníomh.

Is minic a úsáideann Shopify {{content_for_header}} chun comhaid shonracha a chur le ceann> rannáin doiciméad: mar shampla, cód rianaithe a chur leis. Is é {{content_for_layout}} an áit a mbeidh ábhar ár dteimpléad mapáilte URL le feiceáil. Mar shampla, má táimid ag féachaint ar leathanach táirge, tiocfaidh ár gcomhad product.liquid in ionad {{content_for_layout}} inár gcomhad leagan amach.

Táirge.liquid a thuiscint

Anois go bhfuilimid tar éis buneilimintí na leagan amach a rith, tá sé thar am breathnú ar theimpléad.Baineann siopaí go léir leis na táirgí, mar sin déanaimis féachaint orthu táirge.liquid.

Seo sampla an-simplí ach feidhmiúil de theimpléad táirge.liquid.

h2> {{product.title}} / h2>
{{ Cur síos ar an Táirge }}
{% má tá táirge.available%}
form action = "/ cart / add" method = "post">
roghnaigh id = "product-select" name = 'id'>
{% le haghaidh athraitheach i dtáirge.variants%}
rogha luach = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ roghnaigh>
input type = "submit" name = "add" value = "Cuir le cart" id = "ceannach" />
/ foirm>
{% eile%}
p> Níl an táirge seo ar fáil / p>
{% endif%}

Tá roinnt príomhchoincheapa Leachtacha ag obair anseo. Féachaimis orthu in ord.

Aschur

Tá an abairt sa chéad líne de chód {{product.title}}. Nuair a thabharfar é, aschurfaidh sé seo teideal an táirge, a chinneann an URL mar atá a fhios agat anois. Sa sampla United Pixelworkers thíos, is é teideal an táirge go simplí ná ‘Indianapolis’.

Úsáideann leacht an fhormáid ponc-chomhréir. Sa chás seo, is ionann {{product.title}} agus athróg teimpléad an táirge agus a tréith teidil. Is féidir linn tuairisc an táirge a aschur ar an mbealach céanna trí úsáid a bhaint as {{ Cur síos ar an Táirge }}.

Tugtar seo i dtéarmaí Leachtacha mar aschur. Cuirtear braces chatach dúbailte in iúl don aschur go léir, mar a leanas: {{your_output}}.

Loighic

Ar an gcéad líne eile den chód, tabharfaidh tú faoi deara ráiteas i brace cuartha agus% ina dhiaidh sin: sa chás seo, {% má tá táirge.available%}. Is coincheap tábhachtach eile é seo i Leacht ar a dtugtar loighic. Níos faide síos, tabharfaidh tú faoi deara {% eile%} agus ar deireadh na ráitis {% endif%}.

Seo más ráiteas é cuireann sé ar ár gcumas na rudaí a thaispeánann ár dteimpléad a dhearbhú, bunaithe ar choinníoll amháin nó níos mó: sa chás seo, cibé an bhfuil ár dtáirge ar fáil nó nach bhfuil. Go héifeachtach tá sé seo á rá, “má tá ár dtáirge ar fáil, taispeáin an fhaisnéis a bhaineann leis; ar shlí eile taispeáin teachtaireacht ag ligean don úsáideoir a fhios go bhfuil sé as stoc ”.

Úsáideann gach ráiteas loighic i Leacht an nodaireacht céatadáin chatach brace, i.e. {% más…%}. Ná cuimhnigh ach do ráitis a dhúnadh go cuí, nó beidh tú i dtrioblóid. Mar shampla:

{% má tá táirge.available%}
Taispeáin Cuir leis an gcnaipe cart anseo
{% eile%}
Taispeáin teachtaireacht faoi cathain a bheidh an táirge ar fáil ina dhiaidh sin
{% endif%}

Scagairí

Cuireann leacht ar ár gcumas ár n-aschur a ionramháil ar go leor bealaí. Ceann acu seo is ea scagairí a úsáid. Tiocfaidh an t-ábhar a théann isteach sa scagaire amach an foirceann eile arna athrú ar bhealach ar leith.

Tabharfaidh tú faoi deara ag féachaint ar an sampla táirge.liquid thuas {airgead}. Is éard is malairtí ann ná téarma a úsáidtear chun cur síos a dhéanamh ar éagsúlacht táirge: mar shampla, dathanna agus méideanna éagsúla. Rud atá suimiúil anseo ná go n-úsáideann muid scagaire chun aschur na bpraghsanna a athrú - sa chás seo, tríd an scagaire airgid a úsáid. Mar thoradh air seo cuirfear siombail airgeadra an tsiopa os comhair an phraghais.

I measc na scagairí eile tá stiall_html, a scriosfaidh aon chlibeanna HTML as píosa áirithe téacs agus ucase, a athróidh go cás uachtair é.

Is féidir leat scagairí a cheangal le chéile freisin. Mar shampla:

{article.content}

Sa chás seo, táimid ag glacadh tréith ábhair athróg teimpléad an ailt agus á chur ar aghaidh chuig an scagaire strip_html agus ar deireadh chuig an scagaire truncate. Tabharfaidh tú faoi deara go gceadaíonn an scagaire truncate dúinn a shonrú cá fhad a theastaíonn uainn an t-aschur deiridh a bheith: sa chás seo, 20 carachtar.

Ligeann scagairí dúinn obair thapa a dhéanamh chun eilimintí scripte agus íomhá a chruthú i dteimpléid. Seo bealach an-tapa chun scagaire a úsáid chun íomhá le clib alt gaolmhar a aschur:

{sócmhainn_url}

Trí é seo a úsáid inár dtéama Shopify, tabharfar an eilimint img seo a leanas inár dteimpléad:

img src = "/ files / siopaí / your_shop_number / sócmhainní / logo.png" alt = "Lógó Suímh" />

Tá an sócmhainn_url tá scagaire an-úsáideach mar cuireann sé an cosán iomlán ar ais chuig an téama reatha sócmhainní fillteán. Trí úsáid a bhaint as an scagaire seo is féidir leat do théama a chur i bhfeidhm ar fud iliomad siopaí agus gan a bheith buartha faoi chosáin.

Cad eile?

Tá súil agam gur léirigh an cúpla sampla seo duit nach bhfuil Leacht chomh casta sin. Ar ndóigh, tá i bhfad níos mó is féidir leat a dhéanamh leis, ach trí aschur, loighic agus scagairí a mháistir, tá tú ar do bhealach chun an chuid is mó de na rudaí a bheidh uait chun téama Shopify a thógáil a thuiscint.