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

 

24 válaszok
  1. Free Inpatient Rehab says:

    Substance Abuse Rehab Centers Near Me http://aaa-rehab.com Drug Rehab http://aaa-rehab.com Luxury Alcohol Rehab
    http://aaa-rehab.com

  2. Appeami says:

    The essay editing service reviews target at researching on the best editing and proofreading services in the market and help the students to use their services and gain genuine results.
    paper writing services Wrap a trip to write an art master piece fob price of cards leaflet letterhead envelope paper box semenanjung malaysia, lamination, oem bags you are a week.

  3. Estike says:

    Its editor made the fewest changes of any of the services and left only three comments, one of which was about whether the use of indentations and double-spacing was appropriate.
    write my papers When you try to explain to someone that why you deserve this scholarship, try focusing on your achievements that reflect either who is giving the scholarship or what they want to promote.

  4. VesDauts says:

    Modern higher education is extremely demanding, professors expect learners to turn in high-quality assignments weekly if not often, and mind that an average student has about 5-6 important courses simultaneously. write my paper This is mainly due to the fact that every type of paper has a particular format and parameters that should be followed to get excellent grades on which the students stake all their futures.

  5. gepaymn says:

    We never sell their personal details to any of the third party marketing companies that a lot of other writing companies sell their data to, and we do not disclose any information of a personal nature to our writers or to anyone else. paper writing service During our rewriting practice, we came across many stories of young writers with a half-page description of how a bee flies around the room, how to cook food, how to elect a president describing their feelings.

  6. Fruinge says:

    Independence day essay short lines write an essay about computer education pcra essay competition topic qualities of a good school essay, pros and cons of gun control essay essay independence day 200 words. custom paper Please take note that to buy research paper of the highest quality possible, you have to make us trust that you are ready to let us work on it, which you can do by paying.

  7. accuff says:

    Club now brings you under the sun, where the girls are in bikinis, muscles are ripped and oiled up and the speakers are pumping bass. thewriteacademy.org Do-natus dixit, gerundia esse verba pro co, quod habent signifi-cationem et constructionem verborum, a quibus descendunt.

  8. beleKaro says:

    Students can get automatically generated feedback in order to improve their solutions before the submission deadline. thewriteacademy.org The caster channels a arcane storm, its missiles increasing in velocity and damage as they travel further.

  9. NeurlBub says:

    Eigenheiten einer selbst nicht akzeptiert ist es zwar wert zu trauern aber man muss loslassen und sich darauf besinnen dass man auch jemanden finden kann der einen versteht. mandala centar Berlin have enjoyed the top table before back-to-back relegations and promotions between 2009 and 2013.

  10. Stulgat says:

    We appreciate when buying online getting the ring size right is not always straightforward, so to make it a little easier you can download our free ring sizer. thewriteacademy A chic rose gold plated open ring with a focal round cultured freshwater pearl and a vibrant green emerald gemstone.

  11. inputT says:

    Ages many people have given tribute to the sapphire due to both medical and spiritual healing properties. gates of inanna ranch If you have entered your vehicle model, the cost will be calculated according to its consumption levels.

  12. TahThata says:

    Bastards pushing their distinctive sound forward with their mosteclectic, energetic collection thus far. frontechnigeria Skorpion includes ample storage capacity, an aerated livewell, and loads of fish-working space to keep you on top of your game and within your budget.

  13. enginge says:

    The schedule of subarachnoid years in advertising to 2 impotency and 5 viagra people demonstrates that the two firms have clomid diagnosis disorders. buy cialis online Do not throw away any medicines via wastewater or household waste. Ask your pharmacist how to throw away medicines you no longer use. These measures will help protect the environment.

Trackbacks & Pingbacks

  1. hydroxychloroquine 200 mg tablets

    Magento layout fejlesztés alapok – aionhills.com

  2. albuterol inhaler

    Magento layout fejlesztés alapok – aionhills.com

  3. viagra in action szerint:

    viagra in action

    Magento layout fejlesztés alapok – aionhills.com

  4. chloroquine antiviral

    Magento layout fejlesztés alapok – aionhills.com

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