Zum Inhalt springen
UI Kit
Accent

Multi Vendor Marktplatz

Ein Händler im Marktplatz. Die Shopseite mit Tabs, der Händler im Kaufbereich, alle Angebote nebeneinander und eine Nachricht.

4 Variants
Kategorie wechseln

Jeder Händler mit Gesicht

Im Marktplatz vertrauen Käufer dem Händler so sehr wie dem Produkt. Die Seiten hier zeigen, wer verkauft, wie er bewertet ist und was er verspricht, von der eigenen Händlerseite über den Kaufbereich bis zur ersten Frage.

Die Kategorie beginnt mit dem Händlershop und seinen vier Ansichten. Die „Shopseite“ ist die eigene Seite des Händlers mit Produkten, Geschichte und Bewertungen. „Händler im Kaufbereich“ bringt den Händler auf jede Produktseite und lässt weitere Angebote darunter aufklappen. „Alle Angebote“ vergleicht die Händler eines Produkts nach Gesamtpreis mit Versand, Lieferzeit und Bewertung, und „Nachricht an den Händler“ eröffnet das erste Gespräch mit schnellen Antworten vorneweg.

Sortiere Angebote standardmäßig nach Gesamtpreis mit Versand, genau diese Zahl vergleichen Käufer. Zeig Bewertung und Lieferzeit direkt neben dem Preis, sie wiegen so viel wie der Preis selbst. Starte mit Shopseite und Kaufbereich, „Alle Angebote“ lohnt sich, sobald mehrere Händler dasselbe Produkt führen.

Händlershop

ShopseiteNeu in 1.2

Ein Titelbild mit überlappendem Monogramm, Kennzahlen im Haarlinien-Raster und ein Folgen-Knopf, der mitzählt. Tabs mit Pfeiltasten wechseln zwischen Produkten mit Suche, Chips und Sortierung, der Geschichte mit Regeln und den Bewertungen.

Händler im KaufbereichNeu in 1.2

Der Kaufbereich nennt, wer verkauft und versendet, mit Bewertung und Link zum Shop. Weitere Angebote klappen darunter auf, eine Wahl tauscht Preis, Lieferung und Händler an Ort und Stelle.

Alle AngeboteNeu in 1.2

Jedes Angebot für ein Produkt, sortiert nach Gesamtpreis mit Versand, nach Lieferung oder Händlerbewertung, gefiltert nach Zustand. Auf dem Desktop eine Tabelle, am Telefon Karten, der beste Gesamtpreis markiert.

Nachricht an den HändlerNeu in 1.2

Zuerst schnelle Antworten, danach das Formular. Thema, eine optionale Bestellnummer mit Formatprüfung und eine Nachricht mit Zähler, jedes mit eigenem Fehler. Gesendet wird zu einer klaren Bestätigung.

Details

Was Händlershop mitbringt, aus Registry und Quellcode gelesen.

Bereich
E-Commerce
Variants
4
Version
1.0.0 · seit 1.2.0
Datei
components/ui/vendor-store.tsx
Bringt mit
utilskitbuttoniconproduct-imageinput
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 69 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle VendorStoreProps aus components/ui/vendor-store.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    VendorStoreVariant

    storefrontseller-cardofferscontact

  • vendoroptional
    Vendor
  • productsoptional
    VendorProduct[]
  • reviewsoptional
    VendorReview[]
  • productoptional
    { name: string; image?: React.ReactNode; subtitle?: string }

    seller-card and offers: the product and its offers

  • offersoptional
    Offer[]
  • faqoptional
    { q: string; a: string }[]

    contact: quick answers before writing and the topics to pick

  • topicsoptional
    string[]
  • onSendoptional
    (data: { topic: string; order?: string; message: string }) => Promise<void> | void
  • onAddoptional
    (item: VendorProduct | Offer) => void
  • currencyoptional
    string

Eingebaute Texte

Diese Texte schreibt Händlershop selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 69 Texte anzeigen
followEnglisch FollowDeutsch Folgen
followingEnglisch FollowingDeutsch Gefolgt
followersEnglisch FollowersDeutsch Follower
ratingEnglisch RatingDeutsch Bewertung
reviewsEnglisch ReviewsDeutsch Bewertungen
responseEnglisch RepliesDeutsch Antwort
sinceEnglisch Seller since {year}Deutsch Händler seit {year}
tabsEnglisch Store sectionsDeutsch Bereiche des Shops
productsEnglisch ProductsDeutsch Produkte
aboutEnglisch AboutDeutsch Über uns
reviewsTabEnglisch ReviewsDeutsch Bewertungen
searchEnglisch Search this storeDeutsch In diesem Shop suchen
allEnglisch AllDeutsch Alle
sortEnglisch SortDeutsch Sortieren
sortPopularEnglisch Most popularDeutsch Beliebteste
sortLowEnglisch Price, low to highDeutsch Preis aufsteigend
sortHighEnglisch Price, high to lowDeutsch Preis absteigend
noResultsEnglisch Nothing in this store matches "{q}". Try a shorter word.Deutsch Zu „{q}“ gibt es in diesem Shop nichts. Versuch ein kürzeres Wort.
countEnglisch {n} productsDeutsch {n} Produkte
addEnglisch AddDeutsch Dazu
addedEnglisch AddedDeutsch Drin
addNamedEnglisch Add {name} to cartDeutsch {name} in den Warenkorb
messageEnglisch MessageDeutsch Nachricht
visitEnglisch Visit storeDeutsch Zum Shop
soldByEnglisch Sold and shipped byDeutsch Verkauf und Versand durch
otherOffersEnglisch {n} more offers from {price}Deutsch {n} weitere Angebote ab {price}
hideOffersEnglisch Hide other offersDeutsch Weitere Angebote ausblenden
shippingEnglisch ShippingDeutsch Versand
freeShippingEnglisch Free shippingDeutsch Gratisversand
plusShippingEnglisch + {amount} shippingDeutsch + {amount} Versand
arrivesEnglisch Arrives {date}Deutsch Ankunft {date}
addToCartEnglisch Add to cartDeutsch In den Warenkorb
inCartEnglisch In the cartDeutsch Im Warenkorb
leftEnglisch Only {n} leftDeutsch Nur noch {n}
offersTitleEnglisch {n} offers for this productDeutsch {n} Angebote für dieses Produkt
sortByEnglisch Sort byDeutsch Sortieren nach
byTotalEnglisch Total priceDeutsch Gesamtpreis
byDeliveryEnglisch Fastest deliveryDeutsch Schnellste Lieferung
byRatingEnglisch Best seller ratingDeutsch Beste Händlerbewertung
conditionEnglisch ConditionDeutsch Zustand
newEnglisch NewDeutsch Neu
like-newEnglisch Like newDeutsch Wie neu
usedEnglisch UsedDeutsch Gebraucht
totalEnglisch TotalDeutsch Gesamt
sellerEnglisch SellerDeutsch Händler
deliveryEnglisch DeliveryDeutsch Lieferung
priceEnglisch PriceDeutsch Preis
bestEnglisch Best totalDeutsch Bester Gesamtpreis
anyConditionEnglisch Any conditionDeutsch Jeder Zustand
contactTitleEnglisch Message {name}Deutsch Nachricht an {name}
contactTextEnglisch Most questions are answered below. Still unsure? The seller usually replies {time}.Deutsch Die meisten Fragen sind unten beantwortet. Noch unsicher? Der Händler antwortet meist {time}.
quickEnglisch Quick answersDeutsch Schnelle Antworten
topicEnglisch What is it about?Deutsch Worum geht es?
chooseTopicEnglisch Choose a topicDeutsch Thema wählen
orderEnglisch Order numberDeutsch Bestellnummer
optionalEnglisch optionalDeutsch optional
orderHintEnglisch e.g. NH-48210, helps with questions about a deliveryDeutsch z. B. NH-48210, hilft bei Fragen zu einer Lieferung
yourMessageEnglisch Your messageDeutsch Deine Nachricht
sendEnglisch Send messageDeutsch Nachricht senden
sendingEnglisch SendingDeutsch Wird gesendet
sentEnglisch Message sentDeutsch Nachricht gesendet
sentTextEnglisch {name} usually replies {time}. You get the answer by email and in your account.Deutsch {name} antwortet meist {time}. Die Antwort kommt per E-Mail und in dein Konto.
anotherEnglisch Write another messageDeutsch Weitere Nachricht schreiben
eTopicEnglisch Choose what your message is about.Deutsch Wähl, worum es in deiner Nachricht geht.
eOrderEnglisch Order numbers look like NH-48210. Leave the field empty if you have none.Deutsch Bestellnummern sehen aus wie NH-48210. Lass das Feld leer, wenn du keine hast.
eShortEnglisch Write a little more, at least {n} characters, so the seller can help right away.Deutsch Schreib noch etwas mehr, mindestens {n} Zeichen, damit der Händler gleich helfen kann.
charsEnglisch {n} of {max}Deutsch {n} von {max}
policiesEnglisch Store policiesDeutsch Regeln des Shops
verifiedEnglisch Verified sellerDeutsch Geprüfter Händler

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Händlershop reagiert selbst auf die Tasten Pfeil links, Pfeil rechts, Pos1, Ende und Leertaste.
  • Setzt aria-controls, aria-describedby, aria-expanded, aria-invalid, aria-label, aria-labelledby, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, status, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Händlershop?

Mit aiw add @ai-website/vendor-store. Der Befehl legt die Datei components/ui/vendor-store.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, product-image und input. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Händlershop?

4 Varianten, Shopseite, Händler im Kaufbereich, Alle Angebote und Nachricht an den Händler. Du wählst sie mit der Prop variant, zum Beispiel variant="seller-card".

Kann ich die Texte von Händlershop übersetzen?

Ja. Händlershop bringt 69 eigene Texte auf Deutsch und Englisch mit, etwa „Folgen“, „Gefolgt“ und „Follower“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Händlershop einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Händlershop mit aiw_components und installieren sie mit aiw_add @ai-website/vendor-store. Nenn im Prompt die Variante, etwa variant="storefront", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus E-Commerce, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Marktplatz stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert