Erstellen Sie eine E-Commerce-Site von Grund auf

E-Commerce ist in den letzten Jahren so beliebt, dass es jetzt schwer ist, eine Zukunft ohne sie vorzustellen. Die Macht des Internets hat mit Kunden eine Brise für Unternehmen und Marken und E-Commerce vorgenommen, zum größten Teil ist der einfachste Weg, Produkte ihres Publikums zu liefern.

Die Bausteine ​​der Gründung der Foundation-Bibliothek mit codierten UI-Komponenten sollen das Erreichen eines Endprodukts schneller erreichen. Im Gegensatz zu Vorlagen diktieren Bausteine ​​nicht, wie Ihre Site aussehen oder strukturiert seien soll. Sie stellen Ihnen einfach die Werkzeuge zur Verfügung, um Ihren eigenen benutzerdefinierten Look aufzubauen und sich viel schneller zu fühlen.

In diesem Tutorial erfahren Sie, wie Sie eine statische E-Commerce-Website von Scratch mit dem E-Commerce-Kit, einer kuratierten Sammlung von Bausteinen, aufbauen, die Ihnen dabei gestaltet sind, bestimmte Arten von Websites zu erstellen. Obwohl dieses Gerüst ein Prototyp ist, sind die Bausteine, die wir verwenden und layout sind, mit der wir enden, können auf jedes System angewendet werden.

Einstieg

Das erste, was wir tun müssen, ist eine Umgebung eingerichtet, um die Website zu erstellen. Für dieses Tutorial müssen Sie zum ersten Mal Node.js herunterladen. Sobald das installiert ist, möchten Sie die Foundation CLI mit dem Befehl installieren NPM installieren -g Foundation-CLI .

Wenn Sie auf Ihrem System Foundation installiert sind, starten wir ein neues Foundation-Projekt mit der neuen E-Commerce-Site von Command Foundation. Wählen Sie in der folgenden Liste die erste Option aus, "eine Website (Stiftung für Standorte)", geben Sie in unseren Projektnamen "ECommerce-Site" ein, und wählen Sie dann 'Zurb-Vorlage auswählen. Dadurch wird ein Foundation-Vorlagen- und Entwicklungsserver gestartet, damit wir leicht mit dem Bau unserer Website beginnen können. Lauf NPM-Start. im Terminal, um das Projekt auszuführen.

Nehmen wir anschließend einen Blick hinter den Code unseres neuen Projekts, indem wir ihn in einem Texteditor eröffnen. Hier finden Sie eine Musterseite in 'src / pages / index.html', die ein gewisses Standardvorlagenmaterial enthält. Wir werden hier den gesamten Code entfernen.

Anmerkung des Herausgebers: Auf der Suche nach einem E-Commerce-Website-Design für Ihr Unternehmen? Wenn Sie nach Informationen suchen, um Ihnen zu helfen, das Richtige für Sie zu wählen, verwenden Sie den folgenden Fragebogen, um Ihnen Informationen aus einer Vielzahl von Anbietern kostenlos zur Verfügung zu stellen:

Ein Kit installieren.

Bevor wir einen Code schreiben, ziehen wir das E-Commerce-Kit der Foundation mit CLI der Stiftung ein. Gehen Sie zu Ihrem Terminal und verwenden Sie die Kommando-Foundation-Kits installieren E-Commerce.

Wenn dieser Befehl nicht funktioniert, überprüfen Sie, ob Ihre Stiftung CLI auf 2.2.3 aktualisiert wird. Um zu überprüfen, welche Version Sie eingeschaltet sind, laufen Sie Foundation -V. in deinem Terminal. Wenn Sie aktualisieren müssen, deinstallieren Sie einfach das CLI mit NPM-Deinstallation -g Foundation-CLI und installieren Sie es mit NPM installieren -g Foundation-CLI .

Dies hat gerade alle Bausteine ​​in unserem E-Commerce-Kit heruntergeladen! Jederzeit, wenn Sie einen Baustein installieren, wird es in angezeigt SRC / Partials / Bausteine . Sie wissen, dass Ihr Kit richtig installiert ist, wenn alle Bausteine ​​automatisch in Ihre eingeführt wurden app.scss. Datei.

Einige dieser Bausteine ​​umfassen Symbole von FONT AWESOME, sodass Sie sie entweder manuell installieren möchten, oder fügen Sie ihre CDN an die hinzu & lt; head & gt; Ihrer Site. Navigieren Sie zu SRC / Layouts / default.html und add. & lt; link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" & gt; zwischen den & lt; head & gt; Stichworte.

Gerüst der Site.

Lass uns zum Aufbau kommen! Mit unserem installierten Kit werden diese nächsten Schritte ein bisschen wie beim Spielen mit Lego fühlen: In Ihren eigenen Projekten können Sie alle verwenden, um alle zu verwenden, oder Sie können nur eine Auswahl verwenden. Fühlen Sie sich frei, um Bausteine ​​zu mischen, um Ihr Traum-E-Commerce-Layout zu erreichen.

Für dieses Tutorial beginnen wir mit den ersten beiden Blöcken, mit denen wir mit Header und Promo-Helden beginnen. Dazu werden wir den Lenker-Teilmechanismus verwenden. In unserer leeren Index.html-Datei werfen wir die Partials ein {{& gt; E-Commerce-Header}} und {{& gt; EcoMerce-Promo-Hero}} . Mit nur diesen beiden Bausteinen schaut unsere E-Commerce-Landing-Seite bereits auf halbem Weg.

Als nächstes werfen wir einige Produktkarten unterhalb unseres Heldenabschnitts. Um den Produktkarten-Baustein zu verwenden, verwenden wir das Blockgitter der Foundation, damit die Karten gleichmäßig in einem Raster sitzen. Dies ermöglicht es auch, das Layout dieser Karten später zu ändern.

Lass uns beginnen mit & lt; div class = "Zeile klein-up-2 mittel-up-5" & gt; . In diesem Div werfen Sie in zehn Säulen mit der Produktkarte in jeder Spalte & lt; div class = "columne" & gt; {{& gt; ecommerce-product-card}}} & lt; / div & gt; .

Wir möchten unseren Kunden einen Weg geben, um zu mehr von unseren Produkten zu gelangen, also fügen wir einen Callout-Button unter unseren Produktkarten hinzufügen. Zuerst müssen wir unsere erstellen & lt; Div Class = "Zeilenspalte Text-Center" & GT; Damit ist unser Knopf auf der Seite zentriert. Als Nächstes verwenden wir die Button-Komponente der Stiftung, um unseren Callout zu erstellen. Füge hinzu ein & lt; Button-Klasse = "Button" & GT; SHOP Alle Produkte & lt; / button & gt; Innerhalb des .Zeile Spalte .

Die Seite fühlt sich jetzt fast abgeschlossen an, aber lassen Sie uns auch einen Header zwischen unseren Helden- und Produktkarten hinzufügen, um ein wenig Kontext zu erteilen. Fügen Sie unter dem Helden A hinzu & lt; div class = "Zeilenspalte" & gt; Um unseren Kopf zu enthalten Neueste Ankünfte & lt; / h1 & gt; .

Die meisten E-Commerce-Startseiten haben mehr Werbegehalt unter ihren Produkten. Lassen Sie uns den Baustein verwenden {{& gt; ECommerce-Hero-Slider-Small}} Hier. Um zu verhindern, dass der Schieber die Breite der Seite überspannt, wickeln wir es um a & lt; div class = "Zeilenspalte" & gt; .

Da E-Commerce-Sites normalerweise aus vielen Seiten bestehen, benötigen die meisten einen Mega-Fußzeilen mit vielen Links, um das Seitenvolumen zu behandeln. Unser E-Commerce-Kit wird mit einer Fußzeile für diesen exakten Anwendungsfall geliefert. Um dieses Gerüst einzuwickeln, lass uns in die fallen {{& gt; E-Commerce-Fußzeile}} ganz in der Unterseite unseres HTML.

Überprüfen Sie auf die Reaktionsfähigkeit

In diesen Tagen ist es für jeden Ort schwer, ohne mobilfreundlich zu sein. Dies gilt insbesondere für E-Commerce-Sites. Jetzt, da das Online-Shopping zur Norm geworden ist, wollen wir diesen Prozentsatz der Benutzer nicht verlieren, die dies durch ihre Mobiltelefone tun.

Nach unserem Motto von Mobile-First sind die Bausteine ​​der Stiftung, um natürlich ansprechend zu sein. Ein kurzer Check auf einem kleineren Bildschirm zeigt, dass unsere Website immer noch ziemlich gut aussieht.

Wenn wir jedoch auf das Hamburger-Menü klicken, wurde unsere Off-Canvas nicht ordnungsgemäß angeschlossen. Dieser Teil bekommt ein bisschen schwierig, aber keine Sorge! Wir brechen auf, was in diesem Off-Canvas-Menü passiert, und gehen Sie dann durch, wie Sie es anschließen können.

Wenn Sie einen Blick in die Datei ECommerce-Header.html werfen, werden Sie feststellen, dass dieser Header über eine Off-Leinwand verfügt, in der eingebaut ist. Warum hat es also nicht funktioniert? Als wir auf das Hamburger-Menü geklickt haben, war das einzige, was "gedrückt" war, der Header. Der Rest der Seite blieb in Sicht, wodurch etwas seltsame Überlappungen verursacht.

