Adatok átadása

data-ai-* attribútumok: jelöld meg a termékeket a meglévő HTML-ben

Ha nem szeretnél külön JSON blokkot írni, a meglévő HTML-edet is megjelölheted néhány data-ai-* attribútummal. Ez különösen kategória- és listaoldalakon kényelmes: a sablonod amúgy is kirajzolja a termékkártyákat, csak meg kell jelölni őket.

  • Fejlesztőknek
  • 4 perc olvasás
  • Frissítve:

Röviden

  • Minden elem dobozára tegyél egy data-ai-item attribútumot.
  • Az adatokat attribútumokkal (data-ai-name, data-ai-price …) vagy belső elemekkel (data-ai-field="name") adhatod meg.
  • Ha nincs megadva kép vagy link, a rendszer az elemen belüli első <img> és <a href> elemet használja.
  • Egy oldalon legfeljebb 40 megjelölt elemet olvas be.

Inkább kérdeznél? Az AI ennek az oldalnak a lényegével segít.

A gomb megnyitja az AI-t, és beírja a kérdést az oldal lényegével és a kódokkal együtt.

ChatGPTClaude

1. módszer: minden adat attribútumban

Egy termék attribútumokkalHTML
<div
  data-ai-item="bortaska-barna"
  data-ai-type="product"
  data-ai-role="current"
  data-ai-name="Kézzel varrt bőrtáska, barna"
  data-ai-price="34 900 Ft"
  data-ai-old-price="39 900 Ft"
  data-ai-image="/kepek/bortaska-barna.jpg"
  data-ai-url="/termek/bortaska-barna"
  data-ai-meta="Anyag: marhabőr; Méret: 38 × 28 cm"
>
  <!-- a meglévő termék HTML-ed változatlanul maradhat itt -->
</div>

2. módszer: a meglévő elemek megjelölése

Ha a név, az ár és a leírás már ott van a HTML-ben, elég a megfelelő elemre tenni egy data-ai-field attribútumot. A rendszer az elem szövegét olvassa ki. Ez listaoldalon a legkényelmesebb, mert a sablon minden terméknél ugyanígy rajzolja ki.

Termékkártya egy listaoldalonHTML
<article data-ai-item="penztarca-barna" data-ai-role="alternative">
  <a href="/termek/penztarca-barna">
    <img src="/kepek/penztarca.jpg" alt="Bőr pénztárca">
  </a>
  <h3 data-ai-field="name">Bőr pénztárca, barna</h3>
  <p data-ai-field="price">12 900 Ft</p>
  <p data-ai-field="description">Kártyatartóval, 8 rekesszel.</p>
</article>

Az összes attribútum

AttribútumBelső elem megfelelőjeJelentés
data-ai-item–Kötelező. Az elem azonosítója. Ez jelzi, hogy a doboz egy termék vagy szolgáltatás.
data-ai-namedata-ai-field="name"Név. Kötelező, attribútumban vagy belső elemként.
data-ai-type–product, service, event, property, course, offer, article
data-ai-role–current, alternative, upsell, related, catalog
data-ai-pricedata-ai-field="price"Ár, ahogy megjelenjen.
data-ai-old-pricedata-ai-field="old-price"Korábbi ár (áthúzva).
data-ai-descriptiondata-ai-field="description"Rövid leírás.
data-ai-badgedata-ai-field="badge"Kis címke, pl. Akció.
data-ai-availabilitydata-ai-field="availability"Elérhetőség.
data-ai-metadata-ai-field="meta"Tulajdonságok ; jellel elválasztva.
data-ai-imagedata-ai-field="image" egy <img> elemen, vagy az első <img>Kép.
data-ai-urldata-ai-field="url" egy <a href> elemen, vagy az első <a href>Az elem oldala.

JSON blokk vagy attribútumok?

  • Attribútumok: ha a sablonod már kirajzolja a termékeket (kategóriaoldal, ajánló sáv), és nem akarsz külön adatot előállítani.
  • JSON blokk: ha az oldalon nem látszó információt is átadnál (pl. kiegészítő termékek, oldalankénti javasolt kérdések, kinézet felülírása).
  • A kettő együtt is használható: a JSON blokk elemei élveznek elsőbbséget, az azonos azonosítójú attribútumos elemek nem duplikálódnak.

Gyakori kérdések

Elég, ha csak az azonosítót és a nevet adom meg?

Igen, ez a minimum. Ilyenkor a rendszer az elemen belüli első képet és linket is megpróbálja használni. Ár nélkül az AI nem mond árat, hanem kapcsolatfelvételt ajánl, ha rákérdeznek.

Megváltoztatják az attribútumok a weboldalam kinézetét?

Nem. A data- kezdetű attribútumok láthatatlanok, a böngésző és a keresők figyelmen kívül hagyják őket.

Elakadtál? Kérdezd meg az AI-t erről az oldalról.

A gomb megnyitja az AI-t, és beírja a kérdést az oldal lényegével és a kódokkal együtt.

ChatGPTClaude