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-itemattribú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.
1. módszer: minden adat attribútumban
<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.
<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útum | Belső elem megfelelője | Jelenté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-name | data-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-price | data-ai-field="price" | Ár, ahogy megjelenjen. |
data-ai-old-price | data-ai-field="old-price" | Korábbi ár (áthúzva). |
data-ai-description | data-ai-field="description" | Rövid leírás. |
data-ai-badge | data-ai-field="badge" | Kis címke, pl. Akció. |
data-ai-availability | data-ai-field="availability" | Elérhetőség. |
data-ai-meta | data-ai-field="meta" | Tulajdonságok ; jellel elválasztva. |
data-ai-image | data-ai-field="image" egy <img> elemen, vagy az első <img> | Kép. |
data-ai-url | data-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.