Slider produktowy: Przeglądanie, dostępność i ekstrakcja

Slider produktowy to poziomo przewijany wiersz kart produktów, służący do wyeksponowania niewielkiego, powiązanego zestawu bez przekształcania go w główny katalog strony. Powinien pomóc kupującemu kontynuować określoną ścieżkę zakupową — na przykład znaleźć kompatybilne akcesoria lub porównywalne alternatywy — zachowując jednocześnie tożsamość, kolejność i fakty każdego przedmiotu dla ludzi i maszyn.

Dlaczego ten element jest ważny

Slider zarządza uwagą, pokazując kilka opcji w momencie, gdy stają się istotne. Na stronie produktu kupujący, który zrozumiał główny przedmiot, może chętnie przyjąć kompatybilne akcesoria. Pełna siatka w tym momencie konkurowałaby z podstawowym zakupem; jeden zwarty wiersz zachowuje pierwotną decyzję, jednocześnie umożliwiając eksplorację.

Ta zaleta niesie ze sobą koszt psychologiczny: wszystko poza widoczną krawędzią łatwiej przeoczyć. Pierwsza karta otrzymuje więcej ekspozycji niż siódma, a przycięta ostatnia karta może wyglądać jak błąd, chyba że projekt sygnalizuje kontynuację. Slider musi zatem zawierać drugorzędny, celowo uporządkowany zestaw. Nie może ukrywać wyboru, który czytelnik musi poznać, aby zrozumieć cenę, bezpieczeństwo, kompatybilność lub sam zakres.

Ekstrahowalność maszynowa to zdolność wyszukiwarek, asystentów, kanałów i narzędzi do treści do wyizolowania każdego produktu i zachowania jego pól. Człowiek może przesunąć, aby odsłonić kartę szóstą; robot indeksujący może nigdy nie wykonać tej interakcji. Gdy kolejne slajdy pojawiają się dopiero po JavaScript, używają display:none lub istnieją jedynie jako obrazy tła, system widzi niekompletny zbiór. Renderowanie każdej karty w semantycznej kolejności źródłowej pozwala maszynie odzyskać te same nazwy, URL-e, pozycje, ceny, waluty i dostępność, do których może dotrzeć kupujący.

Postępuj zgodnie z zasadami pisania elementów dotyczącymi pierwszeństwa: sklasyfikuj blok według przeznaczenia, zanim wybierzesz jego wygląd. Jeśli jego zadaniem jest wyeksponowanie drugorzędnej ścieżki produktowej, ten element ma zastosowanie. Jeśli jego zadaniem jest pokazanie pełnych wyników lub umożliwienie porównania obok siebie, pierwszeństwo ma odpowiednia siatka lub tabela z typami.

Kiedy go używać

Użyj slidera produktowego, gdy wszystkie poniższe warunki są spełnione:

• Zestaw jest drugorzędny względem głównego zadania strony.
• Produkty łączy jedna wyraźna relacja, np. kompatybilne akcesoria, alternatywy z tej samej kategorii, ostatnio oglądane przedmioty lub redakcyjna lista rekomendacji.
• Cztery do ośmiu zwięzłych kart zapewnia użyteczną szerokość bez tworzenia ukrytego katalogu.
• Kolejność można wyjaśnić przez trafność, kompatybilność, ranking redakcyjny, aktualność lub inną widoczną regułę.
• Każdy produkt pozostaje zrozumiały jako zwięzła karta i ma kanoniczny cel dla pełnych szczegółów.

Slider jest lepszy od siatki, gdy przestrzeń pionowa jest ograniczona, a czytelnicy nie muszą widzieć wszystkich opcji jednocześnie. Może zachować kontekst na stronie szczegółów produktu, utrzymać krótki zestaw rekomendacji razem na urządzeniach mobilnych i wyeksponować następną ścieżkę bez umieszczania ośmiu pełnych opisów w strumieniu artykułu.

Użyj siatki, gdy zestaw jest celem strony. Wyniki wyszukiwania, kategoria produktów, filtrowana kolekcja lub zbiór, który musi być skanowany w całości, potrzebuje widocznych liczb, sortowania, filtrów, stronicowania i stabilnych URL-i. Użyj tabeli porównawczej , gdy czytelnicy muszą ocenić te same specyfikacje w różnych opcjach. Użyj galerii zdjęć , gdy elementy są widokami jednego obiektu, a nie oddzielnymi produktami do kupna.

