Zbuduj witrynę e-commerce od podstaw

Feb 2, 2026

Jak

Echmerce stało się tak popularne w ostatnich latach trudno sobie wyobrazić sobie przyszłość bez niego. Moc Internetu udało się łączyć z klientami breeze dla firm i marek oraz e-commerce, jest najprostszym sposobem dostarczenia produktów do ich publiczności.

Bloki budowlane Foundation biblioteka kodowanych komponentów UI zostały zaprojektowane, aby szybciej osiągnąć produkt końcowy. W przeciwieństwie do szablonów, bloki budowlane nie dyktuj, w jaki sposób Twoja witryna powinna wyglądać lub być ustrukturyzowana. Po prostu dostarczają narzędzia do budowania własnego niestandardowego wyglądu i czuć znacznie szybciej.

W tym samouczku dowiesz się, jak zbudować statyczną witrynę e-commerce od podstaw przy użyciu zestawu eCommerce, kurowaną zbiór bloków konstrukcyjnych, które mają pomóc w budowaniu określonych rodzajów stron internetowych. Chociaż ten rusztowanie jest prototypem, klocki budowlane, których używamy i układamy się, można je stosować do dowolnego systemu.

Pierwsze kroki

Building Blocks don’t dictate how your site should look — Bloki budowlane nie dyktują, jak wygląda Twoja witryna

Pierwszą rzeczą, którą musimy zrobić, jest skonfigurować środowisko do zbudowania witryny. W tym samouczku musisz najpierw pobrać Node.js. Po zainstalowaniu, będziesz chciał zainstalować Fundament CLI za pomocą polecenia NPM Install -g Foundation-CLI .

Teraz, gdy masz fundament zainstalowany w swoim systemie, uruchommy nowy projekt fundamentowy za pomocą polecenia Foundation New Ecommerce. W poniższej liście wybierz opcję pierwszej, "Witryna (Fundacja dla witryn)", wpisz naszą nazwę projektu "Ecommerce-witryna", a następnie wybierz "Szablon ZQUQU). Spowoduje to uruchomienie szablonu fundamentu i serwera rozwoju, abyśmy mogli z łatwością rozpocząć budowę naszej strony internetowej. Biegać NPM Start. w terminalu uruchomić projekt.

Następnie spójrzmy za kod naszego nowego projektu, otwierając go w edytorze tekstu. Tutaj znajdziesz próbną stronę w "SRC / stron / index.html" zawierający niektórych domyślnych materiałów szablonowych. Usuniemy tutaj cały kod.

Uwaga redaktora: Szukasz projektu witryny e-commerce dla Twojej firmy? Jeśli szukasz informacji, aby pomóc Ci wybrać ten, który jest odpowiedni, użyj kwestionariusza poniżej, aby dostarczyć Ci informacje od różnych dostawców za darmo:

Instalowanie zestawu.

Zanim piszemy dowolny kod, zamierzamy wyciągnąć do zestawu e-commerce Foundation z Fundacji CLI. Udaj się do terminalu i użyj zestawów fundamentowych poleceń, zainstaluj ECommerce.

Jeśli to polecenie nie działa, sprawdzić, czy Fundacja CLI jest aktualizowana do 2.2.3. Aby sprawdzić, która wersja jesteś włączony Fundacja -V. W terminalu. Jeśli chcesz zaktualizować, po prostu odinstaluj CLI NPM Odinstaluj -g Foundation-CLI i zainstaluj go ponownie NPM Install -g Foundation-CLI .

To tylko pobrano wszystkie bloki budowlane wewnątrz naszego zestawu e-commerce! Za każdym razem, gdy zainstalujesz blok konstrukcyjny, pojawi się w SRC / Częściowe / Building-Bloki . Dowiesz się, że twój zestaw zainstalowany prawidłowo, jeśli wszystkie bloki budowlane zostały automatycznie importowane do Twojego app.scss. plik.

Niektóre z tych bloków konstrukcyjnych obejmują ikony z czcionki niesamowitej, więc chcesz ręcznie zainstalować je lub dodać ich CDN do & lt; Head & GT; twojej witryny. Aby to zrobić, przejdź do SRC / Układy / default.html i dodaj & LT; link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" Rel = "Stylesheet" & GT; pomiędzy & lt; Head & GT; Tagi.

Rusztowanie witryny

Mix and match blocks to achieve your ideal eCommerce layout — Wymieszaj i dopasuj bloki, aby uzyskać idealny układ e-commerce

Chodźmy do budowy! Dzięki zainstalowanemu zestawowi te następne kilka kroków poczuje się trochę jak bawi się z LEGO: W twoich projektach możesz użyć wszystkich z nich lub można użyć tylko wyboru. Zapraszamy do mieszania i dopasowywania bloków budowlanych, aby osiągnąć swój wymarzony układ e-commerce.

W tym samouczku pierwszymi dwoma blokami rozpoczniemy się z są nagłówkiem i bohaterem promocyjnym. Aby to zrobić, będziemy korzystać z częściowego mechanizmu kierownicy. W naszym pustym pliku index.html, rzućmy się częściami {{& gt; eCommerce-header}} i {{& gt; eCommerce-promo-bohater}} . Z tymi dwoma blokami budowlanych, nasza strona lądowania e-commerce już wygląda na pół-drogi.

Następnie rzucimy niektóre karty produktu poniżej naszej sekcji bohatera. Aby korzystać z bloku budynku karty produktu, użyjemy siatki blokowej Foundation, aby karty były równomiernie siedzące w siatce. Spowoduje to również, że łatwiej zmienić układ tych kart później.

Zacznijmy & lt; div class = "rzędowe małe średnie-up-5" & gt; . Wewnątrz tego div rzuć w dziesięć kolumn z kartą produktu wewnątrz każdej kolumny & lt; div class = "kolumna" i gt; {{& gt; eCommerce-Product-Card}} & LT; / Div & GT; .

Chcemy dać naszym klientom sposób na dotarcie do więcej naszych produktów, więc dodajmy przycisk Callout pod naszymi kartami produktów. Najpierw musimy stworzyć naszą & lt; div class = "rzędowa kolumna tekstowa" & gt; Aby nasz przycisk zostanie wyśrodkowany na stronie. Następnie użyjemy komponentu przycisku Foundation, aby utworzyć nasz objaśnienie. Dodać & lt; przycisku Class = "Przycisk" & GT; Sklep Wszystkie produkty i LT; / Button & GT; Wewnątrz .Row.Column. .

Strona czuje się prawie zakończona teraz, ale dodajmy również nagłówek między naszym bohaterem a kartami produktów, aby dać trochę kontekstu. Pod bohaterem, dodaj a & lt; div class = "kolumna wiersza" & gt; zawierać nasz nagłówek & lt; h1 & gt; Najnowsze przyloty / LT; / H1 & GT; .

Większość stron domowych ECommerce ma więcej treści promocyjnych poniżej swoich produktów. Użyjmy bloku budynku {{& gt; eCommerce-hero-suwak-mały}} tutaj. Aby zapobiec suwakowi obejmować szerokość strony, owijamy go wokół & lt; div class = "kolumna wiersza" & gt; .

Ponieważ witryny e-commerce zazwyczaj składają się z wielu stron, większość wymaga stopki Mega z dużą ilością linków do obsługi objętości stron. Nasz zestaw e-commerce wyposażony jest w stopkę do tego dokładnego użytku. Aby owinąć ten rusztować, upuśćmy się {{& gt; eCommerce-stopka}} Na samym dole naszego HTML.

Sprawdź reakcję

W dzisiejszych czasach trudno jest na każdą witrynę, aby dostać się bez bycia przyjaznym dla mobilnych. Jest to szczególnie prawdziwe dla witryn e-commerce. Teraz, gdy zakupy online stały się normą, nie chcemy stracić tego procentu użytkowników, którzy to robią za pomocą telefonów komórkowych.

Po naszym motto z pierwszej kolejności klocki budowlane fundacji są zbudowane tak, aby były naturalnie reagujące. Szybki czek na mniejszym ekranie pokazuje, że nasza strona wciąż wygląda całkiem dobra.

Jednakże, gdy klikniemy w menu hamburger, nasze płótno nie zostało prawidłowo podłączone. Ta część jest trochę trudna, ale nie martw się! Rozbibamy, co dzieje się w tym menu off-canvas, a następnie przejść przez to, jak go podłączyć.

Jeśli spojrzysz na plik eCommerce-header.html, zauważysz, że ten nagłówek ma wbudowaną na niego. Więc dlaczego nie działa? Po kliknięciu menu hamburgera, jedyną rzeczą, która była "pchana" była nagłówkiem. Reszta strony pozostała w widoku, powodując pewne dziwne nakładanie się.

