Magento - ipascual

Magento
Capacitación:
-  Administración
-  Diseño
-  Desarrollo
http://www.ipascual.com/proyectos/magento/apuntes.pdf
www.ipascual.com
Estructura general de Magento
¤  app
¤  code
¤  design
¤  etc
¤  Locale
¤  js
¤  media
¤  skin
¤  var
www.ipascual.com
MVC (Modelo Vista Controlador) Magento – introducción
www.ipascual.com
MVC (Modelo Vista Controlador) Magento – introducción
¤  Programación
¤  block
¤  controller
¤  helper
¤  model
¤  Diseño
¤  layout
¤  template
www.ipascual.com
Estructura de archivos para diseño
¤  app/design/frontend/{$interfaz}/{$theme}/template folder.
¤  app/design/frontend/{$interfaz}/{$theme}/layout folder. ¤  app/code/{core,local,com…}/{$compañía}/{$modulo}/Block
¤  ¿Qué es interfaz?
Colección themes, Ej.: Ropa, Colombia, México…
¤  ¿Qué es theme?
Grupo de layout y templates. Ej.: Navidades, día de la madre…
¤  ¿Qué es módulo?
Parte de Magento (requerida o no) Ej.: Cliente, bonos, catálogo…
** Ver estructura de diseño más en profundidad **
www.ipascual.com
Control de diseño
www.ipascual.com
Jerarquía de uso
Módulo: Mage_Catalog / Layout: catalog.xml
¤  app/design/frontend/ipascual/diamadre/layout
¤  app/design/frontend/ipascual/default/layout
¤  app/design/frontend/base/default/layout
¿ Templates, css, js…?
¤  app/design/frontend/ipascual/diamadre/template/catalog/product/view.phtml
¤  app/design/frontend/ipascual/default/template/catalog/product/view.phtml
¤  app/design/frontend/base/default/template/catalog/product/view.phtml
www.ipascual.com
Layout / archivos XML introducción
<catalog_product_view>
<reference name="root”>
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
</reference>
…
<reference name="content”>
<block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml”>
…
<block type="catalog/product_view" name="product.info.addtocart" as="addtocart"
template="catalog/product/view/addtocart.phtml"/>
</block>
</reference>
<reference name="right”>
<block type="catalog/product_list_related" name="catalog.product.related" before="-"
template="catalog/product/list/related.phtml"/>
</reference>
</catalog_product_view>
www.ipascual.com
Layout / archivo XML sintáxis BLOQUE
Tipos de bloques
- core/template: Este bloque renderiza la plantilla
definida por su atributo "template".
- page/html: Este es una extensión de core/
template que define el bloque principal. Todos los
otros bloques son hijos de este tipo.
- page/html_head: Define la sección de la
cabecera que contiente elmentos para incluir
JavaScript, CSS etc.
- page/html_header: Define la parte de la
cabecera que contiene elementos como el logo,
menu, etc.
www.ipascual.com
Layout / archivo XML sintáxis BLOQUE
- page/template_links: Crea una lista de enlaces. Por defecto tenemos
enlaces visibles en la cabecera y el pie de página usando este tipo de
bloque. Se ayudan de la etiqueta "action" para añadir o borrar enlaces.
- core/text_list: Bloque como "contenido", "izquierda", "derecha" son de
este tipo. Cuando estos bloques son renderizados todos sus hijos son
renderizados sin hacer uso del método
getChildHtml()
- page/html_breadcrumbs: Define la navegación de la tienda.
www.ipascual.com
Layout / archivo XML sintáxis BLOQUE
- page/html_footer: Define el area del pie de página.
- core/messages: Mensajes que aparecen después de acciones error/
éxito/aviso.
- page/switch: Bloque de para cambio de idioma o tienda.
www.ipascual.com
Layout / archivo XML sintáxis BLOQUE
page/html_wrapper: Cuando se renderiza encapsula sus bloques hijo dentro
de un tag HTML definicido por la acción setHtmlTagName. <div> es el
elemento por defecto.
<block type="page/html_wrapper" name="bottom.container" as="bottomContainer"
translate="label">
<label>Page Footer</label>
<action method="setHtmlTagName"><tag>span</tag></action>
<action method="setElementClass"><value>bottom-container</value></action>
<block ... />
<block ... />
</block>
www.ipascual.com
Layout / archivo XML sintáxis BLOQUE
- cms/block: Define la entrada de un bloque estático CMS.
Ejemplo:
<block type="cms/block" name="news_cms" as="newsBlock">
<action method="setBlockId"><block_id>news_block</block_id></action>
</block>
www.ipascual.com
Layout / archivo XML otras sintáxis
reference: Hace referencia a un bloque que no está en este
archivo xml de diseño.
<reference name="header">
…
</reference>
action: Estable una acción sobre el bloque, la cual se ejecuta
antes de renderizar el template.
<action method="addLink" translate="label title" module="catalogsearch"
ifconfig="catalog/seo/search_terms">
<label>Search Terms</label>
<url helper="catalogsearch/getSearchTermUrl" />
<title>Search Terms</title>
</action>
remove: Borra en el orden de renderizaje un bloque.
www.ipascual.com
Template / funciones comunes
<?php echo $this->_(“Carrito de compra”); ?>
$this->getChildHtml("bloque_nombre”)
<?php echo $this->getChildHtml('breadcrumbs') ?>
$this->getChildHtml()
<?php echo $this->getChildHtml() ?>
- Carga un static block CMS
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId("identificador")>toHtml() ?>
$this->getUrl('') Devuelve http://127.0.0.1/magento/
$this->getUrl('module/controller/action', array('param'=>$value))
$this->getSkinUrl("images/logo.png");
http://127.0.0.1/skin/frontend/your_theme/default/images/logo.png
www.ipascual.com
Nuestra gran ayuda
www.ipascual.com
Nuestra gran ayuda
www.ipascual.com
Localizando la especificación bloque en los xml
1)  Activar "Add Block Names to Hints"
2)  Localizar la clase del bloque
3)  Hacer una búsqueda en los XML de la siguiente manera
Si la clase del bloque es: Mage_Page_Block_Html_Breadcrumbs
... buscar page/html_breadcrumbs
Si la clase del bloque es: Mage_Catalog_Block_Product_Compare_Sidebar
... catalog/product_compare_sidebar
www.ipascual.com
Ejemplo cambiando el Home
¤  Configurar el Home page
System > Configuration > Web > Default Pages
¤  Configurar página 404
¤  Configurar página cookies no disponibles
www.ipascual.com
Ejemplo cambiando posición usando reference
Mover el carrito a la izquierda
1)  Renombrar reference del bloque de vista de carrito
(checkout/cart_sidebar)
checkout.xml
<default>
…
<reference name=“left” >
…
www.ipascual.com
Ejemplo cambiando el Home
Mover el carrito encima del breadcrumbs
1) Quitar el bloque de vista de carrito (checkout/cart_sidebar) de la
columna izquierda
checkout.xml
<default>
…
<reference name=“root” >
…
2) Llamarlo, 3columns.phtml
<?php echo $this->getChildHtml('cart_sidebar') ?>
www.ipascual.com
Ejemplo insertando CMS
1)  Crear el Static Block
2)  Asignar el CMS a un layout
<block type="cms/block" name="news_cms" as="newsBlock">
<action method="setBlockId"><block_id>news_block</block_id></
action>
</block>
3) Llamarlo <?php echo $this->getChildHtml('newsBlock') ?>
www.ipascual.com
Ejemplo creando templates
1) Declarar el template en los archivos layout *.xml
<block type="core/template" name="telephone-banner"
as="telephoneBanner" template="page/html/telephone.phtml" />
2) Llamarlo <?php echo $this->getChildHtml(’telephoneBanner') ?>
www.ipascual.com
Práctica
http://www.ipascual.com/proyectos/magento/visuals.zip