Harjoitus 2: fanikauppa

Yleistä

Tehtävänä on laatia kuvitteellisen verkkokaupan prototyyppi. Verkkokauppa voi olla esimerkiksi bändin tai urheiluseuran fanituotteita myyvä verkkokauppa (mukit, lippalakit, T-paidat, julisteet yms.). Voit valita aiheen vapaasti mutta huomioi sisällössä se, että harjoitus julkaistaan osaksi portfoliotasi.

Toiminnot

  • Tuotteiden selailu

    Asiakas voi selata tuotteita verkkokaupassasi. Tuotteita tulee olla vähintään kolme kappaletta. Tuotteiden tietoja ovat tuotekuva, tuotteen nimi, lyhyt kuvaus sekä hinta. Muista lisätä tuotteelle myös id-kenttä.

  • Lisääminen ostoskoriin

    Kun tuote lisätään ostoskoriin asiakkaalta tulee pyytää kappalemäärä. Ostoskorin tiedot päivittyvät ja asiakas näkee ostoskorinsa sisällön muuttuneen.

  • Ostoskorin muuttaminen

    Voit näyttää ostoskorin koko ajan sivulla tai avata sen esimerkiksi nappia painettaessa. Ostoskorissa näytetään teksti "Ostoskorisi on tyhjä" tai käyttäjän lisäämät tuotteet. On tärkeää näyttää käyttäjälle koko ostoskorin kokonaishinta. Ostoskorissa voi muuttaa kappalemäärää tai poistaa kokonaan tietyn tuotteen. Ostoskorissa tulee olla myös painike kaikkien tuotteiden poistamiseksi (Tyhjennä ostoskori).

  • Yhteystiedot

    Ostoskorissa tulee olla painike Tilaa. Painettaessa nappia asiakkaalta pyydetään hänen yhteystietonsa (nimi, sähköpostiosoite, puhelinnumero, lähiosoite, postinumero sekä postitoimipaikka). Tilaus vahvistetaan painamalla painiketta Lähetä tilaus jolloin asiakasta kiitetään tilauksesta ja ostoskorin tiedot tyhjennetään.

Edistyneet toiminnot

  • Alennus

    Lisää toiminto alennuksen laskemiseksi tiettyjen ehtojen mukaan

    • Kokonaissumma yli 100€, alennus 2.5%
    • Kokonaissumma yli 250€, alennus 4%
    • Kokonaissumma yli 500€, alennus 6%

Julkaiseminen portfolioon

Lisätään fanikauppa osaksi portfoliotasi. Tehdään portfolio-repossa alikansio fanikauppa jonka alle kopioidaan build-versio. Jotta sivu osaa ladata js ja css-tiedostot oikein tulee vite.config.js-tiedostoon lisätä rivi kertomaan oikean polun:

 base: '/fanikauppa/',

Tee seuraavaksi build suorittamalla komento:

 npm run build

Build luodaan kansioon dist. Kopioi dist-kansion sisältö portfolio-reposi fanikauppa-kansioon.

Portfoliossa linkitä fanikaupan index.html-sivu:

<h1>Portfolio</h1>
<h2>Fanikauppa</h2>
<p>Reactilla tehty kuvitteellinen verkkokauppa.</a>
<a href="./fanikauppa/index.html">Fanikauppa</a>

Huom. jos käytät react-router:ia niin lisää basename-attribuutiksi oikea kansio:

<BrowserRouter basename='/fanikauppa'>