Essentiële ‘theme’ vaardigheden voor het aanpassen van de look&feel van een Magento webshop Duur: 16 uur Doelgroep: Deze cursus is geschikt voor front-end ontwikkelaars welke de Magento look&feel aanpassen. Studenten dienen ervaring te hebben met het aanpassen van complexe websites. Vereisten: Studenten moeten een goede kennis hebben van HTML&CSS. Studenten dienen ervaring the hebben met het rechtstreeks in de code aanpassen van HTML & CSS zonder WYSIWYG editor. Ervaring met FTP is een vereiste. Enige ervaring met PHTML en PHP is handig, maar niet vereist. Daarnaast dient de student al enige ervaring the hebben met de Magento functionaliteiten. Materialen: Elke student dient zelf een laptop mee te brengen met daarop een tekst editor en een FTP client. Een Magento 1.7 versie zal voor oefeningen beschikbaar worden gesteld op het internet. Doel Deze cursus geeft een goede introductie tot het Magento template systeem en het toepassen de beste manier om aanpassing te realiseren. De cursus geeft voorbeelden en hands-on oefeningen. Studenten zullen de fundamenten van Magento templating systeem begrijpen en weten hoe de thema’s werken en hoe de componenten zoals lay-outs, page templates en block templates aangepast kunnen worden. Cursus overzicht Magento template systeem – architectuur en componenten, uitleg over de werking en structuur van het template systeem, de componenten en hoe deze samenwerken Werken met thema’s – Leer hoe een thema toegepast wordt, inclusief de directory structuur, ‘fallback’ methode en website bereik. ‘best practice’ theme aanpassingen – Leer wat wel en niet aangepast kan worden op thema niveau, incl. het aanpassen wat zonder thema aanpassingen. Leer een goede manier om de website aan te passen. Werken met Pagina templates, lay-outs en block templates – Begrijp het doel, structuur en relatie van alle componenten van het Magento template systeem. Leer op welk niveau de templates het best aangepast kunnen worden. Maak een eigen ‘Default’ Theme – Leer hoe je zelf een ‘design package’ aanmaakt als startpunt voor het verdere ontwerp. Maak een module met aangepaste theme componenten - leer hoe je een aangepaste module met aangepaste lay-out kunt gebruiken in Magento. De webshop look&feel en functionaliteit aan te passen Nieuwe thema’s op een goede manier aan te maken, zodat updates later mogelijk zijn. Na deze cursus zijn de studenten in staat: De webshop look&feel en functionaliteit aan te passen Nieuwe thema’s op een goede manier aan te maken, zodat updates later mogelijk zijn.

1. MAGENTO CURSUS
Deel 2-1 templates

2. Michel Doens
 14 jaar ervaring
 PHP & ZEND
 Oprichter Sition
 Michel.doens@sitio
n.nl
 073-7110333
 www.linkedin.com/in
/micheldoens
 www.sition.nl

3. Sition
 Sition
 2000 opgericht
 Apps, Websites, Sh
ops
 Zend Framework
 OSCommerce
 Magento

4. Programma
 9:30-12:00
 Magento template
systeem
 Werken met thema’s
 12:00 – 12:45
 Lunch
 12:45-14:45
 Layout.xml
 15:00– 17:00
 Templates

5. Test website
 Cursus sites
 cursist1.sition.nl
 Naam: & wachtwoord:
 Database:

6. Thema’s maken & aanpassen
 Base of Basis Pakket
 app/design/frontend/base/default/
Bevalt alle layout en template
bestanden welke nodig zijn om de
core functionaliteiten van
magento te laten werken.
 skin/frontend/base/default/
Bevat een PAAR CSS en
Javascript files, welke de core
functionaliteiten ondersteunen.
Het bevat echter nit all CSS en
plaatjes welke nodig zijn om de
site te stylen omdat deze design
afhankelijk zijn en niet van
invloed zijn op de kern.
 Tips:
 Regel 1: Nooit het ‘base’
pakket nooit aanpassen!
 Regel 2: Geen custom
theme aanmaken in het
‘base’ pakket.

7. Thema’s maken & aanpassen
 Werking Fall-back
 Magento zoekt eerst in:
 app/design/frontend/custom_package/custo
m_theme/
 skin/frontend/custom_ pakket/custom_theme
 Niet gevonden? Magento kijkt in:
 app/design/frontend/custom_pakket/default
 skin/frontend/custom_pakket/default
 Nog niet gevonden? Magento kijkt in:
 app/design/frontend/base/default
 skin/frontend/base/default
 Nog niet gevonden? > foutmelding
 Tips:
 Regel 3: Maak altijd een
eigen pakket!
app/design/frontend/your_custom
_package/default and
skin/frontend/your_custom_packa
ge/default
 Regel 4: Kopieer niet alle
