Arc laptop stand
Hebt 13–16 Zoll Laptops an. Mattiertes Aluminium.
USD 69 · Auf Lager
Dieses Beispiel inspizierenErstellen Sie einen Produkt-Slider, der fokussiertes Stöbern unterstützt, ohne wesentliche Auswahlmöglichkeiten vor Käufern, Tastaturen, Suchmaschinen oder KI-Extraktionssystemen zu verbergen.
Ein Produkt-Slider ist eine horizontal scrollbare Reihe von Produktkarten, die dazu dient, eine kleine, verwandte Menge zugänglich zu machen, ohne diese Menge zum Hauptkatalog der Seite zu machen. Er soll einem Käufer helfen, einen definierten Kaufpfad fortzusetzen – etwa kompatible Zubehörteile oder vergleichbare Alternativen zu finden – während die Identität, Reihenfolge und Fakten jedes Artikels für Menschen und Maschinen erhalten bleiben.
Vier Produkte. Scrollen Sie die Zeile oder verwenden Sie die beschrifteten Steuerelemente in der Produktionskomponente.
Hebt 13–16 Zoll Laptops an. Mattiertes Aluminium.
USD 69 · Auf Lager
Dieses Beispiel inspizierenSieben Anschlüsse. Unterstützt 100 W Passthrough-Laden.
USD 89 · Auf Lager
Dieses Beispiel inspizierenKompakte kabellose Tastatur und Maus.
USD 74 · Wenig Lagerbestand
Dieses Beispiel inspizierenDimmbare Schreibtischlampe mit USB-C-Stromversorgung.
USD 45 · Auf Lager
Dieses Beispiel inspizierenEin Slider lenkt die Aufmerksamkeit, indem er einige wenige Auswahlmöglichkeiten genau in dem Moment zeigt, in dem sie relevant werden. Auf einer Produktseite könnte ein Käufer, der den Hauptartikel verstanden hat, kompatible Zubehörteile begrüßen. Ein vollständiges Raster würde an dieser Stelle mit dem primären Kauf konkurrieren; eine kompakte Zeile bewahrt die ursprüngliche Entscheidung und ermöglicht dennoch Erkundung.
Dieser Vorteil hat einen psychologischen Preis: Alles jenseits des sichtbaren Randes wird leichter übersehen. Die erste Karte erhält mehr Aufmerksamkeit als die siebte, und eine abgeschnittene letzte Karte kann wie ein Fehler aussehen, wenn das Design nicht die Fortsetzung signalisiert. Ein Slider muss daher eine sekundäre, absichtlich geordnete Menge enthalten. Er darf keine Wahlmöglichkeit verbergen, die der Leser benötigt, um Preis, Sicherheit, Kompatibilität oder das Sortiment selbst zu verstehen.
Maschinelle Extrahierbarkeit ist die Fähigkeit von Suchmaschinen, Assistenten, Feeds und Content-Tools, jedes Produkt zu isolieren und seine Felder zusammenzuhalten. Eine Person kann wischen, um Karte sechs zu enthüllen; ein Crawler führt diese Interaktion möglicherweise nie aus. Wenn spätere Folien erst nach JavaScript eintreffen, display:none verwenden oder nur als Hintergrundbilder existieren, sieht das System eine unvollständige Sammlung. Wenn jede Karte in semantischer Quellreihenfolge gerendert wird, kann eine Maschine dieselben Namen, URLs, Positionen, Preise, Währungen und Verfügbarkeiten wiederherstellen, die ein Käufer erreichen kann.
Befolgen Sie die Element-Schreibregeln zur Priorität: Klassifizieren Sie den Block nach seinem Zweck, bevor Sie sein Erscheinungsbild wählen. Wenn seine Aufgabe darin besteht, einen sekundären Produktpfad zu eröffnen, gilt dieses Element. Wenn seine Aufgabe darin besteht, vollständige Ergebnisse zu zeigen oder einen direkten Vergleich zu ermöglichen, hat das entsprechende Raster oder die typisierte Tabelle Vorrang.
Verwenden Sie einen Produkt-Slider, wenn alle folgenden Bedingungen erfüllt sind:
Ein Slider schlägt ein Raster, wenn der vertikale Platz begrenzt ist und Leser nicht jede Auswahl gleichzeitig sehen müssen. Er kann den Kontext auf einer Produktdetailseite bewahren, eine kurze Empfehlungsmenge auf Mobilgeräten zusammenhalten und einen nächsten Pfad aufzeigen, ohne acht vollständige Beschreibungen in den Artikelablauf zu stellen.
Verwenden Sie ein Raster, wenn die Menge das Ziel ist. Suchergebnisse, eine Produktkategorie, eine gefilterte Sammlung oder eine Sammlung, die vollständig gescannt werden muss, benötigen sichtbare Anzahlen, Sortierung, Filter, Seitenumbrüche und stabile URLs. Verwenden Sie eine Vergleichstabelle , wenn Leser dieselben Spezifikationen über verschiedene Optionen hinweg beurteilen müssen. Verwenden Sie eine Bildergalerie , wenn die Elemente Ansichten eines Themas und keine separaten käuflichen Produkte sind.
Häufige Beinahe-Fehler sind: eine aus zwei Artikeln bestehende Zeile, die in Karussell-Steuerelemente gezwungen wird; eine 30-Produkte-Kategorie, die in eine Leiste gequetscht wird; ein Hero-Banner-Karussell, das Werbung statt Produkte enthält; und ein Slider, der verwendet wird, um schwache Empfehlungen unterhalb des Seitenbereichs zu verbergen. „Kürzlich angesehen“ ist ebenfalls ein bedingter Beinahe-Fehler: Er ist nur nützlich, wenn der Besucher tatsächlich Verlauf hat, die Überschrift erklärt, warum diese Artikel erscheinen, und ein leerer Zustand keine Aktivität vortäuscht.
Die Platzierung sollte eine Frage beantworten, die der Leser gerade entwickelt hat. Platzieren Sie kompatible Zubehörteile nach Kompatibilitäts- und Inklusivartikel-Informationen, Alternativen nach den Einschränkungen oder der Entscheidungszusammenfassung des primären Produkts und verwandte Produkte nach der Hauptauflistung der Kategorie, nicht davor. In redaktionellen Inhalten platzieren Sie die Leiste nach Kriterien und Nachweisen, nicht bevor Leser wissen, warum die Produkte qualifiziert sind.
Halten Sie die Überschrift, die Beziehungsangabe, die Artikelanzahl, die Steuerelemente und die Karten in einem Bereich. Setzen Sie einen „Alle anzeigen“-Link neben die Überschrift oder nach der Zeile, wenn eine vollständige Sammlung existiert. Der Link muss zu einer crawlbaren kanonischen Seite führen, nicht zu einer unbegrenzten clientseitigen Leiste.
Platzieren Sie einen Slider nicht neben einem anderen Slider, einem sich automatisch drehenden Banner, einer Preistabelle oder den primären Kauf-Steuerelementen der Seite. Benachbarte horizontale Gesten erzeugen Mehrdeutigkeit, während konkurrierende Preise unklar machen können, welches Angebot der Haupt-CTA kauft. Unterbrechen Sie keine Verfahrensschritte, Warnungen, Kassenbedingungen oder erforderliche rechtliche Offenlegungen mit Empfehlungen. Platzieren Sie niemals wesentliche Varianten innerhalb eines Sliders, wenn die Auswahl einer Variante den Preis, die Verfügbarkeit oder die Konfiguration des primären Produkts ändert; Varianten gehören zu den Steuerelementen des zugehörigen Produkts.
Auf kleinen Bildschirmen erlauben Sie eine vollständige Karte plus einen bewussten Blick auf die nächste Karte, oder eine vollständige Karte mit einer expliziten Positionsangabe. Der Bereich kann horizontal scrollen, aber das Dokument selbst nicht. Bewahren Sie einen sichtbaren Weg am Slider vorbei, sodass ein Tastatur- oder Touch-Nutzer niemals in wiederholter horizontaler Navigation gefangen ist.
Jede Karte folgt dem Vertrag der Produktkarte . Der Slider trägt die Sammlungsbedeutung und Navigation, ohne Produktfakten lokal neu zu definieren.
Redaktionelle Shortlist: Verwenden Sie für vier bis acht Produkte, die nach festgelegten Kriterien ausgewählt wurden. Die Reihenfolge darf nur dann den Rang darstellen, wenn die Seite die Nachweise für diesen Rang enthält; andernfalls beschriften Sie sie als „Ausgewählte Optionen“ und vermeiden Sie ordinale Behauptungen.
Verwandte Produkte: Verwenden Sie für Artikel derselben Kategorie oder Ersatzartikel, nachdem das Hauptprodukt erklärt wurde. Geben Sie die gemeinsame Eigenschaft an, z. B. Formfaktor oder Preisklasse, anstatt Personalisierung zu implizieren.
Kompatible Zubehörteile: Verwenden Sie, wenn jeder Artikel eine verifizierte Beziehung zum zugehörigen Produkt hat. Wiederholen Sie das kompatible Modell oder die Modellreihe im Kartentext; Nähe ist keine Kompatibilitätsgarantie.
Verhaltensverlauf: Verwenden Sie für kürzlich angesehene oder gespeicherte Artikel nur, wenn der Besucher diesen Zustand erzeugt hat. Beschriften Sie die Grundlage, bewahren Sie die Aktualitätsreihenfolge, bieten Sie wo angemessen Entfernungsmöglichkeiten an und geben Sie personalisierten Verlauf nicht in freigegebene Caches oder strukturierte Daten aus.
| Name | Typ | Erforderlich | Min./Max. | Standard | Quelle | |
|---|---|---|---|---|---|---|
title | Einfacher String | Ja | 3–10 Wörter | Keine | Erste Überschrift im Text | |
description | Einfacher String | Ja | 8–30 Wörter | Keine | Text nach erster Überschrift | |
variant | Enum: editorial, related, accessories, history | Ja | Ein Wert | Keine | Attribut | |
orderedBy | Enum: rank, relevance, compatibility, recency, manual | Ja | Ein Wert | Keine | Attribut | |
visibleDesktop | Integer | Nein | 2–4 | 4 | Attribut | |
visibleMobile | Dezimal | Nein | 1–1,25 | 1.1 | Attribut | |
viewAllLabel | Einfacher String | Bedingt | 2–5 Wörter | Nicht vorhanden | Attribut | |
viewAllUrl | Stammrelativer oder HTTPS-URL | Bedingt | Eine URL; erforderlich mit Label | Nicht vorhanden | Attribut | |
items | Geordnete Produktkarten-Sammlung | Ja | 4–12 | Keine | Text | |
item.id | Stabile Produktkennung | Ja | 1 Wert | Keine | Artikelattribut | |
item.name | Einfacher String | Ja | 1–8 Wörter | Keine | Artikelüberschrift | |
item.url | Stammrelativer oder HTTPS-URL | Ja | 1 URL | Keine | Artikelattribut | |
item.position | Positive Ganzzahl | Ja | 1 bis Artikelanzahl | Quellreihenfolge | Abgeleitet aus Textreihenfolge | |
item.image | Vorhandene Asset-URL | Bedingt | 1 Bild | Nicht vorhanden | Artikelattribut oder Produktquelle | |
item.alt | Einfacher String | Bedingt | 0–180 Zeichen | Keine | Artikelattribut oder Produktquelle | |
item.price | Dezimal plus Währung, oder Status | Bedingt | 1 aktueller Wert | Nicht vorhanden | Produktquelle | |
item.availability | Kontrollierter Status | Bedingt | 1 aktueller Wert | Nicht vorhanden | Produktquelle | |
item.qualifier | Einfacher String | Ja | 4–18 Wörter | Keine | Artikeltext |
Ein Bild ist bedingt, weil eine textorientierte Produktkarte auch ohne eines vollständig sein kann. Wenn verwendet, muss die Datei existieren, die Abmessungen müssen Platz reservieren und der alternative Text muss seinem Zweck entsprechen. Wenn eine Karte Preis oder Verfügbarkeit anzeigt, muss jede zugehörige Karte ein äquivalentes aktuelles Feld oder einen expliziten Status anzeigen.
:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="View all accessories" viewAllUrl="/accessories/"}
## Compatible desk accessories
Verified for the Arc 14 laptop; four products.
::item{id=arc-stand name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock"}
Raises 13–16 inch laptops and leaves the charging ports clear.
::
::item{id=dock-7 name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock"}
Adds seven ports and supports 100 W pass-through charging.
::
:::
{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="View all accessories" viewAllUrl="/accessories/" >}}
## Compatible desk accessories
Verified for the Arc 14 laptop; four products.
{{< product-slide id="arc-stand" name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock" >}}
Raises 13–16 inch laptops and leaves the charging ports clear.
{{< /product-slide >}}
{{< product-slide id="dock-7" name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock" >}}
Adds seven ports and supports 100 W pass-through charging.
{{< /product-slide >}}
{{< /product-slider >}}
Dies ist die beabsichtigte Adapter-Spezifikation, kein registrierter Shortcode-Aufruf. Es werden nur benannte Parameter verwendet. Bis der Adapter existiert, implementieren Sie die Sammlung als semantisches HTML oder als nicht-interaktive Zeile, ohne einen nicht unterstützten Shortcode zu erfinden.
<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"View all accessories","viewAllUrl":"/accessories/"} -->
<!-- wp:heading {"level":2} --><h2>Compatible desk accessories</h2><!-- /wp:heading -->
<!-- wp:paragraph --><p>Verified for the Arc 14 laptop; four products.</p><!-- /wp:paragraph -->
<!-- wp:amicited/product-slide {"id":"arc-stand","name":"Arc laptop stand","url":"/products/arc-stand/","price":"USD 69","availability":"in-stock","qualifier":"Raises 13–16 inch laptops and leaves the charging ports clear."} /-->
<!-- wp:amicited/product-slide {"id":"dock-7","name":"Dock 7 hub","url":"/products/dock-7/","price":"USD 89","availability":"in-stock","qualifier":"Adds seven ports and supports 100 W pass-through charging."} /-->
<!-- /wp:amicited/product-slider -->
Zubehörteile verifiziert für Arc 14 – 4 Produkte
Arc laptop stand – USD 69 – Auf Lager. Passend für 13–16 Zoll Laptops; alle Arc 14-Anschlüsse bleiben erreichbar.
Dock 7 hub – USD 89 – Auf Lager. Unterstützt die Arc 14 USB-C-Ladespezifikation und 100 W Passthrough.
Quiet key set – USD 74 – Wenig Lagerbestand. Verbindet über Bluetooth; kein Empfänger belegt einen Arc 14-Anschluss.
Task light Mini – USD 45 – Auf Lager. Verwendet ein separates USB-C-Netzteil; es bezieht keinen Strom vom Laptop.
Dies gelingt, weil die Beziehung benannt und verifiziert ist, jede Karte eine eindeutige Kompatibilitätsangabe macht, die kommerziellen Felder parallel sind und die endliche Anzahl sichtbar ist. Alle vier Artikel können in der Quellreihenfolge existieren, auch wenn nur drei in den Viewport passen.
Das könnte Ihnen auch gefallen
BESTSELLER – $69 – Jetzt kaufen
TRENDING – $89 – Jetzt kaufen
[Drei weitere Karten werden nach dem zweiten Wischen geladen.]
Dies scheitert, weil die Überschrift die Beziehung nicht erklärt, „Bestseller“ und „Trending“ keine definierte Quelle oder Zeitspanne haben, die Währung impliziert wird und wiederholte „Jetzt kaufen“-Labels die Produktidentität aus dem Kontext verlieren. Schwerwiegender: Drei Produkte existieren erst nach Interaktion, sodass ein Tastaturnutzer, Crawler oder fehlgeschlagenes Skript eine andere Menge erhält.
Ein redaktioneller Produkt-Slider kann ItemList füttern, wenn seine Zugehörigkeit und Reihenfolge aussagekräftig sind. Verwenden Sie ein ListItem pro sichtbarer Produktentität mit Position, kanonischer URL und der Produktreferenz. Positionen müssen mit DOM- und visueller Reihenfolge übereinstimmen. Markieren Sie personalisierten, kürzlich angesehenen Verlauf nicht als öffentliche ItemList, da die Menge kein stabiler Seiteninhalt ist.
Jede Karte darf Product- und Offer-Daten nur dann füttern, wenn die sichtbare Seite dieselben Fakten unterstützt. Ein Name und ein Ziel rechtfertigen keine erfundenen Preis-, Bewertungs-, Marken-, Verfügbarkeits- oder Bewertungsdaten. Generieren Sie sichtbare Felder und strukturierte Daten aus derselben genehmigten Produktquelle und lassen Sie volatile Eigenschaften weg, die nicht synchronisiert bleiben können. Es gibt keinen speziellen Karussell-Schema-Typ.
Verwenden Sie ein benanntes <section> oder role="region" nur, wenn die Überschrift nicht bereits ausreichende Landmarken-Semantik bietet. Stellen Sie die Sammlung als <ul>, <ol> oder äquivalente Liste dar; jede Karte ist ein Listenelement. Behalten Sie Karten außerhalb des Bildschirms im DOM und im Barrierefreiheits-Baum. Horizontales Beschneiden ist Darstellung, während display:none, aria-hidden="true", inert oder clientseitige Virtualisierung Inhalte unzugänglich macht.
Verwenden Sie native Buttons für Vor und Zurück. Benennen Sie sie „Vorherige Produkte“ und „Nächste Produkte“, deaktivieren Sie sie korrekt an den Enden und behalten Sie den Fokus nach der Bewegung. Geben Sie „Produkte 4–6 von 8“ in einem höflichen Statusbereich bekannt, ohne den Fokus in die neu angezeigte Karte zu verschieben. Pfeiltasten können eine Verbesserung sein, aber Tab muss Steuerelemente und Links normal erreichen. Wischen kann unterstützt werden, jedoch nie als einzige Eingabe.
Führen Sie kein automatisches Vorrücken durch. Respektieren Sie reduzierte Bewegungspräferenzen und verwenden Sie sofortiges oder zurückhaltendes Scrollen. Ein Karten-Link benötigt einen eindeutigen barrierefreien Namen, der den Produktnamen enthält. Verhindern Sie doppelte Fokusziele, wenn sowohl Bild als auch Titel zur selben URL führen. Bei 200 % Zoom können Karten zu einem Ein-Karten-Viewport werden, aber Text, Steuerelemente und Fokusringe müssen vollständig bleiben und die Seite darf nicht horizontal überlaufen.
Die Texterstellung sollte die Zugehörigkeit verteidigbar machen, bevor sie die Reihe attraktiv macht.
Platzieren Sie niemals lange Bewertungen, Vergleichsmatrizen, Variantenauswahlen, Mengensteuerelemente, Kassenbedingungen, Testimonials, Countdown-Timer, Pop-ups, Videoplayer oder erforderliche Warnungen innerhalb einer Folie. Wählen Sie keine Zusatzartikel vor, fügen Sie Produkte nicht allein durch Navigation zum Warenkorb hinzu und verbergen Sie keine gesponserte Sortierung. Ein Slider zeigt Pfade vor; das Ziel oder die angrenzende primäre Komponente enthält die vollständige Entscheidung.
Das Feld postTypes im Front Matter steuert diese Tabelle. Die Aufnahme bedeutet, dass das Element bedingt ist, wenn eine kompakte sekundäre Produktmenge die angegebene Seite verbessert.
| Beitragstyp | Typische Verwendung | Platzierung | Haupteinschränkung |
|---|---|---|---|
| Produktseite | Kompatible Zubehörteile oder echte Alternativen | Nach Kompatibilität, enthaltenen Artikeln und primären Kaufinformationen | Darf nicht mit Varianten oder dem Haupt-CTA konkurrieren |
| Kategorieseite | Kuratierte Untersammlung oder kürzlich angesehene Artikel | Nach dem primären Produktraster | Ersetzt niemals die vollständige Auflistung, Filter oder Seitenumbrüche |
| Bestes X für Y-Seite | Kompakte Zusammenfassung einer vollständig belegten Shortlist | Nach Kriterien und Urteilen | Quellreihenfolge und sichtbares Ranking müssen mit dem Artikel übereinstimmen |
| Kaufratgeber | Produkte, die einem aufgelösten Entscheidungszweig entsprechen | Nach den relevanten Kriterien oder dem Entscheidungsergebnis | Qualifikationsmerkmale müssen angeben, warum jeder Artikel passt |
| Listen-Ratgeber | Sekundäre Produktpfade im Zusammenhang mit der Liste | Nach den substanziellen Einträgen, nicht an ihrer Stelle | Karten dürfen die jedem Eintrag geschuldeten Nachweise nicht ersetzen |
| Bewertungsseite | Alternativen oder kompatible Zubehörteile | Nach Urteil, Einschränkungen und Offenlegung | Kommerzielle Sortierung darf das Bewertungsergebnis nicht verzerren |
| Alternativen-zu-X-Seite | Zusammenfassung qualifizierter Alternativen | Nach Wechselkriterien und fairer Analyse | Keine versteckten Produkte oder nicht belegte Überlegenheitslabels |
Die Academy-Vorlage rendert die fünf überprüften Fragen, die im [[faq]]-Front Matter gespeichert sind.
Kostenlose Prüfung · 7 Tage testen · keine Kreditkarte
Cookie-Zustimmung
Wir verwenden Cookies, um Ihr Surferlebnis zu verbessern und unseren Datenverkehr zu analysieren. Datenschutz.