Produktové karty: Obchodné bloky riadené zdrojom

Produktová karta mení zmienku o produkte na kompletnú, akcieschopnú obchodnú jednotku: obrázok produktu, oficiálny názov, aktuálnu cenu a výzvu na akciu (CTA), teda odkaz alebo tlačidlo, ktoré posúva nákupnú cestu vpred. Jej najdôležitejšie pravidlo je pre čitateľa neviditeľné: autor umiestňuje kartu podľa skladovej jednotky (SKU), identifikátora katalógu pre predajný produkt alebo variant, zatiaľ čo zdroj produktu dodáva hodnoty.

Príklad zobrazuje vzťah, nie autorovu ponuku. V produkcii každá viditeľná hodnota za SKU pochádza z autorizovaného zdroja produktu. Aktualizácia katalógu zmení každú kartu, ktorá odkazuje na danú SKU, bez toho, aby museli autori vyhľadávať a upravovať staré články.

Prečo je tento prvok dôležitý

Čitatelia, ktorí hodnotia produkty, potrebujú rýchlo odpovedať na štyri otázky: Čo to je? Ako to vyzerá? Koľko to stojí? Čo môžem urobiť ďalej? Názov produktu zakopaný v próze ich núti rekonštruovať tieto odpovede naprieč stránkou. Ohraničená karta toto úsilie znižuje, pričom komerčné prerušenie zostáva primerané odporúčaniu.

Karta zároveň buduje dôveru prostredníctvom konzistencie. Keď článok uvádza „USD 149", ale stránka produktu hovorí „USD 169", nejde o drobný redakčný nedostatok; čitateľ spochybní odporúčanie, akciu aj pokladňu. Karta riadená zdrojom zabraňuje tomu, aby sa článok stal nezávislou cenovou databázou. Môže tiež odrážať stav skladových zásob, identitu variantu a zmeny cieľa podľa zmien v katalógu.

Strojová extrahovateľnosť znamená, že crawler, nákupný agent, feed alebo nástroj na migráciu obsahu dokáže zachovať, ktorý obrázok, názov, cena, stav dostupnosti a akcia patria ku ktorému produktu. Samotná blízkosť je slabá. Ak sa tri obrázky nachádzajú nad tromi cenami vo vizuálne zarovnaných stĺpcoch, stroj ich môže priradiť nesprávne. Jedna karta by mala odhaľovať jednu entitu produktu kľúčovanú pomocou SKU, s jej faktami v jednom sémantickom kontajneri a jej cieľom jednoznačne prepojeným.

Tento prvok nie je len štylizovaný affiliate odkaz. Pravidlá písania prvkov majú prednosť: vyberajte komponent podľa jeho účelu. Keď blok predstavuje jeden kúpiteľný produkt s identitou, cenou a akciou, použite produktovú kartu, aj keby ju dizajnér vedel napodobniť obrázkom, nadpisom a tlačidlom. Typovaný komponent poskytuje väzbu na zdroj, validáciu, správanie pre prístupnosť a háčiky pre štruktúrované dáta, ktoré voľný markup nemôže zaručiť.

Kedy ho použiť

Použite produktovú kartu, keď má čitateľ dostatok kontextu na posúdenie konkrétneho produktu a priama akcia s produktom je užitočná. Bežné prípady zahŕňajú odporúčanú položku v nákupnom sprievodcovi, produkty v úvode kategórie, príslušenstvo na stránke produktu alebo každú vybranú možnosť po vysvetlení porovnávacích kritérií.

Produkt musí byť identifikovateľný jednou platnou SKU v autorizovanom zdroji. Ak názov odkazuje na rodinu s niekoľkými nezávisle ocenenými variantmi, spresnite odporúčanie článku na konkrétny variant alebo použite spracovanie rodiny produktov, ktorého CTA vyzve čitateľa, aby si vybral variant. Nezobrazujte ticho najlacnejší variant, akoby to bola cena každej konfigurácie.

Blízke typy omylov sú ľahko rozpoznateľné, keď je účel explicitný:

• Veta uvádzajúca produkt ako príklad nepotrebuje kartu, pokiaľ cena a akcia čitateľovi v danom momente nepomáhajú.
• Súbor plánov s rôznymi fakturačnými podmienkami potrebuje cenovú tabuľku, nie rad produktových kariet.
• Zoznam v poradí stále potrebuje redakčné odôvodnenie okolo každej položky. Karty nemôžu nahradiť výberové kritériá, dôkazy, kompromisy ani vysvetlenie, komu ktorý produkt vyhovuje.
• Akcia s podmienkami oprávnenosti, exspiráciou a kupónmi vyžaduje samostatné spracovanie ponuky. Karta môže zobrazovať zdrojom riadenú aktuálnu cenu, ale nesmie obsahovať miniatúrne obchodné podmienky.
• Porovnanie špecifikácií patrí do porovnávacej alebo špecifikačnej tabuľky. Opakovanie celých kariet v každej bunke porovnania vytvára vizuálny šum a oslabuje vzťahy.
• Služba bez SKU a katalógového záznamu nie je produktová karta len preto, že má cenu a tlačidlo.

Nepridávajte kartu len na speňaženie informatívnej zmienky. Ak sa čitateľ nestretol s potrebou, kritériom alebo odporúčaním, ktoré vysvetľuje, prečo produkt patrí na dané miesto, karta bude pôsobiť ako rušivý element a stroj dostane entitu bez užitočného kontextu.

Kam ju umiestniť

Umiestnenie slúži na prepojenie produktu s odôvodnením, ktoré ho vybralo. Umiestnite kartu hneď za odsek, podnadpis alebo verdikt, ktorý identifikuje produkt a vysvetľuje jeho vhodnosť. Čitateľ by sa mal stretnúť s dôvodom skôr ako s akciou, nie s predajným prvkom skôr ako s dôkazom.

Keď sekcia obsahuje produkty aj neproduktové riešenia, produkty sú pred domácimi liekmi, metódami urob si sám a inými alternatívami. Toto poradie udržiava komerčné položky v jednej predvídateľnej skupine, dáva ich katalógovým údajom čistú hranicu a zabraňuje tomu, aby sa domáca metóda javila ako ďalšia SKU. Uveďte kritériá, zobrazte relevantnú produktovú kartu alebo karty, potom otvorte jasne označenú sekciu alternatív.

Presné pravidlá umiestnenia:

Neumiestňujte kartu pred priamu odpoveď stránky, do vnútra odseku, medzi tvrdenie a jeho dôkaz ani do vnútra číslovaného pokynu. Neumiestňujte ju vedľa konfliktnej ceny, druhého CTA smerujúceho na rovnaký cieľ, odpočítavacieho časovača, svedectva, ktoré sa zdá podporovať presne túto SKU bez dôkazu, ani do boxu s domácimi liekmi. Vyhýbajte sa susedným duplicitným kartám pre rovnakú SKU; neskoršie odkazy radšej prepojte späť na kanonické umiestnenie.

Anatómia

Anatómia pozostáva zo štyroch požadovaných viditeľných oblastí a jedného zdrojového kľúča:

1. Obrázok produktu: primárny katalógový obrázok pre referencovanú SKU, so zdrojom spravovaným alternatívnym textom, ktorý identifikuje produkt a relevantný viditeľný variant.
2. Názov produktu: oficiálny názov pre zákazníkov, prepojený alebo párovaný s kanonickým cieľom produktu.
3. Cena: aktuálna suma a ISO menový kód, alebo pravdivý stav zo zdroja, napríklad „Cena nedostupná". Zľavnená cena si zachováva vzťah k bežnej cene.
4. CTA: konkrétna akcia, napríklad „Zobraziť North Ridge boot" alebo „Pridať North Ridge boot do košíka", vybraná z povolených akcií pre daný produkt a kanál.
5. SKU: stabilný vyhľadávací kľúč. Môže zostať vizuálne potlačený alebo skrytý pred nakupujúcimi, ale musí existovať v údajoch komponentu a diagnostike.

Dostupnosť je podmienená vizuálne, ale vyžadovaná v zdrojových údajoch. Zobrazte „Vypredané", „Predobjednávka" alebo iný zmysluplný stav, keď mení to, čo CTA dokáže. Odznaky, hodnotenia, informácie o doprave a varianty sú voliteľné rozšírenia; žiadne nesmie vytláčať štyri požadované oblasti ani byť autorované ako neoveriteľné tvrdenia.

Príklady dizajnu

Každý variant používa rovnakú zdrojovú zmluvu. Varianty menia rozloženie a dôraz, nikdy nie vlastníctvo faktov o produkte.

Štandardná vertikálna karta: predvolená pre jeden až štyri produkty. Funguje v stĺpcoch článku a predvídateľne sa skladá na úzkych obrazovkách.

Kompaktná horizontálna karta: použite v dlhých zoznamoch, kde záleží na rozpoznaní obrázka, ale vertikálny priestor je obmedzený. CTA nasleduje za cenou v poradí čítania, aj keď ho CSS umiestni na okraj.

Odporúčaná karta (featured): použite raz, keď redakčné odôvodnenie identifikovalo jasnú vhodnosť. „Najlepšie pre mokré chodníky" je autorovaný kontext mimo zdrojom riadeného názvu produktu; „najlepšie celkovo" vyžaduje uvedené kritériá a dôkazy.

Nedostupný stav: zachovajte identitu, keď je dočasná nedostupnosť pre čitateľa užitočná, ale nahraďte nákupnú akciu zdrojom schváleným ďalším krokom. Ukončený produkt by sa mal normálne redakčne nahradiť, nie propagovať ako prázdnu kartu.

Parametre

Rozhranie zámerne dáva autorom málo kontroly. Obmedzenie autorovaných vstupov zabraňuje tomu, aby text prepísal katalóg. „Zdroj" nižšie identifikuje, odkiaľ renderer získava jednotlivé hodnoty.

Telo je prázdne okrem voliteľného prvého nadpisu, ktorý sa stáva redakčným kontextom, napríklad „Najlepšie pre mokré chodníky". Nikdy nesmie obsahovať druhý názov, ručne písanú cenu, náhradnú URL obrázka, tvrdenie o dostupnosti ani cieľ. Ak je zdrojový záznam neúplný, opravte zdroj alebo zablokujte publikovanie.

Syntax a príklady kódu produktovej karty

Všetky tri formáty nesú rovnaký autorovaný pokyn: umiestni produkt identifikovaný touto SKU sem. Neserializujú aktuálne hodnoty produktu do článku.

Prenosná Markdown direktíva

:::product-card{sku="TRAIL-BOOT-042" placement=featured}
### Best for wet trails
:::

Hugo shortcode

{{< product-card sku="TRAIL-BOOT-042" placement="featured" >}}
Best for wet trails
{{< /product-card >}}

Hugo notácia dokumentuje cieľový kontrakt adaptéra. Musí vyriešiť SKU prostredníctvom schváleného zdroja produktových údajov stránky, nie prijímať hodnoty produktu ako parametre shortcodov.

WordPress

[product_card sku="TRAIL-BOOT-042" placement="featured"]
Best for wet trails
[/product_card]

WordPress implementácia by mala používať dynamický serverovo renderovaný blok alebo registrovaný shortcode podporený rovnakým zdrojom produktu. Uloženie statickej kópie názvu a ceny produktu do obsahu príspevku porušuje kontrakt.

Dobré a zlé príklady

Dobrý: umiestnenie nesie odporúčanie; zdroj nesie ponuku

Pre strmé, mokré trasy uprednostnite vodotesnú membránu, podrážku navrhnutú na blato a bezpečné držanie päty. Model North Ridge spĺňa tieto uvedené kritériá bez toho, aby bol najľahšou možnosťou.

:::product-card{sku="TRAIL-BOOT-042" placement=featured}

Toto funguje, pretože próza vysvetľuje vhodnosť a kompromis pred produktovou akciou. Direktíva identifikuje jednu SKU, takže renderer môže získať aktuálny obrázok, oficiálny názov, trhovú cenu, dostupnosť a URL ako jednu entitu produktu.

Zlý: komerčné hodnoty sú skopírované do článku

Najlepšia vodotesná topánka — North Ridge, len $129!
Obrázok: /uploads/north-ridge-final-v2.jpg
Kúpiť teraz

Toto zlyháva, pretože cena, obrázok, spracovanie názvu a URL sú ručne písané. Suma môže byť neaktuálna alebo používať nesprávny trh; „len" pridáva nepodložený hodnotový úsudok; fragment URL sa nedostane k produktu; a obrázok je odpojený od metadát katalógu. Neexistuje SKU, stav dostupnosti, menový kód ani strojovo stabilné zoskupenie. Riešením nie je doplniť prozaickú kartu. Nahraďte ju direktívou viazanou na zdroj a ponechajte len redakčné vysvetlenie vhodnosti mimo nej.

Schema markup a prístupnosť

Vyriešená karta môže poskytnúť štruktúrované dáta Product a Offer, keď stránka, produkt a viditeľné fakty spĺňajú podmienky podľa schema politiky stránky. SKU sa môže mapovať na sku; oficiálny názov a obrázok na name a image; skutočná ponuka môže poskytnúť price, priceCurrency, availability a url. Server musí generovať viditeľný obsah aj štruktúrovaný výstup z rovnakého vyriešeného záznamu, aby nemohli byť v rozpore.

Nevysielajte Offer s uhádnutou cenou, nepoužívajte nulu pre nedostupnú sumu ani neoznačujte položku ako na sklade len preto, že CTA hovorí „Zobraziť produkt". Ak niekoľko kariet opisuje rovnakú SKU, schema by nemala vytvárať protichodné duplicitné entity. Prepojte ich alebo deduplikujte prostredníctvom jednej stabilnej identity produktu.

Prístupnosť začína vzťahmi v dokumente. Zabaľte každú kartu do article alebo ekvivalentnej označenej skupiny, urobte z názvu produktu logický nadpis a priraďte prístupný názov CTA k tomuto produktu. „Zobraziť produkt" zopakované šesťkrát je v zozname odkazov nejednoznačné; „Zobraziť North Ridge Waterproof Hiking Boot" zostáva užitočné aj bez vizuálneho kontextu.

Alternatívny text by mal opisovať produkt a zmysluplný viditeľný variant, nie opakovať cenu alebo písať „obrázok". Dekoratívne sekundárne obrázky používajú prázdny alternatívny text. Nesdôbajte dostupnosť, akciový stav alebo odporúčanie len farbou, prečiarknutím, tvarom odznaku alebo ikonou. Klávesnicové zameranie musí nasledovať poradie čítania a celá karta sa nesmie stať jedným obrovským odkazom, keď zároveň obsahuje samostatné tlačidlo alebo ovládanie variantu.

Pravidlá písania

Karta zostáva stručná, pretože jej úlohou je identita a akcia, nie presviedčanie. Každé pravidlo chráni buď integritu zdroja, alebo porozumenie čitateľa:

• Jedna SKU zabraňuje zmiešaným identitám. Každá karta rieši presne jednu SKU. Nekombinujte obrázok z jedného variantu s cenou iného.
• Vlastníctvo zdroja zabraňuje neaktuálnym obchodným tvrdeniam. Autori dodávajú umiestnenie a voliteľne dvoj- až šesťslovný kontextový štítok. Nikdy nepíšu názov, cestu k obrázku, cenu, menu, dostupnosť, URL ani CTA do karty.
• Redakčný kontext vysvetľuje vhodnosť. Označený štítok (featured) môže uvádzať obhájiteľný prípad použitia, napríklad „Najlepšie pre malé kuchyne". Dodržte 50 znakov a podporte ho v blízkej próze.
• Aktuálna cena potrebuje úplný kontext. Renderer zobrazuje ISO menový kód a spracúva bežnú verzus zľavnenú cenu zo zdroja produktu. Nikdy nepridávajte „lacný", „len" ani úsporný jazyk, pokiaľ ho nepodporuje samostatné overené tvrdenie.
• Jedna akcia znižuje nejednoznačnosť. Použite jedno primárne CTA, mapované na dostupnosť. Nepridávajte zber newsletterov, zadávanie kupónov, ovládacie prvky zdieľania ani konkurujúce odkazy predajcov do kanonickej karty.
• Kompaktné hranice napomáhajú extrakcii. Viditeľná karta obsahuje jeden obrázok, jeden oficiálny názov, jeden cenový stav, jeden stav dostupnosti (pokiaľ je podstatný) a jedno CTA. Dlhé opisy, výsledky testov, výhody a nevýhody a právne podmienky zostávajú v susedných prvkoch.
• Produkty predchádzajú neproduktom. Keď domáce lieky alebo iné neproduktové alternatívy zdieľajú sekciu, zobrazte najprv relevantné produktové karty, potom začnite samostatnú podsekciu alternatív.

Tón je faktický a pokojný. Okolitá próza môže odporúčať, porovnávať alebo varovať, ale zdrojom riadené polia zostávajú neutrálne. Nikdy neumiestňujte do karty svedectvo, nepodložené superlatívy, odpočítavanie, skryté affiliate zverejnenie, predpis, dávkovací pokyn, interpretáciu záruky ani zhrnutie politiky vrátenia. Tieto tvrdenia vyžadujú vlastné dôkazy, vlastníctvo a správanie pri aktualizácii.

Typy príspevkov, ktoré ju používajú

Pole postTypes v frontmatter je kanonický vzťah. Tabuľka vysvetľuje úlohu karty v každej uvedenej špecifikácii.

Kontrolný zoznam QA

• Zodpovedá účel bloku produktovej karte podľa pravidla priority?
• Obsahuje direktíva jednu platnú SKU a žiadne autorované hodnoty produktu?
• Identifikuje vyriešená SKU zamýšľaný trh a presný variant?
• Pochádzajú obrázok, názov, cena, mena, dostupnosť, URL a CTA z autorizovaných zdrojov?
• Zodpovedá viditeľná cena cieľu a prípadným štruktúrovaným dátam v čase renderovania?
• Zahŕňa akciový stav platný vzťah k bežnej cene a zdrojom riadené aktívne obdobie?
• Je nedostupný produkt pravdivo označený s primeranou nekupčnou akciou?
• Vysvetľuje blízka próza, prečo produkt vyhovuje, skôr než karta žiada o akciu?
• Sú produkty umiestnené pred domácimi liekmi, metódami urob si sám a neproduktovými alternatívami?
• Je karta oddelená od konfliktných cien, odpočítavaní, svedectiev a duplicitných CTA?
• Vytvára názov produktu jasný nadpis alebo prístupný štítok pre kartu?
• Identifikuje prístupný názov CTA svoj produkt, keď sú odkazy čítané mimo kontextu?
• Opisuje alternatívny text zmysluplný produkt a variant bez duplikovania blízkeho textu?
• Sú odporúčanie, cena, stav dostupnosti a akciový stav vyjadrené textom, nielen farbou?
• Nasleduje klávesnicové poradie logicky obrázok, názov, cenu, dostupnosť a akciu?
• Je schema vysielané len pre oprávnený vyriešený produkt, bez uhádnutých alebo protichodných hodnôt ponuky?
• Zlyháva chýbajúca alebo ukončená SKU bezpečne podľa katalógovej politiky namiesto vykreslenia prázdnej alebo vymyslenej karty?
• Vyhla sa stránka duplicitným kartám pre rovnakú SKU a udržala redakčné tvrdenia mimo zdrojom riadených polí?

Produktová karta je pripravená až vtedy, keď čitateľ aj stroj dokážu identifikovať rovnaký produkt, aktuálny obchodný stav a nasledujúcu akciu. Ak musí autor udržiavať niektorý z týchto faktov v próze článku, zdrojový kontrakt bol porušený.