Dzieje się tak, ponieważ ten nagłówek został zbudowany do pracy samodzielnie, ale w rzeczywistości musi działać z całą stroną. Innymi słowy, musi nacisnąć całą zawartość na stronie, gdy wywołany jest menu Off-Canvas, a nie tylko menu nagłówka. Ten e-commerce-header został napisany tak, ponieważ konfiguracja na płótnie wymaga nurkowania SRC / Układy / default.html Strona, która jest poza zasięgiem budynku.

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet — To właśnie widzimy, ponieważ na płótnie nie został jeszcze podłączony

Aby to naprawić, wszystko, co musimy zrobić, to weź wszystko wewnątrz & LT; Div Class = "Off-Canvas Ecommerce-Header-Off-Canvas Pozycja-lewa" Id = "ECommerce-Header" Data-Off-Canvas & GT; i przenieś go do SRC / układów / default.html . Następnie owijamy {{& gt; ciało}} naszej strony wewnątrz & lt; div Class = "Off-Canvas-Content" Data-Off-Content Content & GT; . Spowoduje to uruchamianie ciała naszej witryny, gdy wywołuje się poza płótnem.

Teraz, gdy klikamy na naszym hamburgerze, cała witryna porusza się na menu Off-Canvas! Ciało naszego default.html. Strona powinna wyglądać tak:

& lt; body & gt;
  & LT; Div Class = "Off-Canvas Ecommerce-Header-Off-Canvas Pozycja-lewa" Id = "ECommerce-Header" Data-Off-Canvas & GT;
& lt; przycisku Class = "Zamknij przycisk" Aria-Label = "Zamknij Menu" Type = "Przycisk" Data-Close & GT;
  & LT; Span Aria-Hidden = "True" & GT; & AMP; Times; & LT; / Span & GT;
& lt; / button & gt;
& lt; ul Class = "Pionowe menu" & GT;
  & LT; LI Class = "Main-Nav-Link" & GT; a href = "kategorie.html" & gt; kategoria 1 ± 1
  & LT; LI Class = "Main-Nav-Link" & GT; a href = "#" & gt; kategoria 2 ° / a & gt;
  & LT; Li Class = "Main-Nav-Link" & GT; a href = "dlaczego.html" & gt; kategoria 3 ° C
  & LT; Li Class = "Main-Nav-Link" & GT; a href = "build.html" & gt; kategoria 4 ° C
  & LT; Li Class = "Main-Nav-Link" & GT; A HREF = "#" & GT; kategoria 5 ° / LI & GT;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul Class = "Menu pionowe" & GT;
  & lt; a href = "#" & gt; help & lt; / a & gt;
  & lt; a href = "#" & gt; status zamówienia

Wniosek

Pokazaliśmy Ci, jak skakać - rozpocząć witrynę e-commerce z zestawem e-commerce Foundation, ale nie zatrzymuj się tam! Istnieje ponad 100 bloków budowlanych, które można wykorzystać do ulepszenia stron. W ciągu kilku minut rusztowaliśmy statyczną witrynę e-commerce z blokami budynku. Oszczędza to dużo czasu, w którym można teraz użyć do warstwy w wizualizacji i stylu, aby pasowała do swojej marki.

Nawet jeśli robisz to dalej i za pomocą systemu back-end, inny mechanizm częściowy lub mieć inny sposób uzyskania danych do witryny, podany przepływ pracy z blokami budynków będzie naprawdę zaoszczędzić czas, a zatem pieniądze. Bloki budowlane Fundacji to świetny sposób na rozpoczęcie rozpoczęcia, ponieważ mają być rozszerzone, pasują do istniejących stylów i być używane w dowolnym systemie aplikacji.

Ten artykuł pierwotnie pojawił się magazyn netto. wydać 266. Kup to tutaj .

Powiązane artykuły:

Zbuduj interfejs użytkownika z fundamentem
10 pięknych nowych witryn e-commerce
Jak poprawić wydajność witryn e-commerce

Zbuduj witrynę e-commerce od podstaw

Pierwsze kroki

Instalowanie zestawu.

Rusztowanie witryny

Sprawdź reakcję

Wniosek

Jak - Najpopularniejsze artykuły

Jak utworzyć fotorealistyczną scenę pokoju

Pomaluj złośliwą zając w akwareli

5 rzeczy, których potrzebujesz do malowania olejnego

Pomaluj ustawienie gry Sci-Fi w Photoshopie

Jak zbudować szybsze strony internetowe

Robić realistyczne rośliny w kinie 4d

Jak budować światy do kina

Utwórz proste ilustracje dla sieci

Kategorie