Częste przypadki graniczne obejmują: dwuelementowy wiersz wymuszony w kontrolkach karuzeli, 30-produktową kategorię upchniętą w wąski pasek, karuzelę banerową hero zawierającą promocje zamiast produktów oraz slider używany do ukrywania słabych rekomendacji poniżej linii zagięcia. „Ostatnio oglądane” to również warunkowy przypadek graniczny: jest użyteczne tylko wtedy, gdy odwiedzający faktycznie ma historię, nagłówek mówi, dlaczego te elementy się pojawiają, a stan pusty nie symuluje aktywności.

Gdzie go umieścić

Umiejscowienie powinno odpowiadać na pytanie, które właśnie zrodziło się u czytelnika. Umieść kompatybilne akcesoria po informacjach o kompatybilności i zawartych elementach, alternatywy po ograniczeniach głównego produktu lub podsumowaniu decyzji, a powiązane produkty po głównej liście kategorii, a nie przed nią. W treściach redakcyjnych umieść pasek po kryteriach i dowodach, a nie zanim czytelnicy dowiedzą się, dlaczego produkty się kwalifikują.

Trzymaj nagłówek, opis relacji, liczbę elementów, elementy sterujące i karty w jednym regionie. Umieść link „Zobacz wszystkie” obok nagłówka lub za wierszem, gdy istnieje pełna kolekcja. Link musi prowadzić do indeksowalnej strony kanonicznej, a nie rozwijać nieograniczony pasek po stronie klienta.

Nie umieszczaj slidera obok innego slidera, automatycznie obracającego się banera, tabeli cenowej ani głównych elementów sterujących zakupem na stronie. Sąsiadujące gesty poziome tworzą niejednoznaczność, a konkurujące ceny mogą sprawić, że nie będzie jasne, którą ofertę kupuje główne wezwanie do działania. Nie przerywaj kroków proceduralnych, ostrzeżeń, warunków kasy ani wymaganych ujawnień prawnych rekomendacjami. Nigdy nie umieszczaj niezbędnych wariantów w sliderze, jeśli wybór jednego z nich zmienia cenę, dostępność lub konfigurację głównego produktu; warianty należą do elementów sterujących danego produktu.

Na małych ekranach pozwól na jedną pełną kartę plus celowy podgląd następnej karty lub jedną pełną kartę z wyraźną etykietą pozycji. Region może przewijać się poziomo, ale sam dokument nie może. Zachowaj widoczną ścieżkę obok slidera, aby użytkownik klawiatury lub ekranu dotykowego nigdy nie został uwięziony w powtarzanej nawigacji poziomej.

Anatomia

1. Nagłówek sekcji: nazywa zestaw, np. „Kompatybilne akcesoria”, zamiast ogólnego „Może Ci się również spodobać”.
2. Opis relacji: wyjaśnia, dlaczego produkty się kwalifikują i czy kolejność jest redakcyjna, behawioralna czy komercyjna.
3. Liczba elementów: podaje skończoną wielkość przed interakcją, np. „6 produktów”.
4. Obszar widoku: przycina tylko prezentację; nie usuwa kart poza ekranem z dokumentu.
5. Karta produktu: zachowuje nazwę produktu, miejsce docelowe, decydujący kwalifikator i aktualne fakty handlowe jako jedną jednostkę.
6. Wskazówka kontynuacji: używa częściowej następnej karty, tekstu pozycji lub obu; sam cień jest zbyt łatwy do przeoczenia.
7. Przyciski poprzedni i następny: używają przycisków nazwanych zgodnie z ich działaniem i wyświetlają stan wyłączenia na końcach.
8. Wskaźnik pozycji: ogłasza zakres, taki jak „Produkty 1–3 z 6”, a nie wiersz nieopisanych kropek.
9. Ścieżka Zobacz wszystkie: otwiera kanoniczną pełną kolekcję, jeśli istnieje.
10. Stan fokusu: pozostaje widoczny na każdym elemencie sterującym i linku karty bez przycinania przez obszar widoku.

Każda karta jest zgodna z kontraktem karty produktu . Slider posiada znaczenie kolekcji i nawigację, a nie przedefiniowuje lokalnie faktów produktowych.

Przykłady projektowe

Redakcyjna lista rekomendacji: użyj dla czterech do ośmiu produktów wybranych według określonych kryteriów. Kolejność może odzwierciedlać ranking tylko wtedy, gdy strona zawiera dowody tego rankingu; w przeciwnym razie oznacz jako „Wybrane opcje” i unikaj twierdzeń porządkowych.

Powiązane produkty: użyj dla produktów z tej samej kategorii lub zamienników po wyjaśnieniu głównego produktu. Określ wspólną właściwość, taką jak format czy przedział cenowy, zamiast sugerować personalizację.

Kompatybilne akcesoria: użyj, gdy każdy przedmiot ma zweryfikowaną relację z produktem głównym. Powtórz kompatybilny model lub zakres w treści karty; bliskość nie jest gwarancją kompatybilności.

Historia behawioralna: użyj dla ostatnio oglądanych lub zapisanych przedmiotów tylko wtedy, gdy odwiedzający stworzył ten stan. Oznacz podstawę, zachowaj kolejność chronologiczną, zapewnij możliwość usunięcia tam, gdzie to właściwe, i nie emituj spersonalizowanej historii do współdzielonych pamięci podręcznych ani danych strukturalnych.

Parametry

Obraz jest warunkowy, ponieważ karta produktu skoncentrowana na tekście może być kompletna bez niego. Jeśli jest używany, jego plik musi istnieć, wymiary muszą rezerwować miejsce, a tekst alternatywny musi odpowiadać jego przeznaczeniu. Jeśli jedna karta wyświetla cenę lub dostępność, każda towarzysząca karta musi wyświetlać równoważne aktualne pole lub jawny status.

Składnia i przykłady kodu

Przenośna dyrektywa Markdown

:::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.
::
:::

Odwzorowanie skrótu Hugo

{{< 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 >}}

Jest to zamierzona specyfikacja adaptera, a nie zarejestrowane wywołanie skrótu. Używa tylko nazwanych parametrów. Dopóki adapter nie istnieje, zaimplementuj kolekcję jako semantyczny HTML lub nieinteraktywny wiersz bez tworzenia nieobsługiwanego skrótu.

Blok WordPress

<!-- 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 -->

Przykłady

Dobrze: kompatybilność jest jednoznaczna

Akcesoria zweryfikowane dla Arc 14 — 4 produkty
Podstawka pod laptopa Arc — USD 69 — W magazynie. Pasuje do laptopów 13–16 cali; wszystkie porty Arc 14 pozostają dostępne.
Hub Dock 7 — USD 89 — W magazynie. Obsługuje specyfikację ładowania USB-C Arc 14 i przepustowość 100 W.
Cichy zestaw klawiszy — USD 74 — Niski stan magazynowy. Łączy się przez Bluetooth; żaden odbiornik nie zajmuje portu Arc 14.
Lampka biurkowa Task light Mini — USD 45 — W magazynie. Używa osobnego zasilacza USB-C; nie pobiera energii z laptopa.

Ten przykład jest udany, ponieważ relacja jest nazwana i zweryfikowana, każda karta zawiera odrębne oświadczenie o kompatybilności, pola handlowe są równoległe, a skończona liczba jest widoczna. Wszystkie cztery elementy mogą istnieć w kolejności źródłowej, nawet gdy tylko trzy mieszczą się w obszarze widoku.

Źle: ukryte rekomendacje bez podstawy

Może Ci się również spodobać
BESTSELLER — 69 zł — Kup teraz
TRENDING — 89 zł — Kup teraz
[Trzy dodatkowe karty ładują się po drugim przesunięciu.]

To jest nieudane, ponieważ nagłówek nie wyjaśnia relacji, „bestseller” i „trending” nie mają określonego źródła ani okresu, waluta jest domniemana, a powtarzające się etykiety „Kup teraz” tracą tożsamość produktu poza kontekstem. Co poważniejsze, trzy produkty nie istnieją aż do interakcji, więc użytkownik klawiatury, robot indeksujący lub niesprawny skrypt otrzymuje inny zestaw.

Znaczniki schematu i dostępność

Redakcyjny slider produktowy może zasilać ItemList, gdy jego skład i kolejność są znaczące. Użyj jednego ListItem na każdą widoczną encję produktu, z position, kanonicznym URL-em i odniesieniem do produktu. Pozycje muszą odpowiadać DOM-owi i kolejności wizualnej. Nie oznaczaj spersonalizowanej historii ostatnio oglądanych jako publicznej ItemList, ponieważ zestaw nie jest stabilną treścią strony.

Każda karta może zasilać dane Product i Offer tylko wtedy, gdy widoczna strona potwierdza te same fakty. Nazwa i miejsce docelowe nie uzasadniają wymyślonych danych o cenie, ocenie, marce, dostępności ani recenzji. Generuj widoczne pola i dane strukturalne z tego samego zatwierdzonego źródła produktu i pomiń zmienne właściwości, które nie mogą pozostać zsynchronizowane. Nie ma specjalnego typu schematu karuzeli.

Użyj nazwanego <section> lub role="region" tylko wtedy, gdy nagłówek nie zapewnia już wystarczającej semantyki punktu orientacyjnego. Przedstaw kolekcję jako <ul>, <ol> lub równoważną listę; każda karta to jeden element listy. Pozostaw karty poza ekranem w DOM i drzewie dostępności. Poziome przycięcie to kwestia prezentacji, podczas gdy display:none, aria-hidden="true", inert lub wirtualizacja po stronie klienta powoduje, że treść jest niedostępna.

Użyj natywnych przycisków dla opcji poprzedni i następny. Nazwij je „Poprzednie produkty” i „Następne produkty”, wyłącz je odpowiednio na końcach i zachowaj fokus po ruchu. Ogłoś „Produkty 4–6 z 8” w regionie statusu uprzejmego bez przesuwania fokusu do nowo odsłoniętej karty. Klawisze strzałek mogą być usprawnieniem, ale Tab musi normalnie docierać do elementów sterujących i linków. Przesunięcie może być obsługiwane, ale nigdy jako jedyny sposób wprowadzania danych.

Nie przesuwaj automatycznie. Szanuj preferencje ograniczonego ruchu i używaj natychmiastowego lub powściągliwego przewijania. Link karty potrzebuje odrębnej dostępnej nazwy zawierającej nazwę produktu. Zapobiegaj duplikowaniu celów fokusu, gdy zarówno obraz, jak i tytuł prowadzą do tego samego URL-a. Przy 200% powiększeniu karty mogą stać się obszarem widoku dla jednej karty, ale tekst, elementy sterujące i pierścienie fokusu muszą pozostać kompletne, a strona nie może przelewać się w poziomie.

Zasady pisania

Pisanie powinno czynić skład członkowski obronnym, zanim uczyni wiersz atrakcyjnym.

• Konkretny nagłówek wyjaśnia ścieżkę. Użyj 3–10 słów: „Kompatybilne akcesoria Arc 14” lub „Alternatywy poniżej USD 100”. Nigdy nie polegaj wyłącznie na „Więcej”, „Trending” ani „Może Ci się również spodobać”.
• Jedno zdanie określa selekcję. Użyj 8–30 słów, aby określić wspólne kryteria, odbiorców, kompatybilność lub źródło historii. Jeśli ranking lub popularność określa kolejność, podaj nazwę metryki, rynek i okres.
• Skończone zestawy pozostają weryfikowalne. Użyj normalnie 4–8 produktów i nie więcej niż 12. Dwie lub trzy karty powinny tworzyć statyczny wiersz; większe asortymenty wymagają siatki i kanonicznej ścieżki kolekcji.
• Nazwy kart zachowują tożsamość. Użyj oficjalnej nazwy produktu w 1–8 słowach. Nie zastępuj jej „Najlepsza wartość”, „Nasz wybór” ani sloganem kampanii.
• Kwalifikatory odpowiadają na jedno pytanie decyzyjne. Użyj 4–18 słów dotyczących dopasowania, wyróżniającej cechy, kompatybilności lub ograniczenia. Unikaj ogólnych pochwał, takich jak „najwyższa jakość”.
• Równoległe fakty ułatwiają skanowanie. Jeśli jedna karta pokazuje cenę, walutę, dostępność, ocenę lub dostawę, towarzyszące karty pokazują równoważne pola lub jawne stany niedostępności z tego samego źródła i rynku.
• Kolejność wymaga odpowiedzialnej podstawy. Kolejność kompatybilności może umieścić najlepsze dopasowanie jako pierwsze; ranking wymaga opublikowanych kryteriów; aktualność odzwierciedla historię odwiedzającego. Płatne umiejscowienie musi być ujawnione i nie może udawać redakcyjnej trafności.
• Działania zachowują kontekst. Użyj „Zobacz podstawkę pod laptopa Arc”, a nie pięciu egzemplarzy „Dowiedz się więcej”. Wezwanie do działania na karcie otwiera kanoniczną stronę szczegółów tego produktu, chyba że działanie wyraźnie dodaje znany wariant do koszyka.
• Zmienne twierdzenia wymagają odpowiedzialności. Ceny, stany magazynowe, dostawa, rabaty, oceny i popularność pochodzą z zatwierdzonych systemów i mają wymagane zachowanie dotyczące aktualności. Proza redakcyjna nie może kodować na stałe sprzecznej wartości.

Nigdy nie umieszczaj długich recenzji, macierzy porównawczych, selektorów wariantów, kontroli ilości, warunków kasy, referencji, timerów odliczających, wyskakujących okienek, odtwarzaczy wideo ani wymaganych ostrzeżeń wewnątrz slajdu. Nie zaznaczaj wstępnie dodatków, nie dodawaj produktów do koszyka poprzez samą nawigację ani nie ukrywaj sponsorowanej kolejności. Slider wyświetla podgląd ścieżek; miejsce docelowe lub sąsiedni główny komponent zawiera pełną decyzję.

Typy postów, które go używają

Pole postTypes w metadanych steruje tą tabelą. Umieszczenie oznacza, że element jest warunkowy, gdy zwarty drugorzędny zestaw produktów poprawia daną stronę.

Lista kontrolna QA

• Zestaw jest drugorzędny względem głównego zadania strony i ma jedną wyraźną relację produktową.
• Siatka lub tabela porównawcza nie służyłaby lepiej rzeczywistemu zadaniu czytelnika.
• Slider zawiera normalnie 4–8 produktów i nigdy nie przekracza 12.
• Nagłówek, podstawa selekcji, liczba elementów, elementy sterujące, status pozycji i ścieżka Zobacz wszystkie są widoczne tam, gdzie mają zastosowanie.
• Każda karta ma stabilny identyfikator, oficjalną nazwę, kanoniczne miejsce docelowe i kwalifikator istotny dla decyzji.
• Pola ceny, waluty, dostępności, oceny, dostawy i promocji są równoległe i pochodzą ze źródła, gdy są wyświetlane.
• Twierdzenia o kompatybilności, rankingu, popularności, personalizacji i sponsorowaniu ujawniają swoją podstawę.
• Kolejność DOM, kolejność wizualna, ogłaszana pozycja, kolejność klawiatury i wszelkie pozycje ItemList są zgodne.
• Każdy produkt jest renderowany po stronie serwera i użyteczny bez JavaScript; żaden późniejszy slajd nie zależy od interakcji ani żądania klienta.
• Karty poza ekranem pozostają w drzewie dostępności i nie są ukryte, bezczynne ani reprezentowane wyłącznie przez obrazy tła.
• Przyciski poprzedni i następny mają odrębne nazwy, prawidłowe stany wyłączenia, widoczny fokus i stabilny fokus po ruchu.
• Przesunięcie dotykowe i klawisze strzałek są usprawnieniami; standardowe przyciski i nawigacja Tab zapewniają pełny dostęp.
• Nie ma automatycznego ruchu, kradzieży fokusu, pułapki klawiaturowej ani poziomego przelewu strony.
• Zmiany pozycji są ogłaszane jako tekst, a kolor, przycięcie, cienie ani kropki nigdy nie niosą informacji o kontynuacji same w sobie.
• Każda ścieżka obrazu jest rozwiązywana przed publikacją, wymiary rezerwują miejsce, a tekst alternatywny odzwierciedla przeznaczenie karty.
• Przy 200% powiększeniu i na wąskim ekranie jedna karta, jej tekst, elementy sterujące i pierścień fokusu pozostają kompletne.
• Dane strukturalne powtarzają widoczne, aktualne fakty i pomijają spersonalizowaną historię lub wymyślone właściwości handlowe.
• Pełna kolekcja ma indeksowalny URL Zobacz wszystkie, gdy czytelnicy mogą w uzasadniony sposób potrzebować przeglądać poza paskiem.
• Reprezentacje w przenośnym Markdown, Hugo i WordPress zachowują te same produkty, kolejność, pola i mechanizm awaryjny.

FAQ

Szablon academy renderuje pięć przeanalizowanych pytań przechowywanych w [[faq]] metadanych.