Kuinka lisätä sisäkkäisen navigoinnin Shopify-aiheisiin
Tässä artikkelissa keskustelemme siitä, miten toteutetaan täysin sisällönhallinnassa monitasoinen navigointijärjestelmä a Shopify teema.
Shopify teemojen käyttö neste , joustava ja tehokas mallipohjainen kieli, joka tuottaa dataa tallennukseksi malliksi. Jos et tunne Liquidia ja Shopify teeman rakennusta yleensä, suosittelen tarkistamaan virkamiehen Shopify teema-asiakirjat .
Päästä alkuun
Jos olet koskaan työskennellyt WordPressin kaltaisilla alustoilla, saatat tuntea adminin käyttöliittymät, joiden avulla voit luoda monitasoisen navigoinnin. Tulostettaessa mallitiedostoissa nämä usein aiheuttavat sisäkkäisen järjestämättömän luettelon, jonka avulla CSS: n avulla voimme muotoilla erilaisia suunnittelumalleja. Esimerkiksi avattavasta valikosta tai sivupalkin valikosta, joka paljastaa tarkemman suodatuksen, kun ylätason valikoita napsautetaan tai leijuu yli. Kaikki lähestymistavat antavat meille mahdollisuuden tarjota syvempiä navigointi sivustoihimme ilman liikaa komplikaatiota.
Ensin tarkkailemalla Shopifyin navigointitoimintoa saatat ajatella, että se ei tarjoa meille tätä kykyä. Kuitenkin aseistettuna hieman nestemäisellä tietämyksellä voimme helposti saavuttaa monitasoisia valikoita teemoissamme. Käyttämällä navigointiominaisuutta voimme tarjota asiakkaillemme helpon tavan hallita valikoita ja antaa meille teemasuunnittelijoiksi haluamasi sisäkkäiset järjestämättömät luettelot CSS-tyylille.
Tavoitteena tässä opetusohjelmassa on luoda sisäkkäinen järjestämättömät luettelot, joita voimme täysin hallita Shopify-järjestelmän kautta, ja näihin muutoksiin heijastuu myymälämme.
Ja tässä on lopputulos:
Toisin kuin muilla alustoilla, Shopifyilla ei ole mahdollisuutta ottaa käyttöön yhtä "super-valikkoa", jonka avulla voimme upottaa alivalikon kohteet sisään. Se sanoi, että se ei ole monimutkainen tapa saada tämä toimimaan. Seuraamalla yksinkertaista nimeämiskäytäntöä on mahdollista tuottaa monitasoisia valikkorakenteita.
Jos haluat koodata yhdessä opetusohjelman kanssa, yksinkertaisin tapa tehdä niin on rekisteröityä ilmaiseksi Osta kumppani tili ja luoda ilmainen "dev shop". Nämä ovat täysin varusteltuja, ja voit kokeilla teemasi ennen luovuttamista asiakkaalle tai oman myymälän käynnistämiseen.
Voit kokeilla koodin esimerkkejä millä tahansa mallien teemojen "mallien" teemakanssilla tai vaihtoehtoisesti suosittelen teemojen oletusasettitiedoston teemaa. Liikaa, koska tämä tarkoittaa, että koodi tulee näkyviin oletusarvoisesti jokaisella sivulla.
Valikkojen luominen
Aloita luomalla uusi valikko päävalikosta siirtymällä Shopify-järjestelmänvalvojan Navigointi-välilehteen. Valikon luomiseksi meidän on avattava Shopify-järjestelmänvalvojan käyttöliittymä ja siirtymme vasemmalle "Navigointi" -välilehdelle.
Kaikilla myymälöillä on ennalta määritetty oletusvalikko nimeltä "Päävalikko". Voit lisätä kohteita luetteloon napsauttamalla "Lisää toinen linkki" -painiketta ja antamalla uuden kohteen "linkin nimi" ja määränpää. Valitse pudotus, jonka avulla voit helposti linkittää sisäisiin osioihin, kuten tiettyyn tuotteeseen tai kokoelmaan. Vaihtoehtoisesti voit kirjoittaa oman URL-osoitteen (joko sisäisen tai ulkoisen) valitsemalla vaihtoehdoista "web-osoite".
Shopify-järjestelmänvalvojan valikoita on helppo luoda ja muokata.
Kun meillä on tämä paikka, voimme alkaa harkita nestekoodia, jonka on toimitettava teemamme mukaan.
Teematiedoston valikon tuottamiseksi meidän on tiedettävä valikon "kahva". Kahvat ovat yksilöllisiä tunnisteita sisällä Shopify tuotteisiin, kokoelmiin, linkkilistoihin (Shopify-teemien valikoissa käytetty ilmaisu) ja sivuja. Ne ovat yleensä URL-osoitteiden turvallisia versioita kohteen nimestä tai otsikosta. Esimerkiksi Päävalikko johtaisi päävalikon kahvaan. Kun ne on luotu automaattisesti, voit muuttaa niitä halutessasi admin-käyttöliittymän kautta.
Oletusvalikossamme on linkki Kahvikupit-kokoelmaan.
Yhden tason navigointi
Aloitetaan lähettämällä kaikki kohteet "päävalikosta". Jotta voisimme tehdä tämän, voimme käyttää yksinkertaista "silmukalle" tuottaa kaikki linkkiluettelon kohteet puolestaan, tässä on miten:
{% for link in linklists.main-menu.links %}- http://docs.shopify.com/themes/liquid-basics/output" class=external rel=nofollow> Nestesuodatin. Suodatin on funktio, joka muuttaa syöttöarvoa tietyllä tavalla. Esimerkkinä katsomme yläluokan suodatinta:
{{ 'Keir Whitaker' | upcase }}
Tulosteessa tämä tekee KEIR WHITAKER HTML-tiedostossamme.
Suodattimet ottavat syötteen, tässä esimerkissä nimeni tekstijonoina ja muuttavat sitä vastaavasti. Uudelleensuodattimen tapauksessa se muuntaa tuotoksen isoilla kirjaimilla. Esimerkkitapauksessa edellä poistussuodattimen URL-osoite ja otsikko syötetään ja tekstin ja URL-osoitteen välimuisti poistetaan, jotta ne tulisivat oikein.
Monitasoinen navigointi
Nyt meillä on perusteet meidän valvomme tarvitsemme tapa luoda suhdetta toissijaiseen alivalikkoon. Onneksi tämä ei ole niin kova, se vie vain pari muuta nestekoodia. Ensinnäkin meidän on palattava Shopify-järjestelmänvalvojalle ja luotava alavalikko.
Tarvitsemme tapaa liittää kaksi valikkoamme niin, että mallimme osaa tuottaa niitä. Kädet tulevat jälleen pelastamiseen. Alun perin ei ole 100% selvää, mutta jokaisella linkillä valikon lisäksi on ainutlaatuinen kahva, johon meillä on pääsy.
Katsotaanpa esimerkki luomalla alavalikko "Kahvikupit" -linkin kautta. Voimme turvallisesti olettaa, että valikkokohtaamme "Kahvikupit" on automaattinen kahva, joka on "kahvikupit". Sinun tarvitsee vain poistaa välimerkit, korvaa isoja kirjaimia pienillä kirjaimilla ja välilyöntejä viivoilla. Jos haluamme, että tällä valikkokohdalla on alavalikko, varmistamme, että myös alivalikossa on kahva "kahvikupit". On syytä huomata, että valikon nimike voi olla mikä tahansa, tärkeä tekijä on kahva.
Alavalikossamme on kahvikupit, joiden avulla voimme yhdistää valikot yhteen.
Nyt tarvitsemme vain hieman ylimääräisen nestekoodin, jotta voimme tuottaa alivalikon mallipohjassamme:
{% for link in linklists.main-menu.links %}- {{ sublink.url }}"> {{sublink.title | paeta}}
{% endfor%}
{% loppu Jos %} {% endfor%}
Ensimmäisen tarkastuksen jälkeen tämä saattaa olla hieman pelottava. Olemme käyneet läpi suurimman osan siitä jo nyt, joten tarkastelemme uutta koodia, joka tekee suurimman osan uutta työtä meistä:
{% if linklists[link.handle].links.size > 0 %}
Tämä näkyy sen jälkeen, kun vanhemman valikon linkki on tulostettu, mutta ennen kuin listan kohteet sulkeutuvat
(koodin 4 esimerkki). "If-lauseke" tarkistaa, onko olemassa linkkiluettelo, jossa on sama kahva kuin nykyinen linkki, ja jos se on olemassa nähdäksesi, onko sille liitetty siihen liittyviä linkkikohtia. Jos vastaus on kyllä, malli avaa uuden järjestämättömän luettelon ja tuo jokaisen alivalikon kohteen luettelokohteeksi ensimmäisen esimerkin mukaisesti. Jos vastaus ei ole, mallipohja siirtää seuraavan päävalikon kohteen. 
Koodimme lopputulos on sisäkkäinen järjestämättömät valikkokohteet.
Tällä tarkistuksella, että olemassa oleva alivalikko on olemassa, esiintyy jokaisen emolevyn toistossa. Huomaat myös, että "if -lausumme" suljetaan nestekoodilla {% end for%} ja "silmukalle" {% end for%} . Tämä ilmoittaa mallin siirtyä eteenpäin, kun nämä ovat suorittaneet työnsä.
Käärimistä
Pienellä suunnittelulla on todella helppo luoda valikoita, jotka ovat riippuvaisia toisistaan. Tietenkään sinun ei tarvitse tuottaa niitä yhteen - voit halutessasi tuottaa alavalikon riippumatta mistä tahansa mallista.
Toivon, että tämä on antanut sinulle käsityksen siitä, kuinka helppoa on luoda monipuolisia menu-järjestelmiä Shopify-teemoissa.