bestanden uit de base,
enkel die je wilt
aanpassen!

8. Thema’s maken & aanpassen
 Hoe starten?
 Default/blank
gebruiken
 Yoast blanco theme
 Opdracht: maak een eigen
pakket en leeg theme aan.

9. Thema’s maken & aanpassen
 Theme activeren  Opdracht: maak een eigen
pakket en leeg theme aan.

10. Thema’s maken & aanpassen
 Responsive?
 Nadeel: laadtijd!
 Oplossing: eigen
theme
 Tablet theme?
 Uitzondering
client/browsers

11. Thema’s maken & aanpassen
 Opties broswer agents o.a.:
 iPhone
 iPod
 BlackBerry
 Palm
 Googlebot-Mobile
 Mobile|mobile|mobi|
 Windows Mobile
 Safari Mobile
 Android
 Opera Mini

12.  Layout
 Templates
 Skin

13. Structuur & Content Blokken

14. Thema’s maken & aanpassen
 Layouts local.xml
 Cms blokken positioneren zoals aan/uit
schakelen
 Wisselen van template voor bebaalde
module of controller actie.
 Blokken op pagina’s toevoegen
 CSS/JS aan pagina’s toevoegen

15. Thema’s maken &
aanpassen:layout
 Layouts local.xml
 Basis
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
 /** local.xml
 * Local layout modifications for our local
theme
 * @category design
 * @package my_theme_default
 * @copyright Copyright (c) 2011
Magebase.
 */
 -->
 <layout version="0.1.0">
 ...

16. Thema’s maken &
aanpassen:layout
 Layouts local.xml
 Scripts / CSS toevoegen
 Toevoegen:
 Method = addItem
 Verwijderen
 Method = removeItem
 default>
 <reference name="head">
 <action method="addItem">
 <type>skin_js</type>
 <name>js/my_js.js</name>
 <params/>
 </action>
 <action method="addItem">
 <type>skin_css</type>
 <name>css/my_styles.css</name>
 </action>
 </reference>
 </default>

17. Thema’s maken &
aanpassen:layout
 Layouts local.xml
 Scripts / CSS toevoegen voorbeeld
 Toevoegen:
 Method = addItem
 Verwijderen
 Method = removeItem
 <default>
 <reference name="head">
 <block type="core/text"
name="google.cdn.jquery">
 <action method="setText">
 <text><![CDATA[<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4
.2/jquery.min.js"></script><script
type="text/javascript">jQuery.noConflict();</script>]]
>
 </text>
 </action>
 </block>
 </reference>
 </default>

18. Thema’s maken &
aanpassen:layout
 Layouts local.xml
 Label > soms van toepassing als
naam
 Reference > referentie naar reeds
aanwezig block
 Block > wordt gebruikt voor naam
nieuw block
 Remove > bestaand block
verwijderen, in combinatie met ‘name’
attribute
 Action > functie in de controller welke
uitgevoerd wordt. De actie die moet
worden uitgevoerd voor het
betreffende blok.
 Update > neemt bestaande definities
mee in nieuw blok.
 <default>
 <reference name="head">
 <block type="core/text"
name="google.cdn.jquery">
 <action method="setText">
 <text><![CDATA[<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/j
query.min.js"></script><script
type="text/javascript">jQuery.noConflict();</script>]]>
 </text>
 </action>
 </block>
 </reference>
 </default>

19. Thema’s maken &
aanpassen:layout
 Blokken aanpassen
 Deel 1
 Aantal kolommen aanpassen in lijsten
 <catalog_category_default>
 <reference name="product_list">
 <action method="setColumnCount">
 <count>3</count>
 </action>
 </reference>
 </catalog_category_default>
 <catalog_category_layered>
 <reference name="product_list">
 <action method="setColumnCount">
 <count>3</count>
 </action>
 </reference>
 </catalog_category_layered>

20. Thema’s maken &
aanpassen:layout
 Blokken aanpassen
 Deel 2
 Aantal kolommen aanpassen in lijsten
<catalogsearch_result_index>
 <reference
name="search_result_list">
 <action
method="setColumnCount">
 <count>3</count>
 </action>
 </reference>
 </catalogsearch_result_index>
 Aantal upsell producten:
 <catalog_product_view>
 <reference name="upsell_products">
 <action method="setItemLimit">
 <type>upsell</type>
 <limit>3</limit>
 </action>
 <action method="setColumnCount">
 <columns>3</columns>
 </action>
 </reference>
 </catalog_product_view>

21. Thema’s maken & aanpassen:
layout
 Ingelogd?
 <customer_logged_out>
 &
 <customer_logged_in>

22. Thema’s maken & aanpassen:
layout
 verwijderen van blokken
 Verwijderen:
 Optie 1.
<remove name="" />
[ Global context!]
 Optie 2.:
<action
method="unsetChild">
[ local context!]
 <default>
 <!-- remove the language and
store switcher and footer links
blocks, we won't use them -->
 <remove name="store_language"
/>
 <remove
name="store_switcher"/>
 <remove name="footer_links" />
 </default>

23. Thema’s maken & aanpassen:
layout
 Verplaatsen (en verwijderen)
van blokken
 Verwijderen:
 Optie 1. <remove name="" /> [ Global context!]
 Optie 2.: <action method="unsetChild"> [ local context!]
 <default>
 <!-- move the breadcrumb block from the top.bar child block back to the
template root
 <reference name="top.bar">
 <action method="unsetChild">
 <name>breadcrumbs</name>
 </action>
 </reference>

 <reference name="root">
 <block type="page/html_breadcrumbs" name="breadcrumbs"
as="breadcrumbs"/>
 </reference>

 </default>

24. Thema’s maken &
aanpassen:layout
Link toevoegen
 <default>
 <reference name="footer_links">
 <action
method="addLink”
translate="label title"
module="contacts"
ifconfig="contacts/contacts/enabled">
<label>Contact Us</label>
<url>contacts</url>
<title>Contact Us</title>
<prepare>true</prepare></action>

 </reference>
 </default>
 <contacts_index_index translate="label">
 <label>Contact Us Form</label>
 <reference name="root">
 <action method="setTemplate">
<template>page/2columns-right.phtml</template>
</action>
 <action method="setHeaderTitle" translate="title" module="contacts">
<title>Contact Us</title>
</action>
 </reference>

<reference name="content">
 <block type="core/template" name="contactForm"
template="contacts/form.phtml"/>
 </reference>
 </contacts_index_index>

25. Thema’s maken &
aanpassen:layout
 Block Types
 Standaard blokken in magento
 core/template: This block renders a template
defined by its template attribute. The majority of
blocks defined in the layout are of type or subtype of
core/template.
 page/html: This is a subtype of core/template and
defines the root block. All other blocks are child
blocks of this block.
 page/html_head: Defines the HTML head section
of the page which contains elements for including
JavaScript, CSS etc.
 page/html_header: Defines the header part of the
page which contains the site logo, top links, etc.
 page/template_links: This block is used to create a
list of links. Links visible in the footer and header
area use this block type.
 core/text_list: Some blocks like content, left, right etc. are
of type core/text_list. When these blocks are rendered, all
their child blocks are rendered automatically without the
need to call the getChildHtml() method.
 page/html_wrapper: This block is used to create a
wrapper block which renders its child blocks inside an
HTML tag set by the action setHtmlTagName. The default
tag is <div> if no element is set.
 page/html_breadcrumbs: This block defines
breadcrumbs on the page.
 page/html_footer: Defines footer area of page which
contains footer links, copyright message etc.
 core/messages: This block renders error/success/notice
messages.
 page/switch: This block can be used for the language or
store switcher.

26. Thema’s maken &
aanpassen:layout
CMS pagina’s
 Blok toevoegen
 <reference name="left">
 <block type="cms/block"
name="sample_block_kgt_dealer" before="-
">
 <action method="setBlockId">
<block_id>block_right_bottom</block_id>
</action>
 </block>
 </reference>

27. Thema’s maken &
aanpassen:layout
CMS pagina’s
 Breadcrum
aanpassen

28. Thema’s maken &
aanpassen:layout
Oefeningen
1. Eigen theme opzetten

29. Eigen theme maken

30. MAGENTO CURSUS
Deel 2/2 templates

31. Programma
 9:30-12:00
 PHTML FILES
 CSS
 12:00 – 12:45
 Lunch
 12:45-14:45
 Voorbeelden deel 1
 15:00– 17:00
 Voorbeelden deel 2

32. Modules
Problemen met
modules
 Opdracht: module
installeren en
aanpassen (blog
module)
 Opdracht: css
styling + phtml files
(like button)

33. Voorbeelden 1
Rich snippets  Opdracht: rich
snippets integreren

34. Voorbeelden 1
CMS blokken  Opdracht: blog met
cms blok

35. Voorbeelden 1
PDF templates
aanpassen
 Opdracht: rich
snippets integreren

36. Voorbeelden 1
Aanbiedingen pagina  Opdracht: module
voor aanbiedingen.

37. Voorbeelden 1
Cms widgets  Opdracht: widget
toevoegen

38. Voorbeelden 2
Teksten van categorie
aanpassen
 Opdracht: maak in
de linker zij balk een
blok en plaats hierin
de normale
categorie
omschrijving.

39. Voorbeelden 2
Levertijden aanpassen  Opdracht: maak een
attribuut en gebruik
deze op de product
pagina’s ter
vervanging van de
normale levertijd.

40. Voorbeelden 2
 Trans-actionele e-
mails