107 lines
4.6 KiB
Markdown
107 lines
4.6 KiB
Markdown
# Negozio Online
|
||
|
||
Questo è un progetto del corso Web.
|
||
Dovrai creare una pagina web che mostra prodotti recuperati da un'API (locale), con funzionalità di visualizzazione dettagli e filtri (opzionali).
|
||
|
||
Le funzionalità principali da implementare sono:
|
||
1. **Recuperare i prodotti da API** - Usare `fetch` per ottenere i dati da un'API locale
|
||
2. **Mostrare i prodotti in una tabella** - immagine, nome, prezzo, disponibilità
|
||
3. **Modale dei dettagli** - Quando clicchi su un prodotto mostra un modale (finestra popup) con tutte le info (immagine grande, nome, descrizione, prezzo, disponibilità) e un pulsante "×" per tornare alla tabella.
|
||
4. **Bonus - Filtri** - Aggiungere filtri di ricerca per nome e categoria (opzionale)
|
||
|
||
## Come Iniziare
|
||
|
||
1. **Creare la Repository su GitHub**
|
||
* Vai su [github.com](https://github.com) e crea una nuova repository (In alto un pulsante "+" e poi "New Repository")
|
||
* Repository Name: `NegozioWeb` → Create Repository
|
||
* **Copia l'URL** della repo (es: `https://github.com/[tuonome]/NegozioWeb.git`)
|
||
|
||
2. **Clonare la Repository**
|
||
```bash
|
||
git clone https://github.com/[tuonome]/NegozioWeb.git
|
||
cd NegozioWeb
|
||
```
|
||
|
||
3. **Copiare i File Base**: copia i file forniti (`index.html`, `style.css`, `script.js`, `README.md`) nella tua cartella di progetto.
|
||
|
||
4. **Apri il Progetto in VSCode**: Da dentro vs code, apri la cartella del progetto (`File → Open Folder`).\
|
||
*NOTA*: Prima di iniziare, assicurati di aver fatto il login a GitHub da VSCode, in modo da poter fare commit e push direttamente dall'editor.
|
||
|
||
5. **Commit Iniziale**: Dopo aver copiato i file, è importante fare un commit iniziale per avere una base di partenza.
|
||
Nel tab di VSCode, vai su "Source Control" (icona del ramo git) e vedrai i file non tracciati. Aggiungili al commit e scrivi un messaggio chiaro come "Initial commit: HTML + CSS structure", poi fai commit+push.
|
||
|
||
6. **Struttura HTML**: In questo primo punto faremo la struttura base della pagina assieme, in modo da mostrare come lavorare con Git e fare commit frequenti.
|
||
```
|
||
🎯 Colleghiamo i vari files
|
||
1. Collega il file CSS in index.html
|
||
2. Collega il file JS in index.html
|
||
3. Creiamo un div con class "container" che conterrà tutta la pagina
|
||
→ commit: "HTML: aggiunta struttura tabella"
|
||
```
|
||
```
|
||
🎯 Creiamo l'HTML della tabella
|
||
1. Tabella vuota
|
||
2. Header della tabella con: Immagine, Nome, Prezzo, Disponibilità
|
||
3. Body con id "tabellaProdotti" (dove inseriremo i prodotti dinamicamente)
|
||
→ commit: "HTML: aggiunta struttura tabella"
|
||
```
|
||
```
|
||
🎯 Creiamo il modale
|
||
1. Div con class "modal nascosto" e id "modale"
|
||
2. Div interno con class "modal-content"
|
||
3. Contenuto del modal:
|
||
- H2 con id "prodottoNome"
|
||
- Immagine con id "prodottoImmagine"
|
||
- Paragrafo con id "prodottoDescrizione"
|
||
- Paragrafo con id "prodottoPrezzo"
|
||
- Paragrafo con id "prodottoDisponibilita"
|
||
- span con id "chiudi" e class "close" con dentro il simbolo "×"
|
||
→ commit: "HTML: aggiunta struttura modal"
|
||
→ push o sincronizzazione per salvare su GitHub
|
||
```
|
||
|
||
## 📝 Esercizio da Implementare
|
||
|
||
Dopo la sessione iniziale, si dovranno completare le funzionalità
|
||
indicate dentro il file `script.js` seguendo il workflow Git.
|
||
|
||
Dopo ogni funzionalità completata, si deve fare un commit con un messaggio chiaro e significativo.
|
||
Ogni tanto ricordarsi di fare push per evitare di perdere il lavoro!
|
||
|
||
Gli esercizi da fare si possono dividere in 3 punti principali:
|
||
|
||
1. Popolare la tabella con i dati dei prodotti
|
||
2. Implementare il modal dei dettagli
|
||
3. Bonus: Aggiungere filtri di ricerca e categoria
|
||
|
||
### Struttura dei Dati
|
||
L'API locale restituirà un array di oggetti, dove ogni oggetto rappresenta un prodotto.
|
||
Ogni prodotto dovrebbe avere questa struttura (esempio):
|
||
```json
|
||
{
|
||
"id": 1,
|
||
"nome": "Laptop MacBook Pro",
|
||
"descrizione": "Laptop professionale...",
|
||
"categoria": "Elettronica",
|
||
"prezzo": 2499.99,
|
||
"immagine": "https://...",
|
||
"disponibilita": true
|
||
}
|
||
```
|
||
|
||
### 💡 Suggerimenti per l'Implementazione
|
||
|
||
1. **Dividere il lavoro in funzioni piccole:**
|
||
- `function creaRigaProdotto(product)` → crea HTML di una riga
|
||
- `function mostraProdotti(products)` → riempie la tabella
|
||
- `function toggleModal()` → mostra/nascondi modal
|
||
|
||
2. **Usa gli event listener:**
|
||
- `click` su riga della tabella → mostra modal e riempi i dettagli
|
||
- `click` su bottone "Chiudi" → nascondi modal
|
||
|
||
3. **Testing:**
|
||
- Apri la console e verifica che il fetch funzioni (print dei dati come prova)
|
||
- Verifica che la tabella si popoli correttamente
|
||
- Clicca su una riga e verifica che appaia il modal
|