¿Cómo puedo agregar un botón en la sección de configuración del backend de Magento 2 y llamar a un método PHP simple cuando hago clic en el botón?
Esta llamada al método puede ser una llamada AJAX.
Describiremos la solución utilizando nuestro módulo Otros también comprados como ejemplo, donde MageWorx - un nombre de proveedor y AlsoBought - un nombre de módulo:
Primero, debe agregar su botón como campo en el archivo de configuración. (mageworx_collect como ejemplo):
app / code / MageWorx / AlsoBought / etc / adminhtml / system.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="mageworx" sortOrder="2001">
<label>MageWorx</label>
</tab>
<section id="mageworx_alsobought" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Also Bought</label>
<tab>mageworx</tab>
<resource>MageWorx_AlsoBought::config</resource>
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>General</label>
<field id="mageworx_collect" translate="label comment" type="button" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0">
<frontend_model>MageWorx\AlsoBought\Block\System\Config\Collect</frontend_model>
<label>Collect all available data (in separate table)</label>
</field>
</group>
</section>
</system>
</config>
Para dibujar este botón de campo MageWorx\AlsoBought\Block\System\Config\Collect
se utilizará el modelo de interfaz . Créalo:
app / code / MageWorx / AlsoBought / Block / System / Config / Collect.php
<?php
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
namespace MageWorx\AlsoBought\Block\System\Config;
use Magento\Backend\Block\Template\Context;
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;
class Collect extends Field
{
/**
* @var string
*/
protected $_template = 'MageWorx_AlsoBought::system/config/collect.phtml';
/**
* @param Context $context
* @param array $data
*/
public function __construct(
Context $context,
array $data = []
) {
parent::__construct($context, $data);
}
/**
* Remove scope label
*
* @param AbstractElement $element
* @return string
*/
public function render(AbstractElement $element)
{
$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
return parent::render($element);
}
/**
* Return element html
*
* @param AbstractElement $element
* @return string
*/
protected function _getElementHtml(AbstractElement $element)
{
return $this->_toHtml();
}
/**
* Return ajax url for collect button
*
* @return string
*/
public function getAjaxUrl()
{
return $this->getUrl('mageworx_alsobought/system_config/collect');
}
/**
* Generate collect button html
*
* @return string
*/
public function getButtonHtml()
{
$button = $this->getLayout()->createBlock(
'Magento\Backend\Block\Widget\Button'
)->setData(
[
'id' => 'collect_button',
'label' => __('Collect Data'),
]
);
return $button->toHtml();
}
}
?>
Este es un modelo de campo típico. El botón se dibuja utilizando el getButtonHtml()
método Use el getAjaxUrl()
método para obtener una URL.
Entonces, necesitará la plantilla:
app / code / MageWorx / AlsoBought / view / adminhtml / templates / system / config / collect.phtml
<?php
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
?>
<?php /* @var $block \MageWorx\AlsoBought\Block\System\Config\Collect */ ?>
<script>
require([
'jquery',
'prototype'
], function(jQuery){
var collectSpan = jQuery('#collect_span');
jQuery('#collect_button').click(function () {
var params = {};
new Ajax.Request('<?php echo $block->getAjaxUrl() ?>', {
parameters: params,
loaderArea: false,
asynchronous: true,
onCreate: function() {
collectSpan.find('.collected').hide();
collectSpan.find('.processing').show();
jQuery('#collect_message_span').text('');
},
onSuccess: function(response) {
collectSpan.find('.processing').hide();
var resultText = '';
if (response.status > 200) {
resultText = response.statusText;
} else {
resultText = 'Success';
collectSpan.find('.collected').show();
}
jQuery('#collect_message_span').text(resultText);
var json = response.responseJSON;
if (typeof json.time != 'undefined') {
jQuery('#row_mageworx_alsobought_general_collect_time').find('.value .time').text(json.time);
}
}
});
});
});
</script>
<?php echo $block->getButtonHtml() ?>
<span class="collect-indicator" id="collect_span">
<img class="processing" hidden="hidden" alt="Collecting" style="margin:0 5px" src="<?php echo $block->getViewFileUrl('images/process_spinner.gif') ?>"/>
<img class="collected" hidden="hidden" alt="Collected" style="margin:-3px 5px" src="<?php echo $block->getViewFileUrl('images/rule_component_apply.gif') ?>"/>
<span id="collect_message_span"></span>
</span>
Tendrá que volver a escribir la parte del código de acuerdo con sus necesidades, pero lo dejaré como ejemplo. El método de solicitud de Ajax onCreate
y onSuccess
debe adaptarse a sus necesidades. Además, puede eliminar el <span class="collect-indicator" id="collect_span">
elemento. Lo usamos para mostrar la carga (spinner) y el resultado de la acción.
Además, necesitará un controlador, donde se procesarán todas las operaciones requeridas, y un enrutador.
app / code / MageWorx / AlsoBought / etc / adminhtml / routes.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="mageworx_alsobought" frontName="mageworx_alsobought">
<module name="MageWorx_AlsoBought" before="Magento_Backend" />
</route>
</router>
</config>
app / code / MageWorx / AlsoBought / Controller / Adminhtml / System / Config / Collect.php
<?php
/**
* Copyright © 2016 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
namespace MageWorx\AlsoBought\Controller\Adminhtml\System\Config;
use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use MageWorx\AlsoBought\Helper\Data;
class Collect extends Action
{
protected $resultJsonFactory;
/**
* @var Data
*/
protected $helper;
/**
* @param Context $context
* @param JsonFactory $resultJsonFactory
* @param Data $helper
*/
public function __construct(
Context $context,
JsonFactory $resultJsonFactory,
Data $helper
)
{
$this->resultJsonFactory = $resultJsonFactory;
$this->helper = $helper;
parent::__construct($context);
}
/**
* Collect relations data
*
* @return \Magento\Framework\Controller\Result\Json
*/
public function execute()
{
try {
$this->_getSyncSingleton()->collectRelations();
} catch (\Exception $e) {
$this->_objectManager->get('Psr\Log\LoggerInterface')->critical($e);
}
$lastCollectTime = $this->helper->getLastCollectTime();
/** @var \Magento\Framework\Controller\Result\Json $result */
$result = $this->resultJsonFactory->create();
return $result->setData(['success' => true, 'time' => $lastCollectTime]);
}
/**
* Return product relation singleton
*
* @return \MageWorx\AlsoBought\Model\Relation
*/
protected function _getSyncSingleton()
{
return $this->_objectManager->get('MageWorx\AlsoBought\Model\Relation');
}
protected function _isAllowed()
{
return $this->_authorization->isAllowed('MageWorx_AlsoBought::config');
}
}
?>
PD Este es el ejemplo de trabajo de nuestro módulo MageWorx Otros también comprados . Si quieres estudiarlo, puedes descargarlo gratis.
También puede verificarlo en vendor / magento / module-customer / etc / adminhtml / system.xml para el botón. Debajo del código, verifíquelo en la ruta anterior Cree frontend_model como este vendor / magento / module-customer / Block / Adminhtml / System / Config / Validatevat.php .
<group id="store_information">
<field id="validate_vat_number" translate="button_label" sortOrder="62" showInDefault="1" showInWebsite="1" showInStore="0">
<button_label>Validate VAT Number</button_label>
<frontend_model>Magento\Customer\Block\Adminhtml\System\Config\Validatevat</frontend_model>
</field>
</group>
Por encima del camino para su referencia. Ahora cree apropiado para su propio módulo.
Para agregar un botón en la configuración del sistema y ejecutar una función personalizada, debe crear frontend_model
para representar su botón. En la plantilla de frontend_model
, puede escribir su lógica ajax.
Aquí hay un ejemplo:
System.xml
Path: /root_path/magento2/app/code/Skumar/Sync/etc/adminhtml/system.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="skumar" translate="label" sortOrder="1000">
<label>Skumar Extensions</label>
</tab>
<section id="sync" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Sync</label>
<tab>skumar</tab>
<resource>Skumar_Sync::config</resource>
<group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Configuration</label>
<field id="build_indexes" translate="label comment tooltip" type="button" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Build Search Indexes</label>
<frontend_model>Skumar\Sync\Block\System\Config\Synchronize</frontend_model>
</field>
</group>
</section>
</system>
</config>
Modelo frontend
Esta clase será responsable de representar el botón html. getButtonHtml()
La función generará el botón html.
Path: /{root_path}/magento2/app/code/Skumar/Sync/Block/System/Config/Synchronize.php
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Skumar\Sync\Block\System\Config;
/**
* Synchronize button renderer
*/
class Synchronize extends \Magento\Config\Block\System\Config\Form\Field
{
/**
* @var string
*/
protected $_template = 'Skumar_Sync::system/config/synchronize.phtml';
/**
* @param \Magento\Backend\Block\Template\Context $context
* @param array $data
*/
public function __construct(
\Magento\Backend\Block\Template\Context $context,
array $data = []
) {
parent::__construct($context, $data);
}
/**
* Remove scope label
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
*/
public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
return parent::render($element);
}
/**
* Return element html
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
*
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
return $this->_toHtml();
}
/**
* Return ajax url for synchronize button
*
* @return string
*/
public function getAjaxSyncUrl()
{
return $this->getUrl('sync/system_config/synchronize');
}
/**
* Generate synchronize button html
*
* @return string
*/
public function getButtonHtml()
{
$button = $this->getLayout()->createBlock(
'Magento\Backend\Block\Widget\Button'
)->setData(
[
'id' => 'synchronize_button',
'label' => __('Synchronize'),
]
);
return $button->toHtml();
}
}
Aquí, tenemos nuestro frontend_model
botón de renderizado. Ahora, necesitamos crear una clase de controlador que maneje nuestra solicitud ajax.
Synchronize.php
Path: /{root_path}/magento2/app/code/Skumar/Sync/Controller/Adminhtml/System/Config/Synchronize.php
<?php
/**
*
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Skumar\Sync\Controller\Adminhtml\System\Config;
use \Magento\Catalog\Model\Product\Visibility;
class Synchronize extends \Magento\Backend\App\Action
{
/**
* @var \Psr\Log\LoggerInterface
*/
protected $_logger;
/**
* @param \Magento\Backend\App\Action\Context $context
* @param \Psr\Log\LoggerInterface $logger
*/
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Psr\Log\LoggerInterface $logger
) {
$this->_logger = $logger;
parent::__construct($context);
}
/**
* Synchronize
*
* @return void
*/
public function execute()
{
$this->_logger->debug('Sync Starts!!');
// do whatever you want to do
}
}
Tenemos una función getAjaxSyncUrl()
en nuestra frontend_model
que devolverá la url de este controlador. Además, no es variable $_template
en la frontend_model
que se contiene la ruta de nuestro archivo de plantilla para nuestro procesador.
syncize.phtml
Path: /{root_path}/magento2/app/code/Skumar/Sync/view/adminhtml/templates/system/config/synchronize.phtml
<?php /* @var $block \Skumar\Sync\Block\System\Config\Synchronize */ ?>
<script>
require([
'jquery',
'prototype',
], function(jQuery){
function syncronize() {
params = {
};
new Ajax.Request('<?php /* @escapeNotVerified */ echo $block->getAjaxSyncUrl() ?>', {
loaderArea: false,
asynchronous: true,
parameters: params,
onSuccess: function(transport) {
var response = JSON.parse(transport.responseText);
}
});
}
jQuery('#synchronize_button').click(function () {
syncronize();
});
});
</script>
<?php echo $block->getButtonHtml() ?>
Puede ver en la plantilla, al hacer clic en el botón, activará una solicitud ajax para el controlador definido en forntend_model
.
Espero que sea de ayuda.
Debe definir personalizado frontend_model
para el campo de representación personalizado en la configuración. Puedes recibir ayuda de este enlace .
Para crear un botón en la sección de configuración de back-end, debe seguir estos pasos:
Paso 1: Agregar un campo es un botón en un archivo system.xml
como estos scripts:
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="namespace" translate="label" sortOrder="400">
<label>Namspace Module</label>
</tab>
<section id="section" translate="label" type="text" sortOrder="300" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>Section Name</label>
<tab>tab</tab>
<resource>Namespace_Module::resource</resource>
<group id="group_id" translate="label" type="text" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Group Label</label>
<field id="button" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
<button_label>Button</button_label>
<frontend_model>Namspace\Module\Block\System\Config\Button</frontend_model>
</field>
</group>
</section>
</system>
</config>
Paso 2: Crear botón del sistema Block
:
Crear archivo Namspace\Module\Block\System\Config\Button.php
:
<?php
namespace Namespace\Module\Block\System\Config;
use Magento\Backend\Block\Template\Context;
use Magento\Customer\Model\Session;
use Magento\Framework\ObjectManagerInterface;
class Button extends \Magento\Config\Block\System\Config\Form\Field {
/**
* Path to block template
*/
const CHECK_TEMPLATE = 'system/config/button.phtml';
public function __construct(Context $context,
$data = array())
{
parent::__construct($context, $data);
}
/**
* Set template to itself
*
* @return $this
*/
protected function _prepareLayout()
{
parent::_prepareLayout();
if (!$this->getTemplate()) {
$this->setTemplate(static::CHECK_TEMPLATE);
}
return $this;
}
/**
* Render button
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
*/
public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
// Remove scope label
$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
return parent::render($element);
}
protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
$this->addData(
[
'url' => $this->getUrl(),
'html_id' => $element->getHtmlId(),
]
);
return $this->_toHtml();
}
protected function getUrl()
{
return "url"; //This is your real url you want to redirect when click on button
}
}
Paso 3: Crear archivo view/adminhtml/templates/system/config/button.phtml
:
<div class="pp-buttons-container">
<p>
<button id="<?php echo $block->getHtmlId() ?>" onclick="setLocation('<?php /* @escapeNotVerified */ echo $block->getUrl() ?>')" type="button">
<?php /* @escapeNotVerified */ echo __('Click Here') ?>
</button>
</p>
</div>
Controller/Adminhtml/System/Config/Collection.php
?