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.
