Bygg et e-handelssted fra grunnen

Sep 11, 2025

hvordan

[1. 3]

E-handel har blitt så populært de siste årene er det nå vanskelig å forestille seg en fremtid uten det. Kraften til Internett har gjort tilkobling med kunder en bris for bedrifter og merker, og e-handel, for det meste er den enkleste måten å levere produkter til publikum.

Stiftelsens byggeklosser Bibliotek med kodede brukergrensesnitt er designet for å gjøre det lettere å nå et sluttprodukt raskere. I motsetning til maler, dikterer byggeblokker ikke hvordan nettstedet ditt skal se eller være strukturert. De gir deg bare verktøyene for å bygge opp ditt eget tilpassede utseende og føle deg mye raskere.

I denne opplæringen lærer du hvordan du bygger et statisk e-handelsnettsted fra bunnen av å bruke e-handelssettet, en kurert samling av byggeklosser som er utformet for å hjelpe deg med å bygge bestemte nettsteder. Selv om denne stillaset er en prototype, byggeklosser vi bruker og layout vi ende opp med, kan brukes på et hvilket som helst system.

Starter

Building Blocks don’t dictate how your site should look — Byggeklosser dikterer ikke hvordan nettstedet ditt skal se

Det første vi må gjøre er å sette opp et miljø for å bygge nettstedet. For denne opplæringen må du først laste ned node.js. Når det er installert, vil du installere grunnlaget CLI ved hjelp av kommandoen NPM Install -G Foundation-CLI .

Nå som du har grunnlag installert på systemet ditt, la oss starte opp et nytt fundamentprosjekt ved å bruke kommandoen Foundation New E-handel. I listen som følger, velg det første alternativet, "Et nettsted (Foundation for Sites) ', skriv inn vårt prosjektnavn' E-handel-nettsted ', og velg deretter' Zurbskrift '. Dette vil starte en fundamentmal og utviklingsserver, slik at vi enkelt kan begynne å bygge vår nettside. Løpe NPM start i terminalen for å kjøre prosjektet.

Deretter la oss ta en titt bak koden til vårt nye prosjekt ved å åpne det i en tekstredigerer. Her finner du en prøve side i 'SRC / sider / index.html' som inneholder noen standardmateriale. Vi skal fjerne all koden her.

Redaktørens notat: Leter du etter en e-handel nettside design for din bedrift? Hvis du leter etter informasjon for å hjelpe deg med å velge den som passer for deg, bruk spørreskjemaet nedenfor for å gi deg informasjon fra en rekke leverandører gratis:

Installere et sett

Før vi skriver noen kode, skal vi trekke i Foundations E-handel Kit med Foundation's Cli. Gå til terminalen din og bruk kommandoen Foundation Kits installere e-handel.

Hvis denne kommandoen ikke virker, dobbeltsjekker du at Foundation CLI er oppdatert til 2.2.3. For å sjekke hvilken versjon du er på, kjør Foundation -v. i terminalen din. Hvis du trenger å oppdatere, må du bare avinstallere CLI med npm Uninstall -G Foundation-CLI og installer den på nytt med NPM Install -G Foundation-CLI .

Dette lastet ned bare alle byggeklossene inne i vårt e-handelsmonteringssett! Når som helst du installerer en byggeblokk, vises den i SRC / Delvis / Bygningsblokker . Du vet at kitet ditt er riktig installert hvis alle byggeklossene er blitt importert automatisk til din App.Scss fil.

Noen av disse bygningsblokkene inkluderer ikoner fra Font Awesome, så du vil enten manuelt installere dem eller legge til CDN til & lt; head & gt; av nettstedet ditt. For å gjøre dette, naviger til SRC / Layouts / Default.html og legg til. & lt; link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "Stylesheet" & gt; mellom & lt; head & gt; Tags.

Stillas nettstedet

Mix and match blocks to achieve your ideal eCommerce layout — Bland og match blokker for å oppnå ditt ideelle e-handelsoppsett

La oss komme til å bygge! Med vårt kit installert, vil disse neste trinnene føles litt som å leke med LEGO: I dine egne prosjekter kan du velge å bruke dem alle, eller du kan bruke bare et utvalg. Du er velkommen til å blande og matche byggeblokker for å oppnå din drøm-e-handel layout.

For denne opplæringen, de to første blokkene begynner vi med, er topptekst og promo Hero. For å gjøre dette, skal vi bruke styrets partiell mekanisme. I vår tomme index.html-fil, la oss kaste i delene {{& gt; e-handel-header}} og {{& gt; e-handel-promo-helten}} . Med bare disse to byggeblokkene, ser vår e-handel destinasjonsside allerede omtrent halvveis ferdig.

Deretter kaster vi inn noen produktkort under vår heltseksjon. For å bruke produktkortbyggingsblokken, bruker vi Foundations blokknett, slik at kortene sitter jevnt i et rutenett. Dette vil også gjøre det lettere å endre utformingen av disse kortene senere.

La oss starte med & lt; div klasse = "rad liten-up-2 medium-up-5" & gt; . Inne i denne diven, kast i ti kolonner med produktkortet inne i hver kolonne & lt; div class = "kolonne" & gt; {{& gt; e-handel-produkt-kort}} & lt; / div & gt; .

Vi ønsker å gi våre kunder en måte å komme til flere av våre produkter, så la oss legge til en callout-knapp under våre produktkort. Først må vi lage vår & lt; div class = "rad kolonne tekst-senter" & gt; Slik at vår knapp vil være sentrert på siden. Deretter bruker vi Foundation Button Component for å lage vår callout. Legg til en & lt; button class = "knapp" & gt; shop alle produkter & lt; / knappen & gt; innsiden av den .rad kolonne .

Siden føles nesten fullført nå, men la oss også legge til en overskrift mellom vår helt og produktkort for å gi litt kontekst. Under helten, legg til a & lt; div class = "rad kolonne" & gt; å inneholde vår header & lt; h1 & gt; nyeste ankomster & lt; / h1 & gt; .

De fleste e-handelssider har mer salgsfremmende innhold under sine produkter. La oss bruke byggeblokken {{& gt; E-handel-Hero-Slider-Small}} her. For å hindre at glidebryteren spenner over bredden på siden, vil vi vikle den rundt en & lt; div class = "rad kolonne" & gt; .

Siden e-handelsnettsteder vanligvis består av mange sider, vil de fleste kreve en mega bunntekst med mange lenker for å håndtere volumet på sider. Vårt e-handelssett kommer med en bunntekst for dette eksakte bruksområdet. Å pakke opp denne stillaset, la oss falle i {{& gt; e-handel-footer}} på toppen av vår HTML.

Sjekk for respons

I disse dager er det vanskelig for ethvert nettsted å komme forbi uten å være mobilvennlig. Dette gjelder spesielt for e-handelsnettsteder. Nå som online shopping er blitt normen, vil vi ikke miste den andelen av brukere som gjør dette gjennom sine mobiltelefoner.

Etter vårt motto av mobil-først, er Foundations byggeklosser bygget for å være naturlig responsive. En rask sjekk på en mindre skjerm viser at nettstedet vårt fortsatt ser ganske bra ut.

Men når vi klikker på Hamburger-menyen, har vårt off-lerret ikke blitt riktig tilkoblet. Denne delen blir litt vanskelig, men ikke bekymre deg! Vi bryter ned hva som skjer i denne off-lerret-menyen, og deretter gå gjennom hvordan du kobler den opp.

Hvis du tar en titt på e-handel-header.html-filen, vil du legge merke til at denne overskriften har et off-lerret som er innebygd i det. Så hvorfor fungerte det ikke? Når vi klikket på Hamburger-menyen, var det eneste som var "presset" overskriften. Resten av siden forblir i sikte, noe som forårsaket noe merkelig overlapping.

Dette skyldes at denne overskriften ble bygget for å jobbe alene, men i virkeligheten må det jobbe med hele siden. Med andre ord, det må presse alt innholdet på siden over når den off-lerret-menyen utløses, ikke bare toppmenyen. Denne e-handelshodetningen ble skrevet som dette fordi å sette opp et off-lerret krever dykking i din SRC / Layouts / Default.html side, som er utenfor bygningsblokkens rekkevidde.

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet — Dette er det vi ser for tiden fordi off-lerret ikke har blitt koblet til ennå

