Kaj je pametni element?
Pametni element je struktura, zaboj ali polna vrstica, v katerem so prisotni osnovni elementi, kot so slika, besedilo, gumb in podobno. Ključna lastnost pametnih elementov je, da se njihova vsebina (slika, besedilo, gumb, ipd.) ne nastavi v urejevalniku, ampak se prekopira neposredno iz spletne strani ali spletne trgovine.
Vsebino, v kateri bo naslov izdelka, slika, cena, opis in podobno, nastavite samo prvič, nato pa vnesete samo povezavo (URL) do spletne strani, iz katere se potem podatki prekopirajo.
S tem, da ustvarite npr. 3 kartice za izdelke, boste bistveno prihranili čas, kar pomeni le 3 različne povezave – preostalo naredi sistem sam!
Oglejmo si vse prednosti pametnega elementa na primeru.
Primer ustvarjanja pametnega zabojnika za kartico izdelka
Na primeru spletne trgovine ACTIONMAMA bomo pogledali, kako se ustvari kartica izdelka, ki vsebuje 6 elementov, in sicer višino popusta, logotip, sliko, ter naziv izdelka, staro in novo ceno.
- V urejevalnik najprej dodamo strukturo s tremi stolpci (zaboji).
- V prvi zaboj dodamo elemente, ki jih potrebujemo (besedilo, dva slikovna elementa, tri elemente besedila) – tako naredimo “okostje” kartice izdelka.
- Nato izberemo zaboj z elementi (za to kliknemo na modro oznako desno zgoraj, kjer piše “Zaboj“), v urejevalniku na desni pa potem izberete zavihek “Podatki” in kliknete na gumb “Začni“, da aktivirate lastnost Pametnih elementov.
Prikaže se urejevalnik, v katerem:
- Konfiguriramo vsa pravila za pridobivanje vrednosti – uporabimo jih prek spremenljivk v želene elemente znotraj našega newslettra. Za to uporabimo zavihek »Konfiguracija«;
- Pregledamo in si ročno prilagodimo (če želimo) prejete vrednosti konfiguriranih spremenljivk iz spletne strani v zavihku »Videz«.
- Nadaljujemo z dodajanjem spremenljivk.
Takoj, ko aktivirate pametno lastnost za kateri koli element, se najprej privzeto ustvari spremenljivka URL (te ni mogoče izbrisati).
S klikom na ikono za dodajanje spremenljivk (gumb +), se prikaže seznam najbolj priljubljenih, ki se nanašajo na Izdelke ali za Blog.
Ker smo nameravali izdelati kartico z višino popusta, logotipom, sliko, ter nazivom izdelka, staro in novo ceno, dodamo (iz razdelka Izdelek) naslednje spremenljivke:
- Ime
- Slika
- Cena
- Stara cena
Potrebujemo torej še dve spremenljivki, in sicer za višino popusta, ter logotip izdelka.
Novo spremenljivko ustvarimo tako, da izberemo zadnjo možnost – Spremenljivka.
Tako ustvarimo novo spremenljivko, katero pa moramo tudi označiti in poimenovati.
Vnesemo torej oznako spremenljivke (npr. p_discount), ter ime spremenljivke (npr. Popust).
Potrebujemo še zadnjo spremenljivko za logotip izdelka – še enkrat izberemo zadnjo možnost (Spremenljivka) in ji dodamo oznako (npr. p_logo), ter ime (npr. Logotip).
- Nadaljujemo s konfiguracijo spremenljivk
Potrebno je konfigurirati pravila za pridobivanje vrednosti za spremenljivke, ki smo jih dodali, in njihovo uporabo v našem pametnem elementu.
Da lahko to storimo, gremo na razdelek Pravila ujemanja, ki je sestavljen iz dveh zavihkov:
- Notranji – Tukaj določimo pravila (CSS izbirnik), kje točno moramo uporabiti že pridobljene vrednosti spremenljivk v našem pametnem elementu v newsletterju.
- Zunanji – Tukaj določimo pravila (CSS izbirnik), od kod je potrebno pridobiti vrednosti spremenljivk s spletnega mesta oz. spletne trgovine.
Poglejmo podrobneje, kako nastaviti vsako spremenljivko iz našega primera:
1. Spremenljivka URL
Ta spremenljivka ima polje »Dinamična stran«, ki je privzeto izklopljeno.
Če je spletna stran, iz katere želite dobiti vrednosti za katero koli spremenljivko pametnih elementov, dinamična (se naloži samo preko JavaScript-a) – s klikom označite to polje, da se obarva modro.
Ker potrebujemo povezavo do spletne strani oz. trgovine v pametnem elementu, v zavihku »Notranja pravila« predpišemo, da je vrednost spremenljivke nastavljena na vse elemente:
CSS izbirnik elementa 1: a
Atribut: href
2. Spremenljivka za Sliko izdelka
Nadaljujmo s pravilom pridobivanja vrednosti za sliko izdelka.
- Začeli bomo z Zunanjim pravilom.
Da pridobimo vrednosti, ki jih potrebujemo, gremo najprej na spletno stran, kjer se izdelek nahaja.
Z miško se postavimo na sliko, kliknemo z desno tipko in izberemo »Preglej element« (ali v določenih brskalnikih »Preveri« / »Inspect«).
Odpre se nam konzola, v kateri bomo našli CSS selektor z atributi.
V tem primeru je bilo pravilo za pridobitev slike:
CSS izbirnik: .detail_slika a img
Atribut: src

- Kliknemo na gumb + Dodaj modifikator.
- V polje Modifikator 1 dodamo znak ^.
- V polje Zamenjava pa vnesemo začetno spletno stran naše trgovine (npr. https://www.actionmama.com).
- Označimo tudi, da gre za Globalno zamenjavo.
Sedaj smo torej nastavili Zunanja pravila za pridobivanje slike iz spletnega mesta.
- Nadaljujemo z Notranjim pravilom.
Na zavihku Notranja pravila določimo:
CSS izbirnik elementa 1: #main-image
Atribut: src
3. Spremenljivka za Ime izdelka
Nadaljujmo s pravilom pridobivanja vrednosti za Ime izdelka.
- Zunanje pravilo
Da pridobimo vrednosti, ki jih potrebujemo, gremo zopet na spletno stran, kjer se izdelek nahaja.
Z miško se postavimo na ime izdelka, kliknemo z desno tipko in izberemo »Preglej element« (ali v določenih brskalnikih »Preveri« / »Inspect«).
Odpre se nam konzola, v kateri bomo našli CSS izbirnike z atributi.
V tem primeru je torej Zunanje pravilo za pridobitev imena:
CSS izbirnik: .detail_naziv
Atribut: (pustimo prazno polje)
Sedaj smo torej nastavili Zunanja pravila za pridobivanje Imena/naziva iz spletnega mesta.
- Nadaljujemo z Notranjim pravilom.
Na zavihku Notranja pravila določimo:
CSS izbirnik elementa 1: .name
Atribut: (pustimo prazno polje)
4. Spremenljivka za Ceno izdelka
Nadaljujmo s pravilom pridobivanja vrednosti za Ceno izdelka.
- Zunanje pravilo
Da pridobimo vrednosti, ki jih potrebujemo, gremo zopet na spletno stran, kjer se izdelek nahaja.
Z miško se postavimo na ceno izdelka, kliknemo z desno tipko in izberemo »Preglej element« (ali v določenih brskalnikih »Preveri« / »Inspect«).
Odpre se nam konzola, v kateri bomo našli CSS izbirnike z atributi.
V tem primeru je bilo pravilo za pridobitev cene:
CSS izbirnik: .detail_cena_value
Atribut: (pustimo prazno polje)
Sedaj smo torej nastavili Zunanja pravila za pridobivanje Cene iz spletnega mesta.
- Nadaljujemo z Notranjim pravilom.
Na zavihku Notranja pravila določimo:
CSS izbirnik elementa 1: .price
Atribut: (pustimo prazno polje)
5. Spremenljivka za Staro ceno izdelka
Nadaljujmo s pravilom pridobivanja vrednosti za Staro ceno izdelka.
- Zunanje pravilo
Da pridobimo vrednosti, ki jih potrebujemo, gremo zopet na spletno stran, kjer se izdelek nahaja.
Z miško se postavimo na staro ceno izdelka, kliknemo z desno tipko in izberemo »Preglej element« (ali v določenih brskalnikih »Preveri« / »Inspect«).
Odpre se nam konzola, v kateri bomo našli CSS izbirnike z atributi.
V tem primeru je bilo pravilo za pridobitev stare cene:
CSS izbirnik: .detail_staracena
Atribut: (pustimo prazno polje)
Sedaj smo torej nastavili Zunanja pravila za pridobivanje Stare cene iz spletnega mesta.
- Nadaljujemo z Notranjim pravilom.
Na zavihku Notranja pravila določimo:
CSS izbirnik elementa 1: .old-price
Atribut: (pustimo prazno polje)
6. Spremenljivka za Popust na izdelek
Nadaljujmo s pravilom pridobivanja vrednosti za Popust izdelka.
- Zunanje pravilo
Da pridobimo vrednosti, ki jih potrebujemo, gremo zopet na spletno stran, kjer se izdelek nahaja.
Z miško se postavimo na popust izdelka, kliknemo z desno tipko in izberemo »Preglej element« (ali v določenih brskalnikih »Preveri« / »Inspect«).
Odpre se nam konzola, v kateri bomo našli CSS izbirnike z atributi.
V tem primeru je bilo pravilo za pridobitev vrednosti popusta:
CSS izbirnik: .detail_popust_icon
Atribut: (pustimo prazno polje)
Sedaj smo torej nastavili Zunanja pravila za pridobivanje vrednosti Popusta iz spletnega mesta.
- Nadaljujemo z Notranjim pravilom.
Na zavihku Notranja pravila določimo:
CSS izbirnik elementa 1: .discount
Atribut: (pustimo prazno polje)
7. Spremenljivka za Logotip izdelka
Nadaljujmo s pravilom pridobivanja vrednosti za Logotip izdelka.
- Zunanje pravilo
Da pridobimo vrednosti, ki jih potrebujemo, gremo zopet na spletno stran, kjer se izdelek nahaja.
Z miško se postavimo na logotip izdelka, kliknemo z desno tipko in izberemo »Preglej element« (ali v določenih brskalnikih »Preveri« / »Inspect«).
Odpre se nam konzola, v kateri bomo našli CSS izbirnike z atributi.
V tem primeru je bilo pravilo za pridobitev slike logotipa:
CSS izbirnik: .dfilter_slika a img
Atribut: src
*Če povezava ni absolutna (torej se ne začne s »http://…«) ampak je relativna (začne se »/…«), kadar kot spremenljivko dodajamo sliko, je potrebno dodati še modifikator.
- Kliknemo na gumb + Dodaj modifikator.
- V polje Modifikator 1 dodamo znak ^
- V polje Zamenjava pa vnesemo začetno spletno stran naše trgovine (npr. https://www.actionmama.com).
- Označimo tudi, da gre za Globalno zamenjavo.
Sedaj smo torej nastavili Zunanja pravila za pridobivanje slike Logotipa iz spletnega mesta.
- Nadaljujemo z Notranjim pravilom.
Na zavihku Notranja pravila določimo:
CSS izbirnik elementa 1: #logo
Atribut: src
Urejanje elementov
Sedaj, ko smo nastavili vsa pravila za pridobivanje podatkov iz spletne strani, je čas, da uredimo elemente v naši kartici izdelka.
Nastavimo torej odmike, poravnavo, barvo, velikost, tip besedila in ostalih elementov.
Dodajanje CSS izbirnikov elementa v HTML kodo
Vsem elementom, ki jih bomo uporabili v naši kartici izdelka, smo dodali Notranja pravila ujemanja.
Zato je potrebno na tem mestu v HTML kodo naše kartice izdelka dodati še CSS izbirnike elementa, ki smo jih določili na prejšnjem koraku.
- V kolikor ima CSS izbirnik elementa za predznak lojtro (#), potem v HTML kodo vnesemo oznako id.
- V kolikor pa smo za CSS izbirnik elementa za predznak vstavili piko (.), pa je potrebno v našo HTML kodo vnesti oznako class.
Najprej torej označimo naš Pametni zaboj in zgoraj izberemo Urejevalnik HTML kode.
HTML koda z našimi elementi:
HTML koda z dodanimi CSS izbirniki elementa:
Dodajanje povezave do izdelka
Ko smo dodali CSS izbirnike elementov za notranja pravila ujemanja, lahko pričnemo z dodajanjem povezave do izdelka.
Ko dodamo povezavo, se s pomočjo CSS izbirnikov in atributov prenesejo vsi željeni podatki.
Našo kartico izdelka še malce stilsko dodelamo in že je pripravljena za uporabo.
Dodatne kartice izdelkov
Ko imamo našo kartico enkrat pripravljeno, je ustvarjanje dodatnih kartic sila enostavno:
- Označimo naš Pametni zaboj
- Izberemo možnost Kopiraj
- Kopiran element prenesemo v sosednji zaboj
- Kliknemo na Pametni zaboj
- V urejevalnik na desni strani vnesemo povezavo do drugega izdelka
- Počakamo nekaj trenutkov, da sistem pridobi nove vrednosti
Kartico potem še stilsko uredimo in nova kartica izdelka je pripravljena.
Ko imamo enkrat pripravljeno strukturo z našimi tremi karticami izdelkov, je najboljše, da strukturo kar shranimo, saj jo lahko tako uporabimo in prilagodimo v katerem koli newslettru.