Építsen egy e-kereskedelmi webhelyet a semmiből

Feb 13, 2026

kézikönyv

Az e-kereskedelem az elmúlt években olyan népszerűvé vált, hogy most nehéz elképzelni a jövőt. A hatalom az internet tette összekötő ügyfelek a szél a vállalkozások és a márkák és kereskedelem, a legtöbb, a legegyszerűbb módja, hogy olyan termékeket, hogy a közönséget.

Az alapítvány építőelemei A kódolt UI komponensek könyvtárát úgy tervezték, hogy megkönnyítse a végső termék gyorsabb elérését. A sablonoktól eltérően az építőelemek nem diktálják, hogy a webhelyének meg kell néznie vagy strukturálnia. Egyszerűen biztosítják az eszközöket, hogy felépítsék a saját egyéni megjelenését, és sokkal gyorsabban érezzék magukat.

Ebben a bemutatóban megtanulod, hogyan lehet létrehozni egy statikus e-kereskedelmi webhelyet a semmiből az e-kereskedelmi készlet használatával, egy olyan építőelemek, amelyek célja, hogy segítsen létrehozni bizonyos típusú weboldalakat. Bár ez az állvány egy prototípus, az építőelemek, amelyeket használunk és elrendezünk, bármely rendszerre alkalmazható.

Elkezdeni

Building Blocks don’t dictate how your site should look — Az építőelemek nem diktálják, hogy a webhelyének meg kell néznie

Az első dolog, amit meg kell tennünk, egy környezetet állítunk fel, hogy felépítse a webhelyet. Ehhez a bemutatóhoz először letölteni kell a node.js.-t Ha telepítve van, telepíteni szeretné az Alapítvány CLI-t a parancs használatával NPM Install -G Alapítvány-CLI .

Most, hogy telepítve van az alapítvány a rendszeren, indítsuk el egy új alapítvány projektet az új e-kereskedelmi webhely parancsával. A következő lista, válassza az első opciót, „A honlap (Alapítvány Sites)”, írja be a projekt neve "e-kereskedelmi webhely, majd válassza a„ZURB Template”. Ez elindítja az Alapítvány sablon- és fejlesztési kiszolgálót, hogy könnyen elkezdhessünk weboldalunkat. Fuss NPM indítása a terminálon a projekt futtatásához.

Ezután nézzük meg az új projektünk kódját, hogy megnyissuk egy szövegszerkesztőben. Itt talál egy minta oldalt az "SRC / PAGES / INDEX.HTML", amely tartalmaz néhány alapértelmezett sablon anyagot. Itt fogjuk eltávolítani az összes kódot.

Szerkesztő megjegyzése: Egy e-kereskedelmi weboldal tervezése az Ön vállalkozásának? Ha információt keresel, hogy segítsen kiválasztani az Önnek megfelelő választást, használja az alábbi kérdőívet, hogy információt nyújtson Önnek a különböző gyártóktól ingyen:

Kit telepítése

Mielőtt bármilyen kódot írnánk, az Alapítvány CLI-jével fogjuk húzni az alapítvány e-kereskedelmi készletét. Menj a terminálra, és használja a Parancs Alapítvány készlet telepíteni az e-kereskedelem.

Ha ez a parancs nem működik, ellenőrizze, hogy az Alapítvány CLI frissítése 2.2.3. Hogy ellenőrizze, melyik verzió van, fut alapítvány -v a terminálon. Ha frissítenie kell, egyszerűen távolítsa el a CLI-t NPM Uninstall -G Alapítvány-CLI és telepítse újra NPM Install -G Alapítvány-CLI .

Ez csak letöltötte az összes építőelemet az e-kereskedelmi készletünkön belül! Bármikor telepít egy épületblokkot, megjelenik SRC / részek / épületblokkok . Tudja, hogy a készlet helyesen telepítve van, ha az összes építőelem automatikusan behozott az Önbe app.scsss fájl.

Néhány ilyen építőelemek tartalmazzák az ikonokat a betűtípus fantasztikusból, így manuálisan telepítheti őket, vagy hozzáadhatja a CDN-t a & lt; head & gt; webhelyén. Ehhez navigáljon src / elrendezések / alapértelmezett.html és add hozzá & link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stíluslap" & gt; között & lt; head & gt; Címkék.

Állványzat az oldal

Mix and match blocks to achieve your ideal eCommerce layout — Keverje össze és illessze a blokkokat az ideális eCommerce elrendezéséhez

Menjünk az épületbe! A készletünk telepítésével ezek a következő pár lépések egy kicsit olyannak tűnnek, mint a LEGO: A saját projektjeidben úgy dönthet, hogy mindegyiket használja, vagy csak egy választást használhat. Nyugodtan keverje össze és illessze az építőelemeket, hogy elérje az álom e-kereskedelmi elrendezését.

Ehhez a bemutatóhoz az első két blokk, amit elkezdünk, a fejléc és a promo hős. Ehhez a kormányt részleges mechanizmust fogjuk használni. Az üres index.html fájlban dobjuk a részekbe {{& gt; ecommerce-header}} és {{& gt; E-kereskedelem-promo-hős}} . Ezzel a két épületblokkgal az e-kereskedelmi céloldalunk már félúton néz ki.

Ezután dobunk néhány termékkártyát a hős részén. A termékkártya építőelemének használatához az alapítvány blokkhálózatát használjuk, hogy a kártyák egyenletesen üljenek egy rácson belül. Ez megkönnyíti a későbbi kártyák elrendezését is.

Kezdjük & lt; div osztály = "sor kis-up-2 közepes-up-5" és gt; . Ebben a div belül dobja el tíz oszlopot az egyes oszlopok belsejében lévő termékkártyával & lt; div osztály = "oszlop" & gt; {{& gt; ecommerce-termékkártya}} & lt; / div & gt; .

Szeretnénk adni ügyfeleinknek, hogy több termékünket kapjunk, ezért adjunk hozzá egy felhívó gombot a termékkártyák alatt. Először meg kell teremteniünk & lt; div osztály = "Sor oszlop szövegközpont" & gt; Annak érdekében, hogy a gombunk középen legyen az oldalon. Ezután az Alapítvány gomb összetevőjét használjuk a kiemelés létrehozásához. Add hozzá a & lt; gombbal = "gomb" és gt; vásárolja meg az összes terméket & lt; / gombbal & gt; belül a .row.Column .

Az oldal most már szinte befejeződik, de adjunk hozzá egy fejlécet a hősök és a termékkártyák között, hogy egy kis kontextusot adjanak. A hős alatt adjunk hozzá egy & lt; div osztály = "sor oszlop" & gt; A fejlécünk tartalmazza & lt; h1 & gt; legújabb érkezések & lt; / h1 & gt; .

A legtöbb e-kereskedelmi otthoni oldalaknak több promóciós tartalma van a termékeik alatt. Használjuk az építőelemet {{& gt; E-kereskedelem hős-csúszka-kis}} itt. Annak megakadályozása érdekében, hogy a csúszka az oldal szélességét érinti, akkor a & lt; div osztály = "sor oszlop" & gt; .

Mivel az e-kereskedelmi oldalak tipikusan sok oldalból állnak, a legtöbbnek szüksége lesz egy Mega láblécre, ahol sok linkre van szükség az oldalak mennyiségének kezeléséhez. Az e-kereskedelmi készletünk egy lábléchez tartozik a pontos használathoz. Hogy felgyorsítsa ezt az állványt, hagyjuk el a {{& gt; e-kereskedelem lábléc}} HTML-jünk alján.

Ellenőrizze az érzékenységet

Ezekben a napokban nehéz minden webhelyen, hogy mobilbarát legyen. Ez különösen igaz az e-kereskedelmi webhelyekre. Most, hogy az online vásárlás lett a norma, nem akarjuk elveszíteni azt a százalékos felhasználók százalékát, akik ezt teszik a mobiltelefonjukon keresztül.

A mobilszerű mottónként az alapítvány építőelemei természetesen érzékenyek. A kisebb képernyőn megjelenő gyors ellenőrzés azt mutatja, hogy webhelyünk még mindig nagyon jól néz ki.

Azonban, amikor rákattintunk a hamburger menüre, az off-vászonunkat nem megfelelően csatlakoztatták. Ez a rész egy kicsit trükkös, de ne aggódj! Megszakítjuk, hogy mi történik ebben a Off-Canvas menüben, majd séta, hogyan kell összekapcsolni.

Ha megnézed az e-kereskedelmi-header.html fájlba, észre fogod venni, hogy ez a fejléc van egy off-canvas benne. Szóval, miért nem működött? Amikor rákattintottunk a hamburger menüre, az egyetlen dolog, ami "tolta" volt a fejléc. Az oldal többi része továbbra is fennmaradt, és furcsa átfedést okozott.

Ez azért van így, mert ez a fejléc önmagában dolgozik, de a valóságban kell dolgozniuk az egész oldalon. Más szóval, meg kell nyomnia az összes tartalmat az oldalon, amikor az Off-Canvas menü indul, nem csak a fejléc menü. Ez az e-kereskedelmi fejléc így írták, mert egy off-vászon beállítása szükségessé teszi a búvárkodást src / elrendezések / alapértelmezett.html oldal, amely túl van az épületblokk elérésében.

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet — Ez az, amit jelenleg látunk, mert az off-vászon még nem volt összekapcsolva

Hogy megjavítsa ezt, mindössze annyit kell tennie, hogy mindent el kell vinnünk & lt; div osztály = "Off-Canvas e-kereskedelmi-fejléc-off-canvas pozíció-baloldali" id = "e-kereskedelmi fejléc" adat-off-canvas & gt; és mozgassa az src / layouts / default.html-be . Ezután meg fogjuk becsomagolni a {{& gt; test}} webhelyünk belsejében a & lt; div osztály = "off-canvas-tartalom" adat-off-canvas-tartalom & gt; . Ez a webhelyünk testét, amikor az off-vászon indul.

Most, amikor rákattintunk a hamburgerünkre, az egész webhely átmegy az Off-Canvas menübe! A mi testünk alapértelmezett.html Az oldalnak így kell kinéznie:

& lt; test & gt;
  & lt; div osztály = "Off-Canvas e-kereskedelmi-fejléc-off-canvas pozíció-baloldali" id = "e-kereskedelmi fejléc" adat-off-canvas & gt;
& lt; Button Class = "Close-Button" Aria-Label = "Bezárás menü" Típus = "gomb" adat-közel & gt;
  & lt; span aria-rejtett = "True" & gt; & amp; idők; & lt; / span & gt;
& lt; / gomb és gt;
& lt; ul class = "függőleges menü" & gt;
  & li class = "Main-Nav-link" & gt; egy href = "kategóriák.html" & gt; 1. kategória & lt; / a & gt; / li & gt;
  & li class = "Main-Nav-link" & gt; egy href = "#" 2. kategória és lt; / a & gt; / li & gt;
  & li class = "Main-Nav-link" & gt; & lt; egy href = "miért.html" & gt; 3. kategória & lt; / a & gt; & lt; / li & gt;
  & li class = "Main-Nav-link" & gt; egy href = "build.html" & gt; 4. kategória & lt; / a & gt; / li & gt;
  & li class = "Main-Nav-link" & gt; & lt; egy href = "#" 1. kategória és lt; / a & gt; / li & gt;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul class = "Menü függőleges" & gt;
  & li & gt; & lt; egy href = "#" súgó & lt; / a & gt; & lt; / li & gt;
  & li & gt; egy href = "#" & gt; megrendelés állapota & lt; / a & gt; / li & gt;
  & Li & gt; & lt; egy href = "#" & gt; kapcsolat & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; egy href = "#" & gt; az én fiókom & lt; / a & gt; & lt; / li & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; div osztály = "off-canvas-tartalom" adat-off-canvas-tartalom & gt;
{{& gt; test}}
  & lt; / div & gt;
  & lt; script src = "{{root}} eszközök / js / app.js" & gt; & lt; / script & gt;
& lt; / test & gt;

Következtetés

Megmutattuk, hogyan kell ugrani - Indítsa el az e-kereskedelmi webhelyét az alapítvány e-kereskedelmi készletével, de ne állítsa le! Több mint 100 építőelem van, amelyek segítségével elősegítheti az oldalakat. Pár percek alatt álltunk egy statikus e-kereskedelmi webhelyet építőelemekkel. Ez nagy időt takarít meg arra, hogy mostantól a Rétegbe használhatja a vizuális és stílusát, hogy illeszkedjen a márkához.

Még akkor is, ha tovább, és egy hátsó rendszert használsz, különböző részleges mechanizmust, vagy más módja annak, hogy az adatokat a webhelyre szerezzük, az adott munkafolyamat az építőelemekkel való igazán időt takarít meg időt és ezért pénzt. Az Alapítvány építőelemei nagyszerű módja annak, hogy elkezdjék az elindítást, mert azokat a meglévő stílusokba kell kiterjeszteni, és bármilyen alkalmazási rendszerbe kell használni.

Ez a cikk eredetileg megjelent net magazin 266. kiadás itt .

Kapcsolódó cikkek:

Építsen egy kártyaalapú ui alapot
10 gyönyörű új e-kereskedelmi webhely, amit meg kell látni
Hogyan lehet javítani az e-kereskedelmi oldalak teljesítményét

Építsen egy e-kereskedelmi webhelyet a semmiből

Elkezdeni

Kit telepítése

Állványzat az oldal

Ellenőrizze az érzékenységet

Következtetés

kézikönyv - Most Popular Articles

44 a legjobb iPad parancsikonok és gesztusok iPados 2020

Hogyan lehet létrehozni egy szuper-realisztikus fantasy teremtményt

Hogyan készítsünk hozzáférhető webes űrlapokat

Stílus egy webhelyet SASS használatával

Mester a keverő kefe a Photoshop

Kezdje el a Greensock animációs platformot

Hogyan építsünk világokat a mozi számára

Hogyan készítsünk rugalmas szalagot

Kategóriák