Bouw vanaf nul een e-commerce-site

E-commerce is de afgelopen jaren zo populair geworden. Het is nu moeilijk om een ​​toekomst zonder te stellen. De kracht van het internet heeft contact gemaakt met klanten een briesje voor bedrijven en merken, en e-commerce, voor het grootste deel, is de gemakkelijkste manier om producten aan hun publiek te leveren.

Stichting's bouwstenen Bibliotheek van gecodeerde UI-componenten zijn ontworpen om het gemakkelijker te maken om een ​​eindproduct sneller te bereiken. In tegenstelling tot sjablonen dicteren bouwstenen niet hoe uw site moet kijken of gestructureerd zijn. Ze bieden je gewoon de tools om je eigen op maat gemaakte look op te bouwen en veel sneller te voelen.

In deze tutorial leert u hoe u een statisch e-commerce-website helemaal opnieuw kunt bouwen met behulp van de e-commerce-kit, een samengestelde verzameling bouwstenen die zijn ontworpen om u te helpen specifieke soorten websites op te bouwen. Hoewel deze steiger een prototype is, worden de bouwstenen gebruikt en de lay-out waarmee we eindigen op elk systeem.

Beginnen

Het eerste dat we moeten doen is een omgeving opzetten om de site te bouwen. Voor deze tutorial moet je eerst node.js.js downloaden Zodra dat is geïnstalleerd, wilt u de Foundation CLI installeren met behulp van de opdracht npm install-g fundering-cli ​

Nu je stichting op je systeem hebt geïnstalleerd, laten we een nieuw funderingsproject opstarten met behulp van de opdrachtstichting nieuwe e-commerce-site. Selecteer in de lijst die volgt, selecteert u de eerste optie "A Website (Foundation for Sites) ', typt u onze projectnaam' E-commerce-Site 'en selecteert u vervolgens' Zurb sjabloon '. Dit start een stichtingssjabloon en de ontwikkelingsserver, zodat we gemakkelijk onze website kunnen bouwen. Rennen NPM Start in de terminal om het project uit te voeren.

Laten we vervolgens een kijkje nemen achter de code van ons nieuwe project door deze in een teksteditor te openen. Hier vindt u een voorbeeldpagina in 'SRC / pagina's / index.html' met een aantal standaard sjabloonmateriaal. We gaan hier al de code verwijderen.

Opmerking: Op zoek naar een e-commerce-website-ontwerp voor uw bedrijf? Als u op zoek bent naar informatie om u te helpen bij het kiezen van degene die geschikt is voor u, gebruikt u de onderstaande vragenlijst om u gratis informatie uit een verscheidenheid aan leveranciers te bieden:

Een kit installeren

Voordat we elke code schrijven, gaan we in de e-commerce-kit van Foundation met de CLI van Foundation. Ga naar uw terminal en gebruik de opdrachtstichting Kits Installeer e-commerce.

Als deze opdracht niet werkt, controleer dan of uw Foundation CLI wordt bijgewerkt naar 2.2.3. Om te controleren op welke versie je bent, ren foundation -v in je terminal. Als u moet bijwerken, verwijdert u de CLI eenvoudigweg met NPM Uninstall -G Foundation-CLI en installeer het opnieuw met npm install-g fundering-cli ​

Dit heeft alle bouwstenen in onze e-commerce kit gedownload! Elke keer dat u een bouwsteen installeert, verschijnt deze in SRC / Partials / Bouwblokken ​U weet dat uw set correct is geïnstalleerd als alle bouwstenen automatisch in uw zijn geïmporteerd App.SCSS het dossier.

Sommige van deze bouwstenen omvatten pictogrammen van Font Awesome, dus je wilt ze handmatig installeren of hun CDN toevoegen aan de & LT; HOOFD & GT; van uw site. Om dit te doen, navigeren naar SRC / Layouts / Default.html en voeg toe & lt; link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" & GT; tussen de & LT; HOOFD & GT; Tags.

Steigers De site

Laten we naar bouwen! Met onze set geïnstalleerd, zullen deze volgende stappen een beetje willen spelen met LEGO: in uw eigen projecten kunt u ervoor kiezen om ze allemaal te gebruiken, of u kunt alleen een selectie gebruiken. Voel je vrij om bouwstenen te mixen en matchen om je droom e-commerce lay-out te bereiken.

Voor deze tutorial zullen we de eerste twee blokken beginnen met zijn kop- en promo-held. Om dit te doen, gaan we het gedeeltelijke mechanisme van het stuur gebruiken. Laten we in het dossier van onze lege index.html in de partials gooien {{& GT; E-commerce-header}} en {{& GT; E-commerce-promo-held}} ​Met alleen deze twee bouwstenen lijkt onze e-commerce-landingspagina al ongeveer halverwege gedaan.

Vervolgens gooien we een aantal productkaarten onder onze heldsectie. Om de bouwblok van het productkaart te gebruiken, gebruiken we het blokraster van de stichting zodat de kaarten gelijkmatig binnen een raster zitten. Dit maakt het ook gemakkelijker om de lay-out van deze kaarten later te veranderen.

Laten we beginnen met & lt; div class = "rij small-up-2 middel-up-5" & GT; ​Binnen deze div, gooi in tien kolommen met de productkaart in elke kolom & lt; div class = "kolom" & GT; {{& GT; ECOMMERCE-PRODUCT-CARD}} & LT; / DIV & GT; ​

We willen onze klanten een manier geven om meer van onze producten te bereiken, dus laten we een callout-knop onder onze productkaarten toevoegen. Eerst moeten we onze maken & LT; DIV-klasse = "Rijkolom Text-Center" & GT; Zodat onze knop gecentreerd is op de pagina. Vervolgens gebruiken we de CONCEPTION CONDECT VAN DE STICHTING om onze callout te maken. Voeg een ... toe & LT; Knopklasse = "Button" & GT; Winkel alle producten & lt; / knop & GT; binnenkant van de .rij kolom ​

De pagina voelt nu bijna voltooid, maar laten we ook een koptekst toevoegen tussen onze held- en productkaarten om een ​​beetje context te geven. Voeg onder de held een toe & lt; div class = "rij kolom" & GT; om onze header te bevatten & LT; H1 & GT; nieuwste aankomsten & LT; / H1 & GT; ​

De meeste eCommerce Home-pagina's hebben meer promotionele inhoud onder hun producten. Laten we het bouwsteen gebruiken {{& GT; e-commerce-held-slider-small}} hier. Om te voorkomen dat de schuif de breedte van de pagina overspoelt, wikkelen we het rond een & lt; div class = "rij kolom" & GT; ​

Omdat e-commerce sites meestal uit vele pagina's bestaan, zullen de meeste een mega-voettekst vereisen met veel links om het volume van de pagina's af te handelen. Onze e-commerce-set wordt geleverd met een voettekst voor dit exacte gebruikscase. Om deze steiger in te pakken, laten we in de {{& GT; e-commerce-footer}} onder de onderkant van onze HTML.

Controleer op reactievermogen

Tegenwoordig is het moeilijk voor elke site om langs te komen zonder mobielvriendelijk te zijn. Dit geldt vooral voor e-commerce sites. Nu dat online winkelen de norm is geworden, willen we dat percentage van gebruikers niet verliezen die dit via hun mobiele telefoons doen.

Na ons motto van mobiele-eerst zijn de bouwstenen van Foundation gebouwd om van nature responsief te zijn. Een snelle controle op een kleiner scherm laat zien dat onze site nog steeds best goed uitziet.

Wanneer we echter op het Hamburger-menu klikken, is ons off-canvas niet goed aangesloten. Dit deel krijgt een beetje lastig, maar maak je geen zorgen! We zullen afbreken wat er gebeurt in dit off-canvas-menu en loop dan door hoe je het moet aansluiten.

Als u een kijkje neemt naar het e-commerce-header.html-bestand, zult u merken dat deze koptekst een off-canvas heeft ingebracht. Dus waarom werkte het niet? Toen we op het Hamburger-menu klikten, was het enige dat 'duwde' de kop. De rest van de pagina bleef in het zicht, waardoor een vreemde overlapping.

Dit komt omdat deze koptekst op zichzelf is gebouwd, maar in werkelijkheid moet het met de hele pagina werken. Met andere woorden, het moet alle inhoud op de pagina duwen wanneer het menu Off-canvas wordt geactiveerd, niet alleen het kopmenu. Deze e-commerce-header is zo geschreven omdat het opzetten van een off-canvas in uw SRC / Layouts / Default.html pagina, die buiten het bereik van de bouwsteen ligt.

Om dit te verhelpen, is alles wat we moeten doen alles in de binnenkant van & lt; div class = "Off-canvas e-commerce-header-off-canvas positie-links" id = "e-commerce-header" data-off-canvas & gt; en verplaats het naar SRC / lay-outs / standaard.html ​Vervolgens gaan we de {{& GT; lichaam}} van onze site binnenkant van een & LT; DIV-klasse = "Off-canvas-inhoud" Data-off-canvas-inhoud & GT; ​Dit duwt het lichaam van onze site wanneer off-canvas wordt geactiveerd.

Wanneer we op onze hamburger klikken, gaat de hele site over voor het off-canvas-menu! Het lichaam van onze standaard.html pagina moet er als volgt uitzien:

& LT; BODY & GT;
  & lt; div class = "Off-canvas e-commerce-header-off-canvas positie-links" id = "e-commerce-header" data-off-canvas & gt;
& LT; Knopklasse = "Sluiten-knop" ARIA-LABEL = "Sluit menu" Type = "Knop" Data-Close & GT;
  & LT; span aria-verborgen = "True" & GT; & amp; tijden; & lt; / span & gt;
& lt; / knop & GT;
& LT; UL-klasse = "Verticaal menu" & GT;
  & LT; LI-klasse = "Main-Nav-Link" & GT; & LT; A HREF = "Categorieën.html" & GT; Categorie 1 & LT; / A & GT; & LT; / LI & GT;
  & LT; LI-klasse = "Main-Nav-Link" & GT; & LT; A HREF = "#" & GT; Categorie 2 & LT; / A & GT; & LT; / LI & GT;
  & LT; LI-klasse = "Main-Nav-Link" & GT; & LT; A HREF = "Why.html" & GT; Categorie 3 & LT; / A & GT; & LT; / LI & GT;
  & LT; LI-klasse = "Main-Nav-Link" & GT; & LT; A HREF = "Build.html" & GT; Categorie 4 & LT; / A & GT; & LT; / LI & GT;
  & LT; LI CLASS = "Main-Nav-Link" & GT; & LT; A HREF = "#" & GT; Categorie 5 & LT; / A & GT; & LT; / LI & GT;
& LT; / UL & GT;
& LT; HR & GT;

& lt; ul class = "menu verticaal" & GT;
  & LT; LI & GT; & LT; A HREF = "#" & GT; HELP & LT; / A & GT; & LT; / LI & GT;
  & LT; LI & GT; & LT; A HREF = "#" & GT; Bestel status & LT; / A & GT; & LT; / LI & GT;
  & LT; LI & GT; & LT; A HREF = "#" & GT; CONTACT & LT; / A & GT; & LT; / LI & GT;
  & LT; LI & GT; & LT; A HREF = "#" & GT; MIJN ACCOUNT & LT; / A & GT; & LT; / LI & GT;
& LT; / UL & GT;
  & LT; / DIV & GT;

  & LT; DIV-klasse = "Off-canvas-inhoud" Data-off-canvas-inhoud & GT;
{{& GT; lichaam}}
  & LT; / DIV & GT;
  & lt; script src = "{{root}} Assets / JS / app.js" & GT; & LT; / Script & GT;
& LT; / BODY & GT; 

Gevolgtrekking

We hebben je laten zien hoe je je e-commerce-site kunt beginnen met de e-commerce kit van Foundation, maar stop daar niet! Er zijn meer dan 100 bouwstenen die kunnen worden gebruikt om uw pagina's te verbeteren. In enkele minuten hebben we een statische e-commerce-site met bouwstenen. Dit bespaart u veel tijd dat u nu kunt gebruiken om te laag in de visuals en de site in uw merk te passen.

Zelfs als u dit verder neemt en het gebruik van een back-end systeem, een ander gedeeltelijk mechanisme of een andere manier hebt om uw gegevens op de site te krijgen, zal de gegeven workflow met bouwstenen u echt tijd besparen en daarom geld. De bouwstenen van Foundation zijn een geweldige manier om aan de slag te gaan omdat ze moeten worden uitgebreid op, passen in je bestaande stijlen en worden gebruikt in elk toepassingssysteem.

Dit artikel verscheen oorspronkelijk in netto tijdschrift Probleem 266. Koop het hier ​

Gerelateerde artikelen:

• Bouw een kaart-gebaseerde UI met Foundation
• 10 Mooie nieuwe e-commerce-sites die je moet zien
• Hoe de prestaties van e-commerce-sites te verbeteren