Magento custom layout

Nueva opción de diseño en páginas CMS para Magento

En muchas ocasiones por motivos de diseño o funcionalidad necesitamos un diseño de página personalizado o layout en nuestra tienda Magento. La forma más sencilla y efectiva de hacerlo es creando una pequeña extensión donde podremos agregar tantos diseños como sean necesarios.

Este layout sera accesible desde los bloques CMS y tambien desde la opción de diseño en las categorías. Esta última es muy util si por ejemplo creamos una landing page para una categotia concreta.

Creando nuestra extensión

Lo primero que haremos es crear el archivo de configuración del módulo Mgt_CustomCmsPageLayout.xml

app/etc/modules/Mgt_CustomCmsPageLayout.xml
<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
	<Mgt_CustomCmsPageLayout>
	    <codePool>local</codePool>
	    <active>true</active>
	</Mgt_CustomCmsPageLayout>
    </modules>
</config>

Ahora toca crear la parte de la extensión donde vamos a definir el/los archivos .phtml que van a contener los nuevos diseños. Simplemente crea el archivo config.xml en la siguiente ruta:

app/code/local/Mgt/CustomCmsPageLayout/etc/config.xml
<?xml version="1.0"?>
<config>
    <modules>
	<Mgt_CustomCmsPageLayout>
	    <version>0.1.0</version>
	</Mgt_CustomCmsPageLayout>
    </modules>
    <global>
	<page>
	    <layouts>
		<custom_page1>
                    <label>New layout 1</label>
                    <template>page/custom_page1.phtml</template>
                </custom_page1>
		<custom_page2>
                    <label>New layout 2</label>
                    <template>page/custom_page2.phtml</template>
                </custom_page2>
	    </layouts>
	</page>
    </global>
</config>

Bien, solo queda crear el diseño de nuestra página creando el archivo /app/design/frontend/[paquete]/[tema]/template/page/custom_page1.phtml tal como indicamos en config.xml. Este archivo contendra todo el código HTML y PHP necesario para que nuestro diseño se vea como queremos.

<?php
/**
 * Template for Mage_Page_Block_Html
 */
?>
<!doctype html>
<html lang="<?php echo $this->getLang() ?>">
<head>
    <?php echo $this->getChildHtml('head') ?>
</head>
<body>
    <?php echo $this->getChildHtml('after_body_start') ?>
    <div id="wrapper">
	<h1>Mi nueva página</h1>
	<?php echo $this->getChildHtml('footer') ?>
    </div>
</body>
</html>     

Listo! ya podemos seleccionar nuestro diseño personalizado desde el panel de control de Magento.

Cargar diseño personalizado

Comentarios y opiniones

Puede que tarde en responder, se paciente.

*
*