Crear una extensión con Magento 2

Crear extensión con Magento 2

En esta entrada vamos a ver como crear nuestro primer Hola Mundo con la nueva versión de Magento.

Para los que todavía no os habéis decidido a empezar a desarrollar con la plataforma aquí os dejamos un pequeño tutorial de como crear nuestro primer módulo.

La extensión que vamos a desarrollar es muy sencilla pero hemos intentado ir más allá y aprenderemos a:

  • Añadir nuestra extensión.
  • Crear nuestro propio tab en el backend.
  • Crear nuestros propios grupos y configuraciones.
  • Añadir y crear un bloque en nuestra propia extensión.
  • Trabajar con layouts y templates.
  • Uso de los helpers.

 

Para empezar deberemos crear nuestra carpeta como desarrolladores dentro de app/code/[NOMBRE]/[NOMBRE_MODULO], en nuestro caso nos queda: app/code/Progento/HolaMagento.

Primero de todo crearemos la carpeta etc/ para declarar nuestro módulo:


<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
 <module name="Progento_HolaMagento" setup_version="1.0.0">
 </module>
</config>

Ahora deberemos registrar el módulo creando el archivo registration.php con el siguiente contenido:


<?php
/**
 * @author Progento Team
 * @copyright Copyright (c) 2016 Progento (http://www.progento.es)
 * @package Progento_HolaMagento
 */
\Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::MODULE,
 'Progento_HolaMagento',
 __DIR__
);

Con esto ya podemos ir al apartado de Stores > Configuration > Advanced y ver que nuestro módulo ya es reconocido por Magento. OJO! Si tenemos la caché habilitada habrá que borrarla.

Una vez nos aparece el módulo en el listado ya podemos crear el tab, para ello crearemos la carpeta app/code/Progento/HolaMagento/etc/adminhtml y añadir un archivo llamado system.xml con el siguiente contenido:


<!--
/**
 * @author Progento Team
 * @copyright Copyright (c) 2016 Progento (http://www.progento.es
 * @package Progento_HolaMagento
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
 <system>
 <tab id="progento" translate="label" sortOrder="10">
 <label><![CDATA[<img id="magepal_block" width="150px" src="/pub/media/progento/logo.png" alt="" border="0" />]]></label>
 </tab>
 <section id="holamagento" translate="label" type="text" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Hola Magento</label>
 <tab>progento</tab>
 <resource>Progento_HolaMagento::config_holamagento</resource>
 <group id="configuracion" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
 <label>Configuracion</label>
 <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Habilitar</label>
 <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
 </field>
 <field id="titulo" translate="label" type="text" sortOrder="2" showInDefault="1" showInWebsite="0" showInStore="0">
 <label>Titulo</label>
 <comment><![CDATA[Título que aparecerá en la página del producto]]></comment>
 </field>
 </group>
 </section>
 </system>
</config>
 

Podemos observar que la estructura en si del xml es muy parecido a Magento 1.

Simplemente estamos creando un tab, que como título tendrá una imagen (Podéis añadir texto simplemente) y luego crearemos nuestra sección con un grupo y unos campos que utilizaremos para hacer nuestra extensión más dinámica.

Ahora será necesario crear el archivo acl.xml dentro de la carpeta adminhtml con el siguiente contenido:


<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Acl/etc/acl.xsd">
 <acl>
 <resources>
 <resource id="Magento_Backend::admin">
 <resource id="Magento_Backend::stores">
 <resource id="Magento_Backend::stores_settings">
 <resource id="Magento_Config::config">
 <!-- this resource id we can use in system.xml for section -->
 <resource id="Progento_HolaMagento::config_holamagento" title="Helloworld Section" sortOrder="80" />
 </resource>
 </resource>
 </resource>
 </resource>
 </resources>
 </acl>
</config>

Bien, ahora ya podemos ver el resultado:

config-magento2

Ahora vamos a mostrar nuestro título dentro de la ficha de un producto.

Primero de todo vamos a crear el archivo Progento/HolaMagento/Block/Catalog/Product/HolaMagento.php y le vamos a añadir el siguiente código:


<?php

namespace Progento\HolaMagento\Block\Catalog\Product;
use Magento\Framework\Registry;
use Magento\Framework\View\Element\Template;

class HolaMagento extends Template {

protected $_helper;

public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
\Progento\HolaMagento\Helper\Data $helper,
array $data = []
) {
parent::__construct($context, $data);
$this->_helper = $helper;
}

public function getTexto(){
return $this->_helper->getTexto();
}

}

En el constructor nos está llegando el objeto de la clase Helper que crearemos a continuación para que podamos llamar a la configuración del backend, de esta forma podremos ver el uso de los Helpers.

Crearemos el archivo Progento/HolaMagento/Helper/Data.php y le añadimos el siguiente código:


<?php
namespace Progento\HolaMagento\Helper;

class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
protected $_scopeConfig;

CONST ENABLE = 'holamagento/configuracion/enable';
CONST TEXTO = 'holamagento/configuracion/titulo';

public function __construct(
\Magento\Framework\App\Helper\Context $context,
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
) {
parent::__construct($context);

$this->_scopeConfig = $scopeConfig;
}

public function getEnable(){
return $this->_scopeConfig->getValue(self::ENABLE, \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
}

public function getTexto(){
return $this->_scopeConfig->getValue(self::TEXTO, \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
}
}

Como constantes hemos definido los dos fields que hemos creado en nuestro archivo system.xml y creamos dos métodos públicos para que nuestro bloque pueda llamar a través del objeto que le llega por el constructor de la clase.

Ahora que ya tenemos nuestro Bloque y Helper, vamos a crear los archivos:

  • Progento/HolaProgento/view/frontend/templates/product/holamagento.phtml
  • Progento/HolaProgento/view/frontend/layout/catalog_product_view.xml

Bien, primero vamos a editar nuestro phtml:


<div>
<h2><?php echo __($this->getTexto()) ?></h2>
</div>

Gracias a __() podemos hacer traducible nuestro texto igual que a la versión anterior.

Y ahora en nuestro layout añadimos lo siguiente:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Progento_HolaMagento/css/holamagento.css"/>
</head>
<body>
<referenceContainer name="product.info.main">
<block name="holamagento" class="Progento\HolaMagento\Block\Catalog\Product\HolaMagento" before="-" template="product/holamagento.phtml" />
</referenceContainer>
</body>
</page>

 

Si ahora vamos hasta un producto de nuestra tienda veremos el texto que hemos creado desde el backend:

magento2-product

 

Si tenéis cualquier pregunta, no dudéis en publicar vuestro comentario.

Esperamos que os sea de ayuda esta primera aproximación de Magento 2.

Happy coding =)

Un comentario en “Crear una extensión con Magento 2

  • Un plauso por querer ayudar a la comunida hispaniohablante, pero el tutorial solo se limita que copies y pegues el codigo, no hay una explicacion de para que tengo que usar “x” o “tal” cosa , pero se le agradece el esfuerzo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Solve : *
16 − 1 =