vybudovat místo elektronického obchodu od nuly

Sep 15, 2025

jak

Elektronický obchod se stal tak populární v posledních letech, je nyní těžké si představit budoucnost bez ní. Síla internetu se připojilo ke zákazníkům vánek pro podniky a značky a eCommerce z větší části je nejjednodušší způsob, jak doručit produkty svým publikům.

Stavební bloky Nadace Knihovna kódovaných komponent UI jsou určeny k tomu, aby bylo snadnější dosáhnout finálního produktu rychleji. Na rozdíl od šablon, stavební bloky diktují, jak by měly vaše stránky vypadat nebo být strukturovány. Jednoduše vám poskytnou nástroje pro vybudování vlastního vlastního vzhledu a cítit se mnohem rychleji.

V tomto návodu se dozvíte, jak budovat statické webové stránky eCommerce od nuly pomocí eCommerce soupravy, kurátorskou sbírku stavebních bloků, které jsou navrženy tak, aby vám pomohly vybudovat specifické druhy webových stránek. Ačkoli toto lešení je prototyp, stavební bloky, které používáme a rozložíme, které skončíme, lze aplikovat na jakýkoliv systém.

Začínáme

Building Blocks don’t dictate how your site should look — Stavební bloky diktují, jak by vaše stránky měly vypadat

První věc, kterou musíme udělat, je zřídit prostředí na stavbu webu. Pro tento tutoriál budete muset nejprve stáhnout node.js. Jakmile je nainstalován, budete chtít nainstalovat nadaci CLI pomocí příkazu NPM Instalovat -G Foundation-Cli .

Nyní, když máte nadřazení nainstalován ve vašem systému, spusťme nový projekt Foundation pomocí příkazu Foundation Nadace Nový eCommerce-Site. V následujícím seznamu vyberte první možnost, "webová stránka (Foundation for Weass)", zadejte náš název projektu "eCommerce-site" a poté vyberte "ZRURBAPROUP". To spustí šablonu základu a vývojový server, abychom mohli snadno začít stavět naše webové stránky. Běh NPM START. v terminálu pro provoz projektu.

Dále se podívejme za kód našeho nového projektu otevřením v textovém editoru. Zde najdete ukázková stránka v 'SRC / STRAND / INDEX.HTML' obsahující nějaký výchozí materiál šablony. Zde odstraníme celý kód.

Poznámka editoru: Hledáte design webové stránky eCommerce pro vaše podnikání? Pokud hledáte informace, které vám pomohou vybrat ten, který je pro vás to pravé, použijte níže uvedený dotazník, který vám poskytne informace z různých dodavatelů zdarma:

Instalace soupravy

Než píšeme libovolný kód, budeme tahat do soupravy nadace eCommerce s CLI Nadace. Hlava do terminálu a používejte soupravy Foundation Foundation Instalovat eCommerce.

Pokud tento příkaz nefunguje, zkontrolujte, zda je vaše nadace CLI aktualizována na 2.2.3. Chcete-li zkontrolovat, která verze jste zapnutý, spusťte Nadace -v. ve vašem terminálu. Pokud potřebujete aktualizovat, jednoduše odinstalujte CLI NPM Uninstall -g Foundation-Cli a znovu jej nainstalujte NPM Instalovat -G Foundation-Cli .

To právě stáhl všechny stavební bloky uvnitř našeho eCommerce kit! Kdykoliv nainstalujete stavební blok, zobrazí se v SRC / Částečná / stavební bloky . Budete vědět, že vaše sada instaluje správně, pokud byly všechny stavební bloky automaticky importovány do vašeho app.scss. soubor.

Některé z těchto stavebních bloků zahrnují ikony z písma Awesome, takže budete chtít buď ručně nainstalovat nebo přidat jejich CDN na & lt; hlava & gt; vašich stránek. Chcete-li to udělat, přejděte na SRC / Layouts / Default.html a přidat & lt, link href = "https://cdnjs.cloudflare.com/Ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" & gt; mezi & lt; hlava & gt; tagy.

Lešení na místě

Mix and match blocks to achieve your ideal eCommerce layout — Mix a zápas bloky, abyste dosáhli svého ideálního rozložení eCommerce

Pojďme se do budovy! S naší kitem nainstalovaným se tyto další pár kroků budou cítit trochu jako hrát s Lego: Ve vlastních projektech se můžete rozhodnout použít všechny z nich, nebo můžete použít pouze výběr. Neváhejte míchat a zápasit stavební bloky, abyste dosáhli svého rozložení eMommerce snů.

