Komponentit· Tuotesivun lohkot
Tuotesivun lohkot
Tuotesivupohjan osat: kuvagalleria, hinta, varasto, ostopainike, kuvaus, tekniset tiedot ja arviot.
21 komponenttia
Esimerkit toimivat testitilassa: mitään ei tallenneta oikealle sivustolle, viestejä ei lähetetä ja maksut ovat testimaksuja.
Murupolku
Lohko shopBreadcrumbs
Murupolku tuotesivulla: Kauppa › Kategoria › Tuote.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Ilmoitukset
Lohko shopNotices
Kaupan ilmoitukset tuotesivulla, kuten toimitusaikojen poikkeukset.
Näkyy vain, kun kaupalla on voimassa oleva ilmoitus; esimerkkikaupalla ei ole, joten lohko on tyhjä.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Kuvat ja ostaminen
Lohko Kokeiltava productHero
Kuvat ja ostaminen: tuotekuvat ja ostopalsta rinnakkain tuotesivun alussa.
Asetukset (1)
| Asetus | Muokataan | Oletus |
|---|---|---|
Kuvien paikka galleryPosition | Valinta | Vasemmalla |
Saavutettavuus
Vapaa ja varattu erotetaan tekstillä, ei pelkällä värillä. Päivän ja ajan valinta toimii näppäimistöllä, valittu kohta kerrotaan (aria-current tai aria-pressed), ja hinnat ovat luettavaa tekstiä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tuotekuvat
Lohko Kokeiltava productGallery
Tuotekuvat: pääkuva ja pikkukuvat, suurennettavissa.
Saavutettavuus
Jokaisella kuvalla on vaihtoehtoinen teksti tai se on merkitty koristeeksi. Suurennus ja kuvaselain toimivat näppäimistöllä (nuolet, Esc) ja kertovat kohdan (”Kuva 2 / 5”). Vain ensimmäinen näkyvä kuva ladataan heti.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Ostopalsta
Lohko Kokeiltava buyColumn
Ostopalsta: kokoaa nimen, hinnan, valinnat ja ostopainikkeen yhdeksi palstaksi.
Saavutettavuus
Vapaa ja varattu erotetaan tekstillä, ei pelkällä värillä. Päivän ja ajan valinta toimii näppäimistöllä, valittu kohta kerrotaan (aria-current tai aria-pressed), ja hinnat ovat luettavaa tekstiä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Merkki
Lohko productBrand
Tuotteen merkki tai valmistaja.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tuotteen nimi
Lohko productTitle
Tuotteen nimi sivun pääotsikkona.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Hinta
Lohko productPrice
Hinta, alennus ja arvonlisäveron kertova rivi.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Saatavuus
Lohko productStock
Saatavuus: varastossa, vähissä tai tilattavissa.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tuoteperhe
Lohko productFamily
Tuoteperhe: saman tuotteen muut värit tai koot linkkeinä.
Näkyy vain tuotteella, joka kuuluu tuoteperheeseen; esimerkkituote ei kuulu, joten lohko on tyhjä.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Valinnat ja ostopainike
Lohko Kokeiltava productBuy
Valinnat ja ostopainike: koko, väri, määrä ja Lisää koriin.
Saavutettavuus
Vapaa ja varattu erotetaan tekstillä, ei pelkällä värillä. Päivän ja ajan valinta toimii näppäimistöllä, valittu kohta kerrotaan (aria-current tai aria-pressed), ja hinnat ovat luettavaa tekstiä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Ilmoita kun saatavilla
Lohko Kokeiltava productNotify
Ilmoita kun saatavilla: kävijä jättää osoitteensa loppuunmyydystä tuotteesta.
Näkyy vain loppuunmyydyllä tuotteella; esimerkkituote on saatavilla, joten lohko on tyhjä.
Saavutettavuus
Jokaisella kentällä on näkyvä nimi, pakollisuus kerrotaan tekstinä, virheet luetaan ruudunlukijalle ja vievät kenttään, ja autocomplete täyttää tutut tiedot. Kosketusalueet ovat vähintään 44 px.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Toimitus ja palvelut
Lohko productPerks
Toimitus ja palvelut: toimitusaika, palautus ja nouto lyhyinä riveinä.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Kuvaus
Lohko productDescription
Tuotteen kuvaus muotoiltuna tekstinä.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Elintarviketiedot
Lohko productFoodInfo
Elintarviketiedot: ainesosat, allergeenit ja ravintoarvot.
Näkyy vain, kun tuotteelle on kirjattu elintarviketiedot; esimerkkituotteella niitä ei ole.
Saavutettavuus
Taulukoilla on otsikkosolut ja kuvateksti, listat ovat oikeita listoja ja päivämäärät luettavassa muodossa. Kaavion luvut ovat myös tekstinä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tuotetiedot
Lohko productSpecs
Tuotetiedot taulukkona: mitat, materiaali ja muut ominaisuudet.
Saavutettavuus
Taulukoilla on otsikkosolut ja kuvateksti, listat ovat oikeita listoja ja päivämäärät luettavassa muodossa. Kaavion luvut ovat myös tekstinä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Paketin sisältö
Lohko Kokeiltava productBundle
Paketin sisältö: mitä tuotteita paketti sisältää.
Näkyy vain pakettituotteella; esimerkkituote on yksittäinen tuote, joten lohko on tyhjä.
Saavutettavuus
Vapaa ja varattu erotetaan tekstillä, ei pelkällä värillä. Päivän ja ajan valinta toimii näppäimistöllä, valittu kohta kerrotaan (aria-current tai aria-pressed), ja hinnat ovat luettavaa tekstiä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Liittyvät tuotteet
Lohko productRelated
Liittyvät tuotteet kortteina tuotesivun lopussa.
Saavutettavuus
Navigaatio on nimetty maamerkki, nykyinen sivu merkitään aria-current-tiedolla, valikkopainikkeella on tila (aria-expanded) ja ohituslinkki vie sisältöön. Kaikki toimii näppäimistöllä ja 390 px:n näytöllä ilman vaakavieritystä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Arvostelut
Lohko productReviews
Arvostelut: ostajien tähdet ja kommentit.
Näkyy, kun tuotteella on julkaistuja arvosteluja; esimerkkituotteella niitä ei ole.
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Kokotaulukko
Lohko Kokeiltava productSizeGuide
Kokotaulukko, joka aukeaa painikkeesta.
Asetukset (4)
| Asetus | Muokataan | Oletus |
|---|---|---|
Otsikko label | Teksti | Kokotaulukko |
Näytä tuotteilla, joilla on vaihtoehto when | Teksti | Koko |
Rivit rows | Pitkä teksti | Koko | Rinnanympärys (cm) | Vyötärö (cm) | Pitu… |
Mittausohje note | Pitkä teksti | Mittaa vartalo kevyesti mittanauhalla. Jos olet… |
Saavutettavuus
Avautuva sisältö on painike, jolla on nimi ja tila (aria-expanded tai valittu välilehti). Toimii näppäimistöllä: Tab siirtää, Enter ja välilyönti avaavat, Esc sulkee avautuvan. Sisältö on luettavissa myös ilman JavaScriptiä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.
Tuotteen ominaisuus
Lohko productAttribute
Yksi tuotteen ominaisuus nostettuna, esimerkiksi materiaali tai valmistusmaa.
Asetukset (1)
| Asetus | Muokataan | Oletus |
|---|---|---|
Ominaisuuden nimi (esim. Materiaali) attribute | Teksti | – |
Saavutettavuus
Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.
Käytössä 0 pohjassa
Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.