Bewertungen und Fragen

Produktbewertungen, Kundenfotos und Fragen mit Antworten.

2 Components · 9 Variants

Kategorie wechseln

product-reviews

Produktbewertungen

Bewertungen als eigene Sections. Eine volle Übersicht mit Filtern, Suche und Antworten des Shops, eine Wand mit Kundenfotos, Schwerpunkte nach Thema, das Formular zum Schreiben und eine Reihe für Startseiten.

Übersicht
Fotowand
Schwerpunkte
Bewertung schreiben
Bewertungsreihe

Props und Details

Übersicht

Zusammenfassung mit Sternbalken, Empfehlungsring und Passform, darunter Chips, Suche und Sortierung über der Liste. Suchwörter leuchten im Text auf, Fotos öffnen in einer Lightbox, der Shop antwortet unter einer Bewertung und „Weitere zeigen“ lädt nach.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/product-reviews

Bringt mit utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="overview" summary={{ average, count, distribution, recommend, fit, fitLabels }} reviews={reviews} />

Source

Fotowand

Kundenfotos als Wand mit einer großen Kachel. Die Kacheln steigen nacheinander auf, die große treibt beim Scrollen, Hover zeigt Name und Sterne. Jedes Foto öffnet eine Lightbox mit der Bewertung, Pfeilen, Tasten und einer Bildleiste.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/product-reviews

Bringt mit utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="photo-wall" summary={{ average, count, photos }} reviews={reviewsWithPhotos} />

Source

Schwerpunkte

Werte je Aspekt füllen sich beim Scrollen, oben steht eine kurze Zusammenfassung und Themen-Chips filtern die Zitate. Die Themenwörter leuchten in jedem gezeigten Zitat auf.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/product-reviews

Bringt mit utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="highlights" summary={{ average, count, aspects, text }} topics={[{ id, label, count, words }]} reviews={reviews} />

Source

Bewertung schreiben

Sterne, die aufspringen, ein Zählring, der sich bis zur Mindestlänge füllt, eine gleitende Passform-Wahl, Fotokacheln und ein Empfehlungsschalter. Die Vorschau daneben schreibt mit, ein fehlendes Feld wackelt und der Dank zeichnet seinen Haken.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/product-reviews

Bringt mit utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="write-review" product={{ name, variant, image }} summary={{ fitLabels }} onSubmit={(draft) => …} />

Source

Bewertungsreihe

Bewertungskarten mit dem bewerteten Produkt unten, für Start- und Kategorieseiten. Die Reihe scrollt per Pfeil, Taste, Ziehen oder Wischen, Karten steigen nacheinander auf und heben sich beim Hover.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/product-reviews

Bringt mit utils, kit, button, icon, reveal, motion, section, dialog, rating, select, product-image

Usage

<ProductReviews variant="carousel" summary={{ average, count }} reviews={[{ …, product: { name, href, image } }]} action={{ label, href }} />

Source

product-qa

Fragen zum Produkt

Fragen und Antworten auf einer Produktseite. Eine durchsuchbare Liste mit Antworten vom Shop und von Käuferinnen und Käufern, die häufigsten als Akkordeon, das Frageformular mit ähnlichen Fragen und Fragen nach Themen.

Fragen und Antworten
Häufigste Fragen
Frage stellen
Nach Themen

Props und Details

Fragen und Antworten

Suche über Fragen und Antworten, die Suchwörter leuchten auf. Jede Frage hat eine „gleiche Frage“-Stimme, die Antwort vom Shop liegt auf getönter Fläche, weitere Antworten öffnen mit weicher Höhe und „Hilfreich“ zählt mit.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/product-qa

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<ProductQa variant="list" questions={[{ id, question, author, date, votes, answers: [{ author, role, date, body, helpful }] }]} />

Source

Häufigste Fragen

Die fünf häufigsten Fragen als Akkordeon neben einer Überschrift. Die Zeilen steigen nacheinander auf, das Plus wird zum Minus, die Antwort öffnet mit weicher Höhe und nennt, wer geantwortet hat.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/product-qa

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<ProductQa variant="compact" questions={questions} action={{ label, href }} />

Source

Frage stellen

Das Frageformular. Beim Tippen erscheinen schon beantwortete Fragen mit den passenden Wörtern markiert und öffnen sich direkt. Fehlender Text oder E-Mail wird markiert und fokussiert, nach dem Senden wiederholt die Bestätigung die Frage.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/product-qa

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<ProductQa variant="ask" product={{ name, image }} questions={questions} answerTime="within one business day" onAsk={(question, email) => …} />

Source

Nach Themen

Fragen nach Themen mit Anzahl. Auf dem Desktop eine Themenleiste neben den Karten, auf dem Telefon eine Chip-Reihe, die scrollt. Ein Thema lässt die Karten neu einlaufen.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/product-qa

Bringt mit utils, kit, button, icon, reveal, motion, section, product-image

Usage

<ProductQa variant="by-topic" topics={[{ id, label }]} questions={[{ …, topic }]} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Bewertungen und Fragen stehen.

Übersicht

Fotowand

Schwerpunkte

Bewertung schreiben

Bewertungsreihe

Fragen und Antworten

Häufigste Fragen

Frage stellen

Nach Themen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit