View
2.427
Download
1
Category
Preview:
DESCRIPTION
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.
Citation preview
MAGENTO CURSUSDeel 2-1 templates
Michel Doens 14 jaar ervaring PHP & ZEND Oprichter Sition
Michel.doens@sition.nl
073-7110333 www.linkedin.com
/in/micheldoens www.sition.nl
Sition Sition
2000 opgericht Apps, Websites,
Shops Zend Framework
OSCommerce Magento
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
Test website
Cursus sites cursist1.sition.nl Naam: & wachtwoord:
Database:
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.
Thema’s maken & aanpassen Werking Fall-back Magento zoekt eerst in:
app/design/frontend/custom_package/custom_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_package/default
Regel 4: Kopieer niet alle bestanden uit de base, enkel die je wilt aanpassen!
Thema’s maken & aanpassen Hoe starten?
Default/blank gebruiken
Yoast blanco theme
Opdracht: maak een eigen pakket en leeg theme aan.
Thema’s maken & aanpassen Theme activeren Opdracht: maak een eigen
pakket en leeg theme aan.
Thema’s maken & aanpassen Responsive?
Nadeel: laadtijd! Oplossing: eigen
theme Tablet theme?
Uitzondering client/browsers
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
Layout Templates Skin
Structuur & Content Blokken
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
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"> ... </layout>
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>
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>
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/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]>
</text> </action> </block> </reference> </default>
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>
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>
Thema’s maken & aanpassen: layout Ingelogd? <customer_logged_out>
&
<customer_logged_in>
Thema’s maken & aanpassen: layout verwijderen van
blokken Verwijderen:
Optie 1. <remove name="" /> [ Global context!]
Optie 2.: <actionmethod="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>
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>
Thema’s maken & aanpassen:layoutLink 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>
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.
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>
Thema’s maken & aanpassen:layout
CMS pagina’s Breadcrum
aanpassen
Thema’s maken & aanpassen:layout
Oefeningen1. Eigen theme opzetten
Eigen theme maken
MAGENTO CURSUSDeel 2/2 templates
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
ModulesProblemen met modules
Opdracht: module installeren en aanpassen (blog module)
Opdracht: css styling + phtml files (like button)
Voorbeelden 1Rich snippets Opdracht: rich
snippets integreren
Voorbeelden 1CMS blokken Opdracht: blog
met cms blok
Voorbeelden 1PDF templates aanpassen
Opdracht: rich snippets integreren
Voorbeelden 1Aanbiedingen pagina
Opdracht: module voor aanbiedingen.
Voorbeelden 1Cms widgets Opdracht: widget
toevoegen
Voorbeelden 2Teksten van categorie aanpassen
Opdracht: maak in de linker zij balk een blok en plaats hierin de normale categorie omschrijving.
Voorbeelden 2Levertijden aanpassen
Opdracht: maak een attribuut en gebruik deze op de product pagina’s ter vervanging van de normale levertijd.
Voorbeelden 2 Trans-actionele e-
mails
Recommended