Változók

A kódok két részre oszthatók. A CSS stíluslapok teljes egészében átírhatók, azaz úgy variáljuk az egyes weblap elemek megjelenését, ahogy akarjuk.

A HTML kódok átírásánál már nem kapunk ekkora szabadságot, ugyanis egy webáruház lapján nagyon sok dinamikus, "röptében" generált elem található, melyeket nem mi írunk be közvetlenül a HTML kódba, hanem maga a webáruház program hoz létre. Ezek a dinamikus elemek egy Viltor sablon HTML kódjában változók formájában jelennek meg, melyeket "{{" és "}}" határolójelek vesznek körül. Lássunk erre egy példát.

Egyes sablonokban beépített elem a TOP termékek, azaz a leginkább vásárolt termékek listája, általában az áruház oldalsó részén jelenik meg. Ennek kódja a sablon HTML lapján valami ilyesmi:

<div id="blokk_cim_top_termekek" class="blokk_cim">TOP termékek</div>
<ul id="blokk_lista_top_termekek" class="blokk_lista">
  {{ blokk.toptermekek }}
</ul>

A kód első fele, azaz a "blokk_cim_top_termekek" div egy egyszerű statikus elem, mely egy címet jelenít meg a lista fölött. Teljesen átírható, ha mondjuk a "TOP termékek" szöveg nem tetszik nekünk, megváltoztathatjuk "Leginkább keresett termékek"-re, az áruházban pedig az új szöveggel jelenik meg a cím.

Majd jön egy rendezetlen lista elem (<ul> … </ul>), és ebben egy "{{ blokk.toptermekek }}" szöveg. Ez utóbbi egy változó, amely két kapcsos zárójellel kezdődik és végződik. Ha a Viltor értelmezője ezzel a változóval találkozik a kódban, akkor az eddigi rendelések alapján megnézi, hogy melyek voltak a leginkább vásárolt termékek és azokból egy HTML listát készít, melyet aztán a változó helyére behelyettesít, pl.:

<li id="blokk_lista_top_termekek_51_elem">
  <a class="blokk_lista_termek_kep_link" href="?mod=termeklap&id=51">
  <img src="feltolt/termek/kep/k_51_1.jpg" alt="1. termék" /></a>
  <a class="blokk_lista_termek_nev_link" href="?mod=termeklap&id=51">1. termék</a>
  <p class="blokk_lista_uj_ar">100 Ft</p>
  <div class="blokk_lista_termek_ajandekpont">100 ajándékpont</div>
</li>
<li id="blokk_lista_top_termekek_52_elem">...</li>
<li id="blokk_lista_top_termekek_53_elem">...</li>

Az adott sablonba bárhová beszúrhatjuk a "{{ blokk.toptermekek }}" változót, az egy ilyen listát fog eredményül adni.

Figyelem! A fenti kódban látható, hogy az egyes "); ?> elemeknek külön egyedi azonosítója (id) van. Ez azért van így, hogy ha igény lenne rá, akkor akár az egyes lista-elemeket is külön-külön tudjuk formázni a CSS stíluslapon. Ennek persze megvan a hátránya is: szabályos kódot csak úgy írhatunk, ha a "{{ blokk.toptermekek }}" változó egyszer szerepel egy lapon, egyébként több lista elemnek ugyanaz lesz az azonosítója.

Azt, hogy az egyes változók pontosan milyen kódot hoznak létre a weblapon, könnyen megláthatjuk, ha egy böngészőben belenézünk a webáruház forráskódjába, illetve a következő táblázatból is tájékozódhatunk.