Crear una extensión de Magento 2

¡Vaya, Magento 2 está oficialmente disponible!

Grandes noticias de hecho. Mi nombre es Alex y soy especialista en Magento en Amasty. Durante los últimos meses he estado ocupado construyendo extensiones de Magento 2 y hoy quería compartir una instrucción sobre cómo construir un módulo personalizado simple en Magento 2.

que vamos a construir

Esta extensión de Magento 2 tendrá un modelo con datos indefinidos, que se almacenarán en la base de datos. Y mostraremos los valores en la página del producto.

Además, vamos a crear varias configuraciones para cambiar el comportamiento de la extensión. Nada complicado, ¡así que comencemos!

Crear configuración

El primer paso es instalar Magento 2 y crear un catálogo para almacenar los archivos de extensión. En Magento 2 los archivos no se distribuyen por carpetas y tienen una estructura modular.

Los archivos de la extensión recién creada estarán en este catálogo:

aplicacióncódigoAmastyHelloWorld /

Aquí Amasty es el nombre de la empresa que creó la extensión, HelloWorld es el nombre de la extensión Magento 2 que estamos creando en este momento.

Ahora es el momento de codificar la extensión. Los propósitos de los catálogos han cambiado ligeramente en comparación con las primeras versiones de Magento.

La configuración de la extensión se encuentra en la carpeta etc , como antes.

Vamos a crear el catálogo appcodeAmasty HelloWorld etc en Magento 2 y agreguemos un archivo module.xml dentro de él. Este es el archivo donde vamos a configurar el nombre de nuestra extensión y su versión.

El archivo se ve así:

[php]

<?xml version=”1.0″?>

<config xmlns_xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi_noNamespaceSchemaLocation=”../../../ ../../lib/internal/Magento/Framework/Module/etc/module.xsd”>

<module name=”Amasty_HelloWorld” setup_version=”0.0.0″>

</module>

</config>

[/php]

Ahora veamos si Magento 2 ve la extensión.

Ejecute el siguiente comando de consola:

Configuración de php bin/magento: actualizar

Pero no hay resultado. Para solucionarlo, creemos el archivo registration.php en la carpeta raíz de la extensión y coloquemos el siguiente código dentro:

[php]

/**

* @author Amasty Team

* @copyright Copyright (c) 2015 Amasty (http://www.amasty.com)

* @package Amasty_HelloWorld

*/

MagentoFrameworkComponentComponentRegistrar::register(

MagentoFrameworkComponentComponentRegistrar::MODULE,

‘Amasty_HelloWorld’,

__DIR__

);

[/php]

Esto se hace para decirle a Magento 2 que debe ejecutar la extensión desde el directorio actual.

Ahora ve y borra el caché de Magento, y verás que nuestra extensión está funcionando ahora:

Crear configuraciones

Ahora vamos a crear algunas configuraciones para la nueva extensión. Para hacer eso, agregue el catálogo adminhtml al catálogo etc. Contendrá archivos de configuración para backend.

El primer archivo que necesitamos aquí es route.xml para la configuración de frontName e id , que se usa para definir consultas para la extensión. Se realiza mediante el siguiente fragmento de código:

[php]

<config xmlns_xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi_noNamespaceSchemaLocation=”../../../../../../lib /internal/Magento/Framework/App/etc/routes.xsd”>

<router id=”admin”>

<route id=”amasty_helloworld” frontName=”amasty_helloworld”>

<module name=”Amasty_HelloWorld” />

</route>

</enrutador>

</config>

[/php]

Ahora vamos a configurar los ajustes de la extensión. Como en la versión anterior, están ubicados en el archivo system.xml , pero el marcado xml es ligeramente diferente en Magento 2.

Estoy creando las tres configuraciones más populares como ejemplo: una configuración de texto, una configuración sí/no y una configuración con valores personalizados.

Eche un vistazo al contenido del archivo de configuración y lo que realmente significa:

[php]

<?xml version=”1.0″?>

<!– /** * @author Amasty Team * @copyright Copyright (c) 2015 Amasty (http://www.amasty.com) * @package Amasty_HelloWorld */ –>

<config xmlns_xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi_noNamespaceSchemaLocation=”../../../../Magento/Config/etc/system_file. xsd”>

<sistema>

<tab id=”amasty” translate=”label” sortOrder=”10″>

<label>Amasty</label>

</tab>

Comentario para la configuración `Habilitar Hello World`.
</comentario>
</campo>













<field id=”block_label” translate=”label” type=”text” sortOrder=”20″ showInDefault=”1″ showInWebsite=”1″ showInStore=”1″>

<label>Etiqueta de bloque</label>

</field >

<field id=”text_align” translate=”label” type=”select” sortOrder=”30″ showInDefault=”1″ showInWebsite=”1″ showInStore=”1″>

<label>Text Align</label>

<source_model >AmastyHelloWorldModelSourceAlign</source_model>

</field>

</group>

</section>

</sistema>

</config>

[/php]

Agregue una nueva sección al bloque de configuración usando <tab> . Establezca la identificación única y el nombre de la sección de configuración en el interior. Se hace porque tenemos una posibilidad muy alta de usar varias aplicaciones del mismo proveedor en un solo sitio.

Agregue la nueva <section id=”amasty_helloworld”> , nuevamente, con la ID única, y configure los parámetros necesarios, como el tipo, los campos de traducción, el orden, la etiqueta, el bloque para el cual se agrega la sección, etc. Y luego agregue la configuración justo dentro de la sección. Se dividirán en grupos (un grupo en nuestro caso). Los grupos están definidos por <group> y los campos están establecidos por <field> . Ya hemos creado tres configuraciones y señalado tipos, etiquetas, visibilidad, traducción, comentarios y el modelo de datos.

En nuestro caso, la tercera configuración implica datos personalizados, por lo que señalamos un modelo de datos separado para ello. Para hacer eso, debe crear el modelo AmastyHelloWorldModelSource Align , donde estableceremos las variantes de elección necesarias. La extensión debe definirse desde la interfaz MagentoFrameworkOptionArrayInterface , y también debe redefinir los métodos toOptionArray() y toArray() .

Comprobemos el resultado. Abra su backend de Magento 2, vaya a Tiendas – Configuración . ¡Boom, podemos ver la configuración!

Ahora, a medida que creamos la configuración, debemos establecer valores predeterminados para las opciones. Para ello, cree un config.xml en el catálogo etc. y coloque los valores predeterminados de acuerdo con system.xml allí.

→ Si necesitas ayuda para configurar el módulo Amasty según tus necesidades consulta nuestro  Servicio de Configuración . Se le proporcionará un servicio profesional de configuración web de Magento para cualquier extensión disponible. Tras la configuración del módulo, se realizan pruebas para su correcto funcionamiento.

Salida frontal

Cuadra

Ahora intentemos mostrar algo en la interfaz, es decir, crear un bloque y una plantilla para ello, y luego mostrar este bloque en la página del producto.

Cree una clase de bloque AmastyHelloWorldBlockCatalogProductHelloWorld , que debe heredar de la clase Magento MagentoFrameworkViewElementTemplate

Vamos a utilizar el constructor padre. Así es como se verá para este bloque:

[php]

public function __construct(

MagentoFrameworkViewElementTemplateContext $context,

array $data = []

) {

parent::__construct($context, $data);

}

[/php]

Modelo

Vamos a crear una plantilla simple y ponerla en el siguiente catálogo:

AmastyHelloWorldviewfrontendtemplatesproducthello.phtml

Pueden ver que en Magento 2 tenemos el catálogo de vistas , donde vamos a almacenar la información, que antes estaba dispersa en varios catálogos de temas, como plantillas, diseños, scripts, estilos.

Pon este simple texto dentro:

<?=__(‘Hola Mundo’);?>

Como vemos en el ejemplo, ahora puede realizar la traducción en Magento usando __() sin una clase separada. Y la traducción de esta línea se extraerá de AmastyHelloWorldi18nen_US.csv

Hemos creado la plantilla, ahora mostrémosla en la página del producto.

Disposición

¡Es hora de crear el diseño! Ahora estamos creando no un diseño único para todas las páginas, sino un archivo separado para cada página. Como mostraremos el bloque en la página del producto, vamos a crear un diseño con el siguiente nombre:
AmastyHelloWorldviewfrontendlayoutcatalog_product_view.xml

Ponga este código dentro:

[php]

<!– /** * @author Amasty Team * @copyright Copyright (c) 2015 Amasty (http://www.amasty.com) * @package Amasty_HelloWorld */ –>

<page xmlns_xsi=”http ://www.w3.org/2001/XMLSchema-instance” xsi_noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_configuration.xsd”>

<head>

<css src=”Amasty_HelloWorld/css/hello .css”/>

</head>

<body>

<referenceContainer name=”product.info.main”>

<block name=”amasty_helloworld.helloworld” class=”AmastyHelloWorldBlockCatalogProductHelloWorld” before= ”-” template=”producto/hola.phtml” />

</referenceContainer>

</body>

</page>

[/php]

Como ejemplo, agregamos el nuevo bloque en el bloque product.info.main en el código de diseño y agregamos el archivo de estilos para usar cuando se muestra en la interfaz. El archivo de estilos tiene la siguiente dirección:

AmastyHelloWorldviewfrontendwebcsshello.css

Actualizar la página del producto:

¡Voila, el bloque está ahí!

Ahora cambiemos el aspecto del bloque y agreguemos la inicialización auxiliar.

El constructor de extensiones se ve así:

[php]

/**

* @var AmastyHelloWorldHelperData

*/

protected $_helper;

public function __construct(

MagentoFrameworkViewElementTemplateContext $context,

array $data = [],

AmastyHelloWorldHelperData $helper

) {

parent::__construct($context, $data);

$este->_ayudante = $ayudante;

}

[/php]

El ayudante del bloque creado se usa como variable $this->_helper .

Ayudante

Cree el ayudante en el siguiente catálogo:

AmastyHelloWorldHelperData.php

Agregue la inicialización del objeto de la interfaz MagentoFrameworkAppConfigScopeConfigInterface al asistente, funciona para recibir los datos de la configuración.

Ahora el archivo se ve así:

[php]

<?php /** * @author Amasty Team * @copyright Copyright (c) 2015 Amasty (http://www.amasty.com) * @package Amasty_HelloWorld */ namespace AmastyHelloWorldHelper; datos de clase extiende MagentoFrameworkAppHelperAbstractHelper { /** * @var MagentoFrameworkAppConfigScopeConfigInterfac */ protected $_scopeConfig; CONST ENABLE = ‘amasty_helloworld/general/enable’; CONST BLOCK_LABEL = ‘amasty_helloworld/general/block_label’; CONST TEXT_ALIGN = ‘amasty_helloworld/general/text_align’; función pública __construct( MagentoFrameworkAppHelperContext $contexto, MagentoFrameworkAppConfigScopeConfigInterface $scopeConfig) { padre::__construct($contexto); $this->_scopeConfig = $scopeConfig;

}

public function getEnable(){

return $this->_scopeConfig->getValue(self::ENABLE);

}

función pública getBlockLabel(){

return $this->_scopeConfig->getValue(self::BLOCK_LABEL);

}

función pública getTextAlign(){

return $this->_scopeConfig->getValue(self::TEXT_ALIGN);

}

}

[/php]

En este fragmento de código, puede ver que se crearon tres funciones para obtener la configuración de la extensión desde la sección de configuración.

Usemos estas funciones en el bloque y cambiemos la plantilla:

[php]

<?php /** * @author Equipo Amasty * @copyright Copyright (c) 2015 Amasty (http://www.amasty.com) * @package Amasty_HelloWorld */ ?>

<div class=”amasty-helloworld-block” style=”text-align: <?= $this->getTextAlign()?>”>

<h3 class=”etiqueta”><?= $esto->getBlockLabel()?></h3>

<?=__(‘Hola Mundo’);?>

</div>

[/php]

Ahora se muestra el bloque teniendo en cuenta la configuración:

Creación de modelos

Crear script de instalación

Al igual que en las versiones 1.x de Magento, debe crear el archivo de instalación para usar su propia tabla. Vamos a describir la creación de una tabla simple con varios campos. El archivo debe crearse aquí: AmastyHelloWorldSetupInstallSchema.php

Y este es su contenido:

[php]

instalación de función pública (SchemaSetupInterface $configuración, ModuleContextInterface $contexto)

{

$instalador = $configuración;

$instalador->startSetup();

$tabla = $instalador->getConnection()

->newTable($instalador->getTable(‘amasty_helloworld’))

->addColumn(

‘id’,

MagentoFrameworkDBDdlTable::TYPE_INTEGER,

null,

[ ‘identidad’ => verdadero, ‘sin firmar’ => verdadero, ‘anulable’ => falso, ‘primario’ => verdadero],

‘Id’

)

->addColumn(

‘etiqueta’,

MagentoFrameworkDBDdl Tabla::TYPE_TEXT,

nulo,

[‘predeterminado’ => nulo, ‘anulable’ => falso],

‘Nombre’

)

->addColumn(

‘valor’,

MagentoFrameworkDBDdlTable::TYPE_TEXT,

nulo ,

[‘predeterminado’ => nulo, ‘anulable’ => falso],

‘Tiendas’

);

$instalador->getConnection()->createTable($tabla);

$instalador->endSetup();

}

[/php]

Puede ver que estamos creando una tabla ‘amasty_helloworld’ con un campo de tipo entero y dos campos de tipo texto.

Creación de modelos

Como en la versión anterior de Magento, necesitamos crear tres clases para trabajar con el modelo: el modelo en sí, el modelo de recursos y la colección.

Vamos a crear un archivo AmastyHelloWorldModelHelloWorld.php y usar la siguiente inicialización:

[php]

/**

* Copyright © 2015 Amasty. Reservados todos los derechos.

*/

espacio de nombres AmastyHelloWorldModelResourceModel;

class HelloWorld extiende MagentoFrameworkModelResourceModelDbAbstractDb

{

/**

* Inicialización del modelo

*

* @return void

*/

protected function _construct()

{

$this->_init(‘amasty_helloworld’, ‘id’);

}

}

[/php]

Simplemente configuramos el constructor para el modelo aquí. De hecho, no hay gran diferencia con las primeras versiones de Magento en este paso. El modelo de recurso y la colección se almacenan en los siguientes catálogos:

AmastyHelloWorldModelResourceModelHelloWorld.php

AmastyHelloWorldModelResourceModelHelloWorldCollection.php

Los listados de estos archivos no tienen ningún interés particular. Crea una función simple en el bloque con el que estamos trabajando:

[php]

public function getCollection()

{

$modelo = $this->_objectManager->create(‘AmastyHelloWorldModelHelloWorld’);

$colección = $modelo->getCollection();

devolver $colección;

}

[/php]

y mostrarlo dentro de la plantilla:

[php]

<?php foreach($this->getCollection() as $item):?>

<etiqueta><?= __(“Título: “) . $elemento->getLabel()?></label> — <label><?= __(“Valor: “) . $elemento->getValue();?></etiqueta>

<?php endforeach;?>

[/php]

Ahora actualice la página del producto: ¡funciona!

Si tiene alguna pregunta sobre este proceso de creación de la extensión Magento 2, pregúntela en los comentarios. ¡Buena suerte para ti!