Dies liegt daran, dass dieser Header auf eigener Arbeit errichtet wurde, aber in Wirklichkeit muss es mit der gesamten Seite arbeiten. Mit anderen Worten, es muss den gesamten Inhalt auf der Seite drängen, wenn das Menü Off-Canvas ausgelöst wird, nicht nur das Header-Menü. Dieser E-Commerce-Header wurde so geschrieben, denn das Einrichten einer Off-Canvas erfordert ein Tauchen in Ihre SRC / Layouts / default.html Seite, die außerhalb der Reichweite des Bausteins liegt.

Um dies zu beheben, müssen wir alles tun, was wir tun müssen, alles in einnehmen & lt; div class = "off-canvas ecommerce-header-off-canvas position links" id = "ecommerce-header" data off-canvas & gt; und verschieben Sie es in SRC / Layouts / Default.html . Als nächstes wickeln wir das {{& gt; Körper}} von unserer Seite in einem & lt; div class = "off-canvas-content" data-off-canvas-content & gt; . Dadurch wird der Körper unserer Website, wenn Off-Canvas ausgelöst wird.

Wenn wir jetzt auf unser Hamburger klicken, geht die gesamte Site für das Off-Canvas-Menü um! Der Körper von uns default.html. Seite sollte so aussehen:

 & lt; body & gt;
  & lt; div class = "off-canvas ecommerce-header-off-canvas position links" id = "ecommerce-header" data off-canvas & gt;
& lt; Button-Klasse = "Close-Button" ARIA-Label = "Menü schließen" type = "Button" Data-close & gt;
  & lt; span aria-hidden = "true" & gt; & amp; mal; & lt; / span & gt;
& lt; / button & gt;
& lt; ul Class = "Vertical Menu" & GT;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "categories.html" & gt; Kategorie 1 & lt; / a & gt; & lt; / li & gt;
  & lt; Li-Klasse = "Main-Nav-Link" & gt; & lt; a href = "#" & gt; Kategorie 2 & lt; / A & gt; & lt; / li & gt;
  & lt; li class = "Main-Nav-Link" & gt; & lt; a href = "warum.html" & gt; Kategorie 3 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "Main-Nav-Link" & gt; & lt; ein href = "build.html" & gt; Kategorie 4 & lt; / A & gt; & lt; / li & gt;
  & lt; li class = "Main-Nav-Link" & gt; & lt; a href = "#" & gt; Kategorie 5 & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
& lt; HR & GT;

& lt; ul class = "menu vertikal" & gt;
  & lt; li & gt; & lt; Href = "#" & gt; Hilfe & lt; / a & gt; & lt; / li & gt;
  ~ a href = "#" & gt; bestellt Status & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; contact & lt; / a & gt; & lt; / lt; / lt;
  ein href = "#" & gt; mein Konto & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; div class = "off-canvas-content" data-off-canvas-content & gt;
{{& gt; Körper}}
  & lt; / div & gt;
  & lt; Skript SRC = "{{{root}} Assets / js / app.js" & gt; & lt; / script & gt;
& lt; / körper & gt; 

Fazit

Wir haben gezeigt, wie Sie Ihre E-Commerce-Site mit dem E-Commerce-Kit der Foundation starten können, aber nicht aufhören! Es gibt über 100 Bausteine, mit denen Sie Ihre Seiten verbessern können. In wenigen Minuten haben wir eine statische E-Commerce-Site mit Bausteinen gerüstet. Dies spart Ihnen viel Zeit, dass Sie jetzt in den Visuals, um die Site in der Marke zu schichten und auf Ihrer Marke zu gestalten.

Selbst wenn Sie dies weiter annehmen und ein Back-End-System mit unterschiedlichem Teilmechanismus verwenden oder eine andere Möglichkeit haben, Ihre Daten auf den Standort zu erhalten, sparen der angegebene Workflow mit Bausteinen wirklich Zeit und damit Geld. Die Bausteine ​​der Stiftung sind eine großartige Möglichkeit, um zu beginnen, da sie erweitert werden sollen, in Ihre vorhandenen Stile passen und in einem Anwendungssystem verwendet werden.

Dieser Artikel erschien ursprünglich in Netzmagazin. Ausgabe 266. Kaufen Sie es Hier .

Zum Thema passende Artikel:

• Erstellen Sie eine kartenbasierte Benutzeroberfläche mit Fundament
• 10 schöne neue E-Commerce-Sites, die Sie sehen müssen
• So verbessern Sie die Leistung von E-Commerce-Sites