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