Vagn HTML-mallar

Färdiga HTML-mallar för varukorg till e-handelsprojekt

En HTML-mall för varukorg ger dig en komplett varukorgssida för en webbutik, skriven i strukturerad kod som du kan öppna och redigera. Varje produkt ligger på en egen rad med antalsväljare och en länk för att ta bort artikeln. Ordersammanfattningen och kassaknappen är också färdiga från start. Dessa mallar används för mindre butiker, klickbara kundprototyper eller som front-end för en mer omfattande e-handel.

Återkommande artiklar och en separat sammanfattning

När en mall täcker hela varukorgen är dess kod vanligtvis uppdelad i följande delar:

1. Ett artikelblock som skrivs en gång och upprepas för varje produkt, med plats för bild, namn och val som exempelvis storlek.
2. En ordersammanfattning i en egen sektion, där rader för delsumma och totalsumma ligger ovanför kassaknappen.
3. Rader för rabattkod, frakt eller moms, som finns förberedda i vissa mallar och kan läggas till efter behov i andra.
4. Ett tomt läge för varukorgen med ett kort meddelande och en länk tillbaka till butiken.

För projekt som byggs i Nicepage förklarar guiden för E-handel i HTML hur en e-handelswebbplats kan exporteras som HTML, med produkter inkluderade via dialogrutan Publicera och exportera.

Bortom den tillrättalagda demon

Demovarukorgar brukar bara visa två korta produktnamn och en enkel slutsumma; mer komplexa scenarier säger därför betydligt mer om en HTML-mall för varukorg:

1. En produkt med en lång titel och två tillval behöver ett eget utrymme för varje detalj i artikelblocket.
2. En rabatterad produkt kräver plats för både det gamla och det nya priset inom artikeln.
3. På en telefon staplas raden vertikalt, och elementens ordning i koden avgör vad kunden läser först.
4. Var sammanfattningen placeras är en avgörande detalj. Om den bäddas in i artikellistan ser det bra ut fram tills dess att en fjärde tillagd produkt hamnar under totalsummorna.

Från prototyp till fungerande butik

Eftersom artikelblocket och sammanfattningen är helt oberoende av varandra handlar anpassningen av en mall för en skarp butik främst om att kopiera och ersätta. En utvecklare kan lägga in verkliga produkter, byta valuta eller lägga till ett fält för presentmeddelanden utan att påverka resten av layouten.

En designer kan först visa kunden en varukorg fylld med exempelartiklar. Därefter kopplar utvecklaren knapparna till ett betalsystem och laddar upp filerna till webbhotellet. Kampanj- och kupongsektioner från denna samling kan integreras i samma projekt för säsongsbetonade kampanjer.

De HTML-mallar för varukorg som förenklar detta upprepar artikelblocket på ett rent sätt och håller sammanfattningen avskild. Koden har dessutom en logisk läsordning på mobilen, vilket gör att ingenting behöver byggas om från mockup till färdig lansering.