For å fikse dette, er alt vi trenger å gjøre, ta alt inne i & lt; div class = "off-canvas e-handel-heading-off-lerret posisjon-venstre" id = "eCommerce-header" data-off-canvas & gt; og flytt den til src / layouter / standard.html . Deretter skal vi vikle {{& gt; kropp}} av nettstedet vårt inne i en & lt; div class = "off-canvas-innhold" data-off-canvas-content & gt; . Dette vil presse kroppen til nettstedet vårt når off-lerret utløses.

Nå når vi klikker på vår hamburger, går hele nettstedet over for den off-lerret-menyen! Kroppen av vår standard.html. Siden skal se slik ut:

& lt; body & gt;
  & lt; div class = "off-canvas e-handel-heading-off-lerret posisjon-venstre" id = "eCommerce-header" data-off-canvas & gt;
& lt; knappeklasse = "Lukk-knapp" Aria-Label = "Lukk meny" Type = "-knappen" Data-Close & GT;
  & lt; span aria-hidden = "true" & gt; / span & gt;
& lt; / knappen & gt;
& lt; ul klasse = "vertikal meny" & gt;
  & lt; li class = "Main-Nav-Link" & GT; & lt; a href = "Kategorier.html" & gt;
  & lt; li class = "Main-Nav-Link" & GT; & lt; en href = "#" & gt; kategori 2 & lt; / a & gt;
  & lt; Li Class = "Main-Nav-Link" & GT; "en href =" why.html "& gt; Kategori 3 & LI & GT
  & lt; Li Class = "Main-Nav-Link" & GT; "en href =" build.html "& gt; Kategori 4 & LI & GT
  & lt; Li class = "Main-Nav-Link" & GT; & lt; en href = "#" & gt; Kategori 5 & LI & GT;
lt; / ul & gt;
lt; hr & gt;

& lt; ul klasse = "meny vertikal" & gt;
  & lt; en href = "#" & gt; hjelp & lt; / a & gt;
  & lt; en href = "#" & gt; bestillingsstatus & lt; / a & gt; & lt; / li & gt;
  & lt; en href = "#" & gt; kontakt & lt; / a & gt;
  & lt; a href = "#" & gt; min konto & lt; / a & gt; & lt; / li & gt;
lt; / ul & gt;
  & lt; / div & gt;

  & lt; div class = "off-canvas-innhold" data-off-canvas-content & gt;
{{& gt; kropp}}
  & lt; / div & gt;
  & lt; script src = "{{root}} eiendeler / js / app.js" & gt; & lt; / script & gt;
& lt; / body & gt;

Konklusjon

Vi har vist deg hvordan du skal hoppe på e-handelsnettstedet ditt med Foundations e-handelssett, men stopp ikke der! Det er over 100 byggeklosser som kan brukes til å forbedre sidene dine. I løpet av få minutter har vi stillaset et statisk e-handelsnettsted med byggeblokker. Dette sparer deg mye tid som du nå kan bruke til lag i bildene og stilen som passer til ditt merke.

Selv om du tar dette videre og bruker et back-end-system, forskjellig delvis mekanisme eller en annen måte å få dataene på nettstedet, vil den oppgitte arbeidsflyten med byggeblokker virkelig spare deg tid og derfor penger. Stiftelsens byggeklosser er en fin måte å komme i gang fordi de er ment å bli utvidet på, passe inn i dine eksisterende stiler, og bli brukt i et hvilket som helst applikasjonssystem.

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 266. Kjøp det her .

Relaterte artikler:

Bygge en kortbasert brukergrensesnitt med fundament
10 vakre nye e-handelsnettsteder du må se
Hvordan forbedre ytelsen til e-handelsnettsteder

Bygg et e-handelssted fra grunnen

Starter

Installere et sett

Stillas nettstedet

Sjekk for respons

Konklusjon

hvordan - Mest populære artikler

Skyoppbevaring for bilder og bilder: Hvordan velge den beste skyen for arbeidet ditt

Legg til SVG-filtre med CSS

Bygg en kompleks 3D-sci-fi-scene i blender

Master Procedural Modeling

Hvordan lage deilige teksturer med blyanter

Slik forbereder du illustratørgrafikk for ettervirkninger

5 måter å administrere kontantstrøm effektivt

Lag en Hi-Fidelity Prototype i Atomic

Kategorier