Webshop

Minta

A követkeő linken érhető el: https://www.figma.com/file/OlbxAMLcvtW9x1rWoU6KW3

Mappaszerkezet

.
├── README.md
├── assets
│   ├── minta1.jpeg
│   ├── minta2.png
│   └── minta3.png
├── cart.html
├── index.html
├── order-step1.html
├── order-step2.html
├── order-step3.html
├── package-lock.json
├── package.json
├── src
│   ├── cart.js
│   ├── main.js
│   ├── order-step1.js
│   ├── order-step2.js
│   ├── order-step3.js
│   ├── utils
│   │   └── common-setup.js
│   └── view.js
└── view.html

1. Kérd le az adatokat a https://frontend.njit.ut-idb.com/products oldalról és jelenítsd meg kártyákon a minta szerint.
2. Hozzon létre egy mapet melybe a kosár elemeit fogja tárolni, a kosár elemeinek azonosítója minden esetben a termékek azonosítója, míg az érték a megvásárolni kívánt darabszám.
3. A Kosárba gombra kattintva helyezd a kosárba a megfelelő elemet. Ügyelj rá, hogy többszöri kattintásra emelje a kosárban a darabszámot.
4. Oldd meg, hogy a termékek a view.html-en legyenek megtekinthetők.
5. Oldd meg, hogy a kosár külön, a cart.html oldalon jelenjen meg.
6. A Kosár megtekintése esetén szintén felugró ablakban írja ki a kosár tartalmát egy táblázatban (Termék - darab - összesített ár ), valamint a kosár végösszegét.
7. Legyen lehetőség törölni egy kívánt terméket a kosárból.
8. Oldd meg, hogy lehessen a termékek mennyiségét változtatni.
9. A kosár végén legyen egy rendelés leadása gomb, amely átvisz az order-step1.html-re.
10. Az order-step1.html oldalon a felasználó a következő adatokat tudja megadni és ezeket session storage segítségével tárold váltáskor:

1. Az order-step2.html oldalon a felhasználó a szállítási adatokat adhatja meg, a következők szerint:

Legyen három rádiógomb delivery-option néven az alábbiak szerint:

Amennyiben az üzletben veszi át a felhasználó a csomagot jelenjen meg a Tovább gomb

Ha Csomag automatánál, akkor legyen lehetősége a felhasználónak megadni az automata címét (box-address)

Ha pedig házhoz szállítással kéri akkor a következők szerint kell a címet megadni:

11. Az order-step3.html esetén legyen lehetőség megadni a fizetési módot (payment-option) rádiógombokkol.

Következő lehetőségek állnak rendelkezésre:

• Fizetés az üzletben (payment-instore): Akkor és csak akkor, ha az átvételt üzletben való átvételt válaszotta ki!
• Átutalás (payment-transfer)
• Bankkártyás fizetés (payment-online)
• Utánvétel (payment-ondelivery)

Az űrlap végén a rendelés leadása gombbal küldd le a 3 űrlap adatát a https://frontend.njit.ut-idb.com/orders végpontra, mely tartalmaz egy items tömböt is, amely egy-egy objektumot tartalmaz az alábbi adatokkal:

• productId
• qty

\pagebreak