Pro tento tutoriál, první dva bloky začneme s hlavičkou a promo hrdinou. Chcete-li to udělat, použijeme částečným mechanismem řídítek. V naší prázdné index.html souboru, pojďme hodit do částečných programů {{& gt; eCommerce-záhlaví}} a {{& gt; eCommerce-promo-hrdina}} . S pouze těmito dvěma stavebními bloky, naše eCommerce přistání stránky již vypadá na půl cesty.

Dále hodíme do některých produktových karet pod svým hrdinovým sekcí. Chcete-li použít stavební blok výrobků, použijeme blokovou mřížku nadace tak, aby karty seděly rovnoměrně v mřížce. To také usnadní změnu rozložení těchto karet později.

Začněme s & lt; divové třídy = "řádek malý-up-2 středně-up-5" & gt; . Uvnitř tohoto DIV hodte do deseti sloupců s kartou produktu uvnitř každého sloupce & lt, divové třídy = "sloupec" & gt; {{& gt; eCommerce-produkt-card}} & lt; / div & gt; .

Chceme dát našim zákazníkům způsob, jak se dostat na více našich výrobků, takže přidejte tlačítko hovoru pod náš produktovými kartami. Nejdříve musíme vytvořit náš & lt; Div class = "řádkové sloupy text-centrum" & gt; Takže náš tlačítko bude zaměřeno na stránce. Dále použijeme součást základního tlačítka vytvořit náš popisek. Přidat uvnitř. .řádek sloupec .

Stránka se nyní cítí téměř kompletní, ale také přidejte záhlaví mezi naše hrdiny a produktové karty, aby se trochu kontext. Pod hrdinou, přidejte & lt; dig class = "sloupec řádků" & gt; obsahovat náš záhlaví & lt; H1 & gt; nejnovější příjezdy & lt; / h1 & gt; .

Většina domovských stránek eCommerce má více propagačního obsahu pod jejich produkty. Použijte stavební blok {{& gt; Elektronický obchod-Hero-Slider-Small}} tady. Aby se zabránilo posuvníku překlenout šířku stránky, zabalíme ji kolem & lt; dig class = "sloupec řádků" & gt; .

Vzhledem k tomu, že stránky elektronického obchodu se obvykle skládají z mnoha stran, většina bude vyžadovat zápatí Mega se spoustou odkazů pro zpracování objemu stránek. Naše eCommerce Kit je vybaven zápatí pro tento přesný případ použití. Zabalit tuto lešení, pojďme {{& gt; Elektronický obchod - zápatí}} Na samém dně našeho HTML.

Zkontrolujte reagovat

V těchto dnech je to těžké pro všechny stránky dostat bez bytí mobilní přátelské. To platí zejména pro stránky elektronického obchodu. Nyní, když online nakupování se stalo normou, nechceme ztratit procento uživatelů, kteří to dělají prostřednictvím svých mobilních telefonů.

Po našem mottu mobilního mobilního telefonu jsou postaveny stavební bloky nadace být přirozeně reagující. Rychlá kontrola na menší obrazovce ukazuje, že naše stránky stále vypadají docela dobře.

Když však klikujeme na menu Hamburger, naše off-canvas nebyl správně připojen. Tato část dostane trochu složitější, ale nebojte se! Rozdělíme se, co se děje v tomto menu off-canvas a pak projít, jak to zavěsit.

Pokud se podíváte do souboru eCommerce-header.html, všimnete si, že tato záhlaví má do něj vypracované off-canvas. Proč to nefungovalo? Když jsme klikli na menu Hamburger, jediná věc, která byla "tlačena", byl záhlaví. Zbytek stránky zůstal v pohledu, což způsobilo nějaký podivný překrývání.

Je to proto, že tento záhlaví byl postaven na jeho vlastní práci, ale ve skutečnosti potřebuje pracovat s celou stránkou. Jinými slovy, musí tlačit celý obsah na stránce, když je spuštěna nabídka off-canvas, ne jen menu záhlaví. Tento eCommerce-záhlaví byl napsán takto, protože nastavení off-canvas vyžaduje potápění do vašeho SRC / Layouts / Default.html stránka, která je mimo dosah budovy.

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet — To je to, co v současné době vidíme, protože off-canvas ještě nebyl závislý

Chcete-li to opravit, vše, co musíme udělat, je vzít vše uvnitř & lt; Div Class = "off-canvas eCommerce-header-off-canvas pozice-vlevo" id = "eCommerce-záhlaví" data-off-canvas & gt; a přesuňte ji do SRC / layouts / default.html . Dále budeme zabalit {{& gt; tělo}} našich stránek uvnitř a & lt; Div Class = "off-canvas-content" Data-off-canvas-content & gt; . To bude tlačit tělo našich stránek, když je spuštěno off-canvas.

Teď, když klikujeme na náš hamburger, celý web se přesune na menu off-canvas! Tělo našeho Default.html. Stránka by měla vypadat takto:

& lt; tělo & gt;
  & lt; Div Class = "off-canvas eCommerce-header-off-canvas pozice-vlevo" id = "eCommerce-záhlaví" data-off-canvas & gt;
& lt; Tlačítko Třída = "Close-Button" Aria-Label = "Zavřít Menu" Type = "Tlačítko" Data-Close & GT;
  & lt, span aria-skrytý = "true" & gt; & amp; krát; & lt; / rozpětí & gt;
& lt; / tlačítko & gt;
& lt; ul třídy = "vertikální menu" & gt;
  & lt; li třída = "Main-NAV-link" & gt; & lt; a href = "Kategorie.html" & gt; kategorie 1 & lt; / A & gt;
  & lt, li třída = "Main-NAV-link" & gt; & lt; a href = "#" & gt; kategorie 2 & lt; / a & gt; & lt; / li & gt;
  & lt; li třída = "Main-NAV-link" & gt; & lt; a href = "proč.html" & gt; kategorie 3 & lt; / a & gt; & lt; / li & gt;
  & lt; li třída = "Main-NAV-link" & gt; & lt; a href = "build.html" & gt; kategorie 4 & lt; / A & gt;
  & lt; li třída = "Main-NAV-link" & gt; & lt; a href = "#" & gt; kategorie 5 & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
HR & GT;

& lt; ul třídy = "menu vertikální" & gt;
  & lt, li & gt; & lt; a href = "#" & gt; pomoc & lt; / a & gt; & lt; / li & gt;
  & lt, li & gt; & lt; a href = "#" & gt; stav objednání & lt; / a & gt; & lt; / li & gt;
  & lt, li & gt; & lt; a href = "#" & gt; kontakt & lt; / a & gt; & lt; / li & gt;
  & lt, li & gt; & lt; a href = "#" & gt; můj účet & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; Div Class = "off-canvas-content" Data-off-canvas-content & gt;
{{& gt; tělo}}
  & lt; / div & gt;
  & lt; skript src = "{{root}} aktiv / js / app.js" & gt; & lt; / script & gt;
& lt; / tělo a gt;

Závěr

Ukázali jsme vám, jak skočit-start eCommerce stránky s kitem nadace eCommerce, ale nezastavujte tam! Existuje více než 100 stavebních bloků, které lze použít k vylepšení vašich stránek. Za minutu jsme leštili statické místo elektronického obchodu s stavebními bloky. To vám ušetří spoustu času, který můžete nyní použít k vrstvě ve vizuálních stránkách a stylu webu, aby se vešly do značky.

I když to berete dále a pomocí systému back-end, odlišný dílčí mechanismus nebo máte jiný způsob, jak získat data do webu, daný pracovní postup s stavebními bloky vás opravdu ušetří čas, a proto peníze. Stavební bloky nadace jsou skvělým způsobem, jak začít, protože mají být prodlouženy, zapadají do stávajících stylů a používají se v jakémkoli aplikačním systému.

Tento článek se původně objevil Čistý časopis Vydání 266. Koupit tady .

Související články:

Sestavte si kartu UI s nadací
10 krásných nových eCommerce stránek, které musíte vidět
Jak zlepšit výkon eCommerce stránek

vybudovat místo elektronického obchodu od nuly

Začínáme

Instalace soupravy

Lešení na místě

Zkontrolujte reagovat

Závěr

jak - Nejoblíbenější články

Základní vodítko k procházení v oboru

Nastavení ochrany osobních údajů Facebook: Jak udržet svůj profil Private

Jak odstranit pozadí v aplikaci Photoshop

Master procesní modelování

Koncepce designu tipy pro umělce

Jak vytvořit ovládací prvky vlastního soutěže v Maya

Jak malovat atmosférický portrét ve Photoshopu

Vytvoření společnosti Cinemagraph s photoshopem za 60 sekund

Kategorie