Sisältö
Verkkokaupasta on tullut niin suosittua viime vuosina, että nyt on vaikea kuvitella tulevaisuutta ilman sitä. Internetin vaikutus on tehnyt yhteydenpidosta asiakkaiden kanssa helppoa yrityksille ja tuotemerkeille, ja verkkokauppa on pääosin helpoin tapa toimittaa tuotteita yleisölle.
Säätiön Building Blocks -kirjasto koodatuista käyttöliittymäkomponenteista on suunniteltu helpottamaan lopputuotteen saavuttamista nopeammin. Toisin kuin malleissa, rakennuspalikat eivät määrää, miltä sivustosi tulisi näyttää tai kuinka se olisi rakennettava.Ne yksinkertaisesti tarjoavat sinulle työkalut oman mukautetun ulkoasun luomiseen paljon nopeammin.
Tässä opetusohjelmassa opit rakentamaan staattisen verkkokauppasivuston tyhjästä käyttämällä eCommerce Kitia, joka on kuratoitu rakennuspalikoiden kokoelma, joka on suunniteltu auttamaan sinua rakentamaan tietyntyyppisiä verkkosivustoja. Vaikka tämä teline on prototyyppi, käyttämiämme rakennuspalikoita ja loppusijoitusta voidaan soveltaa mihin tahansa järjestelmään.
Päästä alkuun
Ensimmäinen asia, joka meidän on tehtävä, on luoda ympäristö sivuston rakentamiseksi. Tätä opetusohjelmaa varten sinun on ensin ladattava node.js. Kun se on asennettu, haluat asentaa Foundation CLI: n komennolla npm asenna -g säätiö-cli.
Nyt kun olet asentanut Foundationin järjestelmääsi, aloitetaan uusi Foundation-projekti komennolla Foundation new e-commerce-site. Valitse seuraavasta luettelosta ensimmäinen vaihtoehto, ”A website (Foundation for Sites)”, kirjoita projektin nimi ”ecommerce-site” ja valitse sitten ”ZURB Template”. Tämä käynnistää säätiömallin ja kehityspalvelimen, jotta voimme helposti aloittaa verkkosivustomme rakentamisen. Juosta npm alku terminaalissa projektin suorittamiseksi.
Seuraavaksi katsotaan uuden projektin koodia avaamalla se tekstieditorissa. Täältä löydät mallisivun ”src / pages / index.html” mallisivun, joka sisältää joitain oletusmallimateriaaleja. Poistamme kaikki koodit täältä.
Toimittajan huomautus: Etsitkö yrityksellesi verkkokauppasivustosuunnittelua? Jos etsit tietoja, jotka auttavat sinua valitsemaan sinulle sopivan, käytä alla olevaa kyselylomaketta saadaksesi sinulle tietoja useilta toimittajilta ilmaiseksi:
Paketin asentaminen
Ennen kuin kirjoitamme koodia, haemme säätiön verkkokauppasarjan säätiön CLI: llä. Suuntaa päätelaitteeseesi ja asenna verkkokauppa komennolla säätiön sarjat.
Jos tämä komento ei toimi, tarkista, että Foundation CLI on päivitetty versioon 2.2.3. Suorita tarkistaaksesi käyttämäsi version säätiö -v terminaalissasi. Jos haluat päivittää, poista vain CLI: n asennus npm poista -g Foundation-cli ja asenna se uudelleen npm asenna -g säätiö-cli.
Tämä ladasi juuri kaikki verkkokaupan paketin sisällä olevat rakennuspalikat! Aina kun asennat rakennuspalikan, se näkyy src / osat / rakennusosat. Tiedät, että paketti on asennettu oikein, jos kaikki rakennuspalikat on tuotu automaattisesti laitteeseesi app.scss tiedosto.
Jotkut näistä rakennuspalikoista sisältävät Font Awesomen kuvakkeet, joten sinun on joko asennettava ne manuaalisesti tai lisättävä niiden CDN-tiedosto pää> sivustosi. Voit tehdä tämän siirtymällä kohtaan src / layouts / default.html ja lisää linkki href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "tyylitaulukko"> välissä pää> tunnisteet.
Rakennusteline sivuston
Aloitetaan rakentamiseen! Kun pakettimme on asennettu, nämä pari seuraavaa vaihetta tuntuu vähän kuin LEGO: lla pelaaminen: omissa projekteissasi voit käyttää niitä kaikkia tai voit käyttää vain valintaa. Voit vapaasti sekoittaa rakennuspalikoita saavuttaaksesi unelmiesi verkkokaupan asettelun.
Tässä opetusohjelmassa kaksi ensimmäistä lohkoa, joista aloitamme, ovat otsikko- ja promo sankari. Tätä varten käytämme ohjaustangon osamekanismia. Heitetään osiot tyhjään index.html-tiedostoon {{> ecommerce-header}} ja {{> verkkokauppa-promo-sankari}}. Vain näillä kahdella rakennuspalikalla verkkokaupan aloitussivumme näyttää jo puolivälissä.
Seuraavaksi heitämme joitain tuotekortteja sankariosamme alle. Tuotekortin Building Block käyttämiseksi käytämme säätiön lohkoverkkoa, jotta kortit istuvat tasaisesti ristikossa. Tämä helpottaa myös näiden korttien asettelun muuttamista myöhemmin.
Aloitetaan div>. Heitä tämän divin sisään kymmeneen sarakkeeseen tuotekortti kunkin sarakkeen sisällä div> {{> verkkokauppa-tuotekortti}} / div>.
Haluamme antaa asiakkaillemme tavan tutustua enemmän tuotteisiimme, joten lisätään huomioteksti tuotekorttisi alle. Ensin meidän on luotava div> niin, että painikkeemme keskitetään sivulle. Seuraavaksi käytämme säätiön painikekomponenttia huomiotekstimme luomiseen. Lisää -painike> Osta kaikki tuotteet / -painike> sisällä .rivi sarake.
Sivu tuntuu melkein täydelliseltä nyt, mutta lisätään myös otsikko sankarimme ja tuotekorttimme välille, jotta saat hieman kontekstia. Lisää sankarin alle a div> sisältää otsikkomme h1> Uusimmat saapumiset / h1>.
Useimmilla verkkokaupan kotisivuilla on enemmän mainossisältöä tuotteidensa alapuolella. Käytetään rakennuspalikkaa {{> verkkokauppa-sankari-liukusäädin-pieni}} tässä. Estämme liukusäätimen ulottuvan sivun leveydelle kiedoten sen a: n ympärille div>.
Koska verkkokauppasivustot koostuvat tyypillisesti monista sivuista, useimmat tarvitsevat mega-alatunnisteen, jossa on paljon linkkejä sivujen määrän käsittelemiseksi. Verkkokaupan paketissa on alatunniste tälle tarkalle käyttötarkoitukselle. Pujottaaksemme tämän telineen, pudotetaan sisään {{> verkkokaupan alatunniste}} HTML: n alaosassa.
Tarkista reagointikyky
Nykyään millään sivustolla on vaikea päästä toimeen olematta mobiiliystävällinen. Tämä pätee erityisesti verkkokauppasivustoihin. Nyt kun verkkokaupoista on tullut normi, emme halua menettää sitä prosenttiosuutta käyttäjistä, jotka tekevät tämän matkapuhelimellaan.
Mobiilin ensin -mottomme mukaisesti säätiön rakennuspalikat rakennetaan luonnollisesti reagoiviksi. Nopea tarkistus pienemmällä näytöllä osoittaa, että sivustomme näyttää edelleen melko hyvältä.
Kuitenkin, kun napsautamme hampurilaisvalikkoa, kankaamme ei ole kunnolla kiinni. Tämä osa on hieman hankala, mutta älä huoli! Kerromme, mitä tässä kankaan ulkopuolisessa valikossa tapahtuu, ja käymme sitten läpi sen kytkemisen.
Jos katsot ecommerce-header.html-tiedostoa, huomaat, että tähän otsikkoon on rakennettu off-canvas. Joten miksi se ei toiminut? Kun napsautimme hampurilaisvalikkoa, ainoa "työnnetty" asia oli otsikko. Loput sivusta pysyivät näkyvissä aiheuttaen outoja päällekkäisyyksiä.
Tämä johtuu siitä, että tämä otsikko on rakennettu toimimaan yksin, mutta todellisuudessa sen on toimittava koko sivun kanssa. Toisin sanoen sen on työnnettävä sivun koko sisältö, kun kankaan ulkopuolinen valikko käynnistyy, ei vain otsikkovalikko. Tämä verkkokaupan otsikko kirjoitettiin näin, koska kankaan ulkopuolisen asennuksen tekeminen edellyttää sukeltamista omaan src / layouts / default.html sivun, joka on rakennuspalikan ulottumattomissa.
Tämän korjaamiseksi meidän on vain otettava kaikki sisällämme div id = "ecommerce-header" data-off-canvas> ja siirrä se kohtaan src / layouts / default.html. Seuraavaksi aiomme kääriä {{> body}} sivustomme sisällä div data-off-canvas-content>. Tämä työntää sivustomme runkoa, kun off-canvas laukaistaan.
Kun napsautamme hampurilaistamme, koko sivusto siirtyy kankaan ulkopuoliseen valikkoon! Meidän ruumiimme oletus.html sivun pitäisi näyttää tältä:
body> div id = "ecommerce-header" data-off-canvas> button aria-label = "Close menu" type = "button" data-close> span aria-hidden = "true"> × / span> / button> ul> li> a href = "categories.html"> Luokka 1 / a> / li> li> a href = "#"> Luokka 2 / a> / li> li> a href = "miksi.html"> Luokka 3 / a> / li> li> a href = "build.html"> Luokka 4 / a> / li> li> a href = "#"> Luokka 5 / a> / li> / ul> hr> ul> li> a href = "#"> Ohje / a> / li> li> a href = "#"> Tilauksen tila / a> / li> li> a href = "#"> Yhteystiedot / a> / li> li > a href = "#"> Oma tili / a> / li> / ul> / div> div data-off-canvas-content> {{> body}} / div> script src = "{{root}} varat /js/app.js "> / script> / body>
Johtopäätös
Olemme osoittaneet, kuinka voit aloittaa verkkokauppasivustosi säätiön eCommerce Kit -sovelluksella, mutta älä pysähdy siihen! Yli 100 rakennuspalikkaa voidaan käyttää sivujen parantamiseen. Muutamassa minuutissa olemme rakentaneet staattisen verkkokauppasivuston rakennuspalikoilla. Tämä säästää paljon aikaa, jota voit nyt käyttää visuaalisen kerrostamisen ja sivuston tyylin muokkaamiseen brändillesi sopivaksi.
Vaikka ottaisit tämän pidemmälle ja käytät taustajärjestelmää, erilaista osamekanismia tai sinulla on jokin muu tapa saada tietosi sivustoon, annettu rakennuspalikkojen työnkulku säästää todella aikaa ja siten rahaa. Säätiön rakennuspalikat ovat loistava tapa aloittaa, koska niiden on tarkoitus olla laajennettu, sovittaa nykyisiin tyyleihisi ja niitä voidaan käyttää missä tahansa sovellusjärjestelmässä.
Tämä artikkeli ilmestyi alun perin nettilehti numero 266. Osta se tässä.
