Magento. Capacitación: - Administración. - Diseño. - Desarrollo.

Transcripción

1 Magento Capacitación: - Administración - Diseño - Desarrollo

2 Estructura general de Magento app code design etc Locale js media skin var

3 MVC (Modelo Vista Controlador) Magento introducción

4 MVC (Modelo Vista Controlador) Magento introducción Programación block controller helper model Diseño layout template

5 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 **

6 Control de diseño

7 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

8 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>

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

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

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

12 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>

13 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>

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

15 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 $this->geturl('module/controller/action', array('param'=>$value)) $this->getskinurl("images/logo.png");

16 Nuestra gran ayuda

17 Nuestra gran ayuda

18 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

19 Ejemplo cambiando el Home Configurar el Home page System > Configuration > Web > Default Pages Configurar página 404 Configurar página cookies no disponibles

20 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 >

21 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')?>

22 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')?>

23 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')?>

24 Práctica