Innhold
e-handel har blitt så populært de siste årene at det nå er vanskelig å forestille seg en fremtid uten den. Kraften på internett har gjort det enkelt å komme i kontakt med kunder for bedrifter og merkevarer, og e-handel er for det meste den enkleste måten å levere produkter til publikum.
Foundation's Building Blocks-bibliotek med kodede brukergrensesnittkomponenter er designet for å gjøre det lettere å nå et sluttprodukt raskere. I motsetning til maler, dikterer ikke byggesteiner hvordan nettstedet ditt skal se ut eller være strukturert.De gir deg bare verktøyene for å bygge opp ditt eget tilpassede utseende og føles mye raskere.
I denne opplæringen lærer du hvordan du bygger et statisk e-handelsnettsted fra grunnen av ved hjelp av eCommerce Kit, en kuratert samling byggesteiner som er designet for å hjelpe deg med å bygge bestemte typer nettsteder. Selv om dette stillaset er en prototype, kan byggesteinene vi bruker og utformingen vi ender opp med, brukes på ethvert system.
Starter
Det første vi trenger å gjøre er å sette opp et miljø for å bygge nettstedet. For denne opplæringen må du først laste ned node.js. Når den er installert, vil du installere Foundation CLI ved hjelp av kommandoen npm installer -g foundation-cli.
Nå som du har Foundation installert på systemet ditt, la oss starte et nytt Foundation-prosjekt ved å bruke kommandostiftelsen new e-commerce-site. I listen som følger, velg det første alternativet, ”A website (Foundation for Sites)”, skriv inn prosjektnavnet vårt “e-handelssted”, og velg deretter “ZURB-mal”. Dette starter en Foundation mal og utviklingsserver slik at vi enkelt kan begynne å bygge nettstedet vårt. Løpe npm start i terminalen for å kjøre prosjektet.
La oss deretter ta en titt bak koden til det nye prosjektet vårt ved å åpne det i en tekstredigerer. Her finner du en eksempelside i 'src / pages / index.html' som inneholder noe standard malmateriale. Vi skal fjerne all koden her.
Redaktørens merknad: Leter du etter et netthandelsnettdesign for din bedrift? Hvis du leter etter informasjon som kan hjelpe deg med å velge den som passer best for deg, kan du bruke spørreskjemaet nedenfor for å gi deg informasjon fra en rekke leverandører gratis:
Installere et sett
Før vi skriver noen kode, skal vi hente inn Foundation's eCommerce Kit med Foundation's CLI. Gå til terminalen din og bruk kommandofundamentkits installere e-handel.
Hvis denne kommandoen ikke fungerer, må du dobbeltsjekke at Foundation CLI er oppdatert til 2.2.3. For å sjekke hvilken versjon du bruker, kjør fundament -v i terminalen din. Hvis du trenger å oppdatere, kan du bare avinstallere CLI med npm avinstallere -g foundation-cli og installer den på nytt med npm installer -g foundation-cli.
Dette lastet bare ned alle byggesteinene inne i e-handelspakken vår! Hver gang du installerer en byggestein, vises den i src / partials / building-blocks. Du vet at settet ditt er riktig installert hvis alle byggesteinene automatisk er importert til deg app.scss fil.
Noen av disse byggesteinene inkluderer ikoner fra Font Awesome, så du vil enten installere dem manuelt eller legge til CDN-en i hodet> av nettstedet ditt. For å gjøre dette, naviger til src / layouts / default.html og legg til lenke href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet"> mellom hodet> koder.
Stillas på siden
La oss komme til å bygge! Med vårt Kit installert, vil disse neste par trinnene føles litt som å leke med LEGO: i dine egne prosjekter kan du velge å bruke dem alle, eller du kan bare bruke et utvalg. Du er velkommen til å blande og matche Building Blocks for å oppnå din drømme e-handelslayout.
For denne opplæringen er de to første blokkene vi begynner med, header og promo-helt. For å gjøre dette skal vi bruke den delvise mekanismen til styret. La oss kaste inn delene i den tomme index.html-filen {{> e-handelshode}} og {{> e-handel-promo-helt}}. Med bare disse to byggesteinene ser landingssiden vår for e-handel allerede omtrent halvveis ut.
Deretter vil vi kaste inn noen produktkort under helteseksjonen vår. For å bruke produktkortets byggestein, bruker vi Foundation's block grid slik at kortene sitter jevnt innenfor et grid. Dette vil også gjøre det lettere å endre utformingen av disse kortene senere.
La oss begynne med div>. Inne i denne div, kast inn ti kolonner med produktkortet inne i hver kolonne div> {{> e-handel-produkt-kort}} / div>.
Vi ønsker å gi kundene våre en måte å komme til flere av produktene våre på, så la oss legge til en ringeknapp under produktkortene våre. Først må vi lage vår div> slik at knappen vår blir sentrert på siden. Deretter bruker vi komponenten Foundation-knappen for å lage en infomelding. Legg til en knapp> Handle alle produkter / knapp> innsiden av .rad kolonne.
Siden føles nesten komplett nå, men la oss også legge til en topptekst mellom helten vår og produktkortene for å gi litt kontekst. Legg til en under helten div> å inneholde overskriften vår h1> Nyeste ankomster / h1>.
De fleste e-handels hjemmesider har mer salgsfremmende innhold under produktene sine. La oss bruke byggesteinen {{> e-handel-helt-glidebryter-liten}} her. For å forhindre at glidebryteren strekker seg over bredden på siden, vil vi vikle den rundt en div>.
Siden e-handelssteder vanligvis består av mange sider, vil de fleste kreve en mega bunntekst med mange lenker for å håndtere sidevolumet. Vår e-handel Kit leveres med en bunntekst for akkurat denne brukssaken. For å pakke opp dette stillaset, la oss slippe i {{> e-handel-bunntekst}} helt nederst i HTML-en.
Se etter respons
I disse dager er det vanskelig for et nettsted å komme seg uten å være mobilvennlig. Dette gjelder spesielt for e-handelsnettsteder. Nå som netthandel er blitt normen, vil vi ikke miste den prosentandelen brukere som gjør dette via mobiltelefonene sine.
Etter vårt motto om mobil-først, er Foundation's Building Blocks bygget for å være naturlig responsive. En rask sjekk på en mindre skjerm viser at nettstedet vårt fremdeles ser ganske bra ut.
Men når vi klikker på hamburger-menyen, er ikke lerretet vårt riktig koblet til. Denne delen blir litt vanskelig, men ikke bekymre deg! Vi vil bryte ned hva som skjer i denne menyen uten lerret, og deretter gå gjennom hvordan du kobler den til.
Hvis du tar en titt på e-handel-header.html-filen, vil du legge merke til at denne overskriften har innebygd lerret. Så hvorfor fungerte det ikke? Da vi klikket på hamburger-menyen, var det eneste som ble “dyttet” overskriften. Resten av siden var i sikte og forårsaket merkelig overlapping.
Dette er fordi denne overskriften ble bygget for å fungere alene, men i virkeligheten må den jobbe med hele siden. Med andre ord, det må skyve alt innholdet på siden når menyen uten lerret blir utløst, ikke bare toppmenyen. Denne e-handelshodet ble skrevet slik fordi det kreves dykking i din for å sette opp et lerret src / layouts / default.html siden, som er utenfor byggesteins rekkevidde.
For å fikse dette er alt vi trenger å ta alt inn i div id = "ecommerce-header" data-off-canvas> og flytt det til src / layouts / default.html. Deretter skal vi pakke inn {{> kropp}} av nettstedet vårt inne i en div data-off-canvas-content>. Dette vil presse kroppen til nettstedet vårt når off-canvas blir utløst.
Nå når vi klikker på hamburgeren vår, flytter hele siden til menyen uten lerret! Kroppen til vår default.html siden skal se slik ut:
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"> Kategori 1 / a> / li> li> a href = "#"> Kategori 2 / a> / li> li> a href = "hvorfor.html"> Kategori 3 / a> / li> li> a href = "build.html"> Kategori 4 / a> / li> li> a href = "#"> Kategori 5 / a> / li> / ul> hr> ul> li> a href = "#"> Hjelp / a> / li> li> a href = "#"> Bestillingsstatus / a> / li> li> a href = "#"> Kontakt / a> / li> li > a href = "#"> Min konto / a> / li> / ul> / div> div data-off-canvas-content> {{> body}} / div> script src = "{{root}} eiendeler /js/app.js "> / script> / body>
Konklusjon
Vi har vist deg hvordan du starter e-handel-nettstedet ditt med Foundation's eCommerce Kit, men ikke stopp der! Det er over 100 byggesteiner som kan brukes til å forbedre sidene dine. I løpet av få minutter har vi stillaset et statisk e-handelsnettsted med byggesteiner. Dette sparer deg mye tid som du nå kan bruke til å legge inn visuelt og utforme nettstedet slik at det passer ditt merke.
Selv om du tar dette videre og bruker et back-end-system, annen delvis mekanisme eller har en annen måte å få dataene dine inn på nettstedet, vil den gitte arbeidsflyten med Building Blocks virkelig spare deg for tid og derfor penger. Foundation's Building Blocks er en fin måte å komme i gang fordi de er ment å bli utvidet, passer inn i dine eksisterende stiler og brukes i ethvert applikasjonssystem.
Denne artikkelen dukket opprinnelig opp i nettmagasinet utgave 266. Kjøp den her.
