Magento layout fejlesztés alapok

A layout felépítése

A layout definíciók mindig egy adott modulhoz kapcsolódnak. A modul config.xml fájljában adhatók meg az alábbi módon vásárlói oldalon:

 <frontend>
<layout>
<updates>
<aionmodul module=”Aion_Modul”>
<file>aion_modul.xml</file>
</aionmodul>
</updates>
</layout>
</frontend>

Illetve admin oldalon:

<adminhtml>
<layout>
<updates>
<aionmodul>
<file>aion_modul.xml</file>
</aionmodul>
</updates>
</layout>
</adminhtml>

Az <updates> tagen belüli tag egy egyedi név kell, hogy legyen.

Mindkét esetben látszik, hogy a <file> tagen belül kell meghatározni, hogy mi a neve a layout fájlnak. A layout fájlokat az app/design/frontend/[csomag neve]/[téma neve]/layout, illetve az app/design/adminhtml/[csomag neve]/[téma neve]/layout könyvtárakban kell keresni.

Az XML fájlban az alábbi tagek között kell megadni, hogy milyen layout handler-re vonatkozik az utasítás:

<layout version=”0.1.0″> 

és

</layout>

 

 

Layout handle funkciója

A block definiciók mindig egy jól meghatározott handle-ön belül találhatóak. Egy layout handle több block összeségét jelöli névvel elnevezve. A default layout handle minden oldalhoz hozzáadódik az adott scope-ban. A főoldal az alábbi layout handle-ök alapján épül fel:

  1. default
  2. cms_page
  3. STORE_default
  4. THEME_frontend_rwd_default
  5. cms_index_index
  6. page_two_columns_right
  7. customer_logged_out
  8. cms_menu

 

Valóban, ehhez az oldalhoz is hozzáadódott a default handle. Betöltődik még a cms_page, cms_index_index, cms_menu handle is, amely jól mutatja, hogy a főoldal is egy CMS oldal. Ugyanez a lista egy login oldalon az alábbi módon néz ki:

  1. default
  2. STORE_default
  3. THEME_frontend_rwd_default
  4. customer_account_login
  5. customer_logged_out

 

A 4. handle meghatározza, hogy most jelenleg a customer front name, account controller és login action szolgálja ki az oldalt. A főoldal esetén ez a cms front name, index controller és index action.

 

layout magento szerkezet

Layout elemek elhelyezése a Fradi webshopnál

 

Block-ok funkciója

A fenti példákban érintőlegesen szó esett már a block-okról, de most nézzük meg részletesebben, hogy mik a block-ok Magento-ban. A következő block típusok vannak a Magento-ban:

  • core/template: Ez a block típus a template-ek rendeléséért felelős. A block-ok többsége core/template típusú.
  • page/html: Ez egy core/template-ből származtatott block típus. Ez határozza meg a szülő block-ot, minden más block a page/html „gyereke” (child block).
  • page/html_head: A HTML oldal HEAD részéért felelős block típus. Segítségével a JavaScript, CSS stb. elemeket lehet definiálni.
  • page/html_header: Az oldal fejlécének a megjelenítéséért felelős. Itt van beállítva a webáruház logója, felső linkek (top links) stb.
  • page/template_links: Ez a block típus link listák létrehozására alkalmas. A linkek alapértelmezetten a fejlécben és a láblécben vannak megjelenítve a page/template_links block segítségévével.
  • core/text_list: Néhány oldalelem (content, left sidebar, right sidebar) a core/text_list segítségével van megjelenítve. Amikor ezek a block típusok kirenderelődnek, akkor az összes gyerek eleme is automatikusan kirenderelődik. Még egy fontos tulajdonsága a core/text_list típusú block-nak, hogy nincs template-je.
  • page/html_wrapper: Ez a block típus más elemek beburkolására alkalmas. Alapból a <div> taget használja.
  • page/html_breadcrumbs: Ezzel a block típussal a breadcrumb-okat lehet megjeleníteni az oldalakon.
  • page/html_footer: A lábléc megjelenítéséért felelős block típus, amiben alapértelmezetten a szerzői jog megnevezése, a lábléc linkek stb. helyezkednek el.
  • core/messages: Ez a block felel az üzenetek megjelenítéséért. Egy üzenet lehet hiba, sikeres vagy megjegyzés típusú.
  • page/switch: Ez a block típus a nyelvválasztási legördülő megjelenítéséért felel.

 

Természetesen ezek a block típusok csupán az alapértelmezett típusok, ettől eltérőek is lehetnek attól függően, hogy az adott dizájn téma vagy modul milyen más típusokat követel meg.

Minden block-nak van kötelezően egy típusa és neve. Nem kötelező a block template és az alias.

Lehet hivatkozni már létező blockok-ra a reference tag-gel. Ha van egy nagyobb block-unk és több layout fájlból szeretnénk elemeket megjeleníteni benne, akkor a reference tag-et kell használnunk. Nézzünk egy példát:

 <reference name=”right”>
<block type=”core/text” name=”right.text”>Bal oldalt megjelenő szöveg</block>
</reference>

 

A „right” nevű block-hoz adtunk egy új right.text nevű block-ot.

Ez a funkció nagyon hasznos, amikor egy meglévő oldalt szeretnénk módosítani a saját modulunkban. Lehetőségünk van már hozzáadott block-ot eltávolítani is. Nézzünk erre is egy példát:

 <reference name=”right”>
<remove name=”right.text” />
</reference>

 

Itt pont a fenti példában létrehozott right.text nevű block-ot távolítottuk el a remove tag-gel.

Ha nem tudjuk, hogy mi a neve az adott block-nak vagy melyik template felelős a megjelenítésért, akkor nagyon hasznos lehet bekapcsolni a template path hint-et. Ezt az adminban a System -> Configuration -> Developer -> Template Path Hints opciót IGEN-re kell állítani. Fontos megjegyezni itt, hogy ennek a beállításnak nincs globális beállítási lehetősége, csak website nézetben lehet beállítani. Ha szeretnénk látni a block-ok osztályát is, akkor ugyanezen a menüpontban az Add Block Names to Hints opciót állítsuk IGEN-re. Éles oldalnál vigyázzunk ezzel a beállítással, mert egy vásárló az alábbi képtől lehet, hogy megijed:

 

magento layout Template Path Hints nézet

 

Bal oldalt a template elérési útvonala, jobb oldalt pedig a block neve látható.

Lehetőségünk van csak nekünk megjeleníteni a template path hint-eket. Ilyen esetben a saját gépünk IP címét írjuk be az Allowed IPs mezőbe a System -> Configuration -> Developer menüpontban.

 

CSS és JavaScript fájlok kezelése layout-ból

Sok esetben szükségünk van külső erőforrás (CSS és JavaScript) behívására az oldalon. Ezt is a layout XML-ből lehet könnyedén elvégezni az alábbi tag-gel:

 <block type=”page/html_head” name=”head” as=”head”>
<action method=”addJs”><script>prototype/prototype.js</script></action>
</block>

<block type=”page/html_head” name=”head” as=”head”>
<action method=”addCss”><stylesheet>css/widgets.css</stylesheet></action>
</block>

Az első példában a prototype.js-t húztuk be a js könyvtárból, a második példában pedig a skin könyvtárból húztuk be a widgets.css fájlt.

 

Layout update használata

Új handle hozzáadása egy meglévő handle-höz az update XML tag-gel történik. Tegyük fel, hogy a cms_index_index layout handle content block-jához szeretnénk egy hello layout handle-t hozzáadni, amit az alábbi módon lehet megtenni:

<cms_index_index>
<update handle=”hello” />
</cms_index_index>

Ilyenkor a <hello> handle összes módosítása a főoldalra (<cms_index_index> handle) is érvényes lehet. Ez jól jön, hogyha több oldalra is ki szeretnénk rakni mondjuk egy kapcsolat formot, mivel nem kell minden egyes oldalba beillesztenünk a kapcsolat form block definicióját, hanem elég egy új handle-be beletenni és azt a handle-t a kívánt oldalakon behívni az update tag-gel (paranccsal).

Jellemző, hogy új design témák esetén a fejlesztők nem a már meglévő layout fájlokra hivatkoznak a local.xml-ben, hanem egy az egyben lemásolják azokat az ő design téma könyvtárukba. Ez a módszer elég rossz és egyáltalán nem javasolt, mert ha kijön egy olyan frissítés, ami a layout fájlokat is érinti, akkor az nem fog érvényesülni, mert az új design témában felül lesz az írva a frissítés előtti állapotra. Belátom, hogy ez a módszer kicsit körülményesebb és nem mindig lehet vele mindent megcsinálni, de erre kell törekedni.

 

Végszó

A fenti példákból is látszik, hogy a layout XML egy központi része a Magento-nak, ezért fontos azt jól ismerni. Remélem, hogy ezzel a rövid bemutatóval hasznos útmutatót tudtam nyújtani minden fejlesztőnek. Amennyiben kérdésed, van ne habozz feltenni, készséggel válaszolunk rá.

 

0 válaszok

Hagyjon egy választ

Want to join the discussion?
Feel free to contribute!

Vélemény, hozzászólás?

Az email címet nem tesszük közzé.