Pametni element

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.

  1. V urejevalnik najprej dodamo strukturo s tremi stolpci (zaboji).
  2. V prvi zaboj dodamo elemente, ki jih potrebujemo (besedilo, dva slikovna elementa, tri elemente besedila) – tako naredimo “okostje” kartice izdelka.

 

  1. 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«.

 

  1. 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).


 

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


Pravila za vsak zavihek so konfigurirana preko standardnega mehanizma iskanja HTML elementov preko CSS selektorjev in atributov. Več o tem si lahko preberete tukaj.

 

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.


Več informacij o tem, kaj je dinamična spletna stran, lahko najdete tukaj oz. s klikom na ikono vprašaja v urejevalniku.

 

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

 

Za spremenljivko URL možnost »Zunanja pravila« ni na voljo, ker je ravno povezava do spletne strani naš vir pridobivanja podatkov.

 

2. Spremenljivka za Sliko izdelka

Nadaljujmo s pravilom pridobivanja vrednosti za sliko izdelka.

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

 

*Č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 iz spletnega mesta.

 

  1. Nadaljujemo z Notranjim pravilom.

Na zavihku Notranja pravila določimo:

CSS izbirnik elementa 1: #main-image

Atribut: src


Zaradi tega pravila bo dobljena vrednost slike uporabljena za atribut “src“, ki se nahaja v elementu “Slika“.

 

3. Spremenljivka za Ime izdelka

Nadaljujmo s pravilom pridobivanja vrednosti za Ime izdelka.

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

 

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

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

 

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

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

 

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

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

 

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

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

 

  1. Nadaljujemo z Notranjim pravilom.

Na zavihku Notranja pravila določimo:

CSS izbirnik elementa 1: #logo

Atribut: src


Zaradi tega pravila bo dobljena vrednost slike uporabljena za atribut “src“, ki se nahaja v elementu “Slika“.

 

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.