Magento 2 कॉन्फ़िगरेशन अनुभाग में एक बटन कैसे बनाएं?

12

मैं Magento 2 बैकएंड कॉन्फ़िगरेशन अनुभाग में एक बटन कैसे जोड़ सकता हूं और बटन क्लिक करने पर एक सरल PHP विधि कह सकता हूं?

यह मेथड कॉल AJAX कॉल हो सकती है।

magento2  admin  backend 
— nuwaus
स्रोत

जवाबों:

20

हम उदाहरण के रूप में हमारे अन्य भी खरीदा मॉड्यूल का उपयोग कर समाधान का वर्णन करेंगे, जहां MageWorx - एक विक्रेता का नाम और इसके अलावा - एक मॉड्यूल नाम:

सबसे पहले, आपको कॉन्फ़िगरेशन फ़ाइल में फ़ील्ड के रूप में अपना बटन जोड़ने की आवश्यकता है। (उदाहरण के रूप में mageworx_collect):

एप्लिकेशन / कोड / 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>

इस फ़ील्ड-बटन को खींचने के लिए फ्रंटेंड मॉडल MageWorx\AlsoBought\Block\System\Config\Collectका उपयोग किया जाएगा। इसे बनाओ:

एप्लिकेशन / कोड / MageWorx / AlsoBought / ब्लॉक / सिस्टम / कॉन्फ़िग / 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();
    }
}
?>

यह एक विशिष्ट क्षेत्र मॉडल है। बटन getButtonHtml()विधि का उपयोग करके तैयार किया गया है। getAjaxUrl()URL प्राप्त करने के लिए विधि का उपयोग करें ।

फिर, आपको टेम्पलेट की आवश्यकता होगी:

एप्लिकेशन / कोड / MageWorx / AlsoBought / देखें / adminhtml / टेम्पलेट्स / प्रणाली / 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>

आपको अपनी आवश्यकताओं के अनुसार कोड के हिस्से को फिर से लिखना होगा लेकिन मैं इसे एक उदाहरण के रूप में छोड़ दूंगा। अजाक्स अनुरोध विधि onCreateऔर onSuccessआपकी आवश्यकताओं के अनुरूप होनी चाहिए। इसके अलावा, आप <span class="collect-indicator" id="collect_span">तत्व को हटा सकते हैं । हम इसका उपयोग लोडिंग (स्पिनर) और कार्रवाई के परिणाम को प्रदर्शित करने के लिए करते हैं।

साथ ही, आपको एक नियंत्रक की आवश्यकता होगी, जहां सभी आवश्यक कार्यों को संसाधित किया जाएगा, और एक राउटर।

एप्लिकेशन / कोड / 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>

एप्लिकेशन / कोड / MageWorx / AlsoBought / नियंत्रक / Adminhtml / सिस्टम / कॉन्फ़िग / 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');
    }
}
?>

पुनश्च यह हमारे MageWorx अन्य भी खरीदा मॉड्यूल से काम कर उदाहरण है । यदि आप इसका अध्ययन करना चाहते हैं, तो आप इसे मुफ्त में डाउनलोड कर सकते हैं।

— MageWorx
स्रोत
मैंने आपके उत्तर का उपयोग किया है, लेकिन मैं कैसे परिभाषित कार्यों को कॉल करूं Controller/Adminhtml/System/Config/Collection.php?
— कोंडोर
1

आप इसे वेंडर / मैगनेटो / मॉड्यूल-कस्टमर / etc / adminhtml / system.xml में बटन के लिए भी चेक करते हैं । नीचे दिए गए कोड को उपरोक्त पथ में देखें। इस विक्रेता / magento / मॉड्यूल-ग्राहक / ब्लॉक / Adminhtml / प्रणाली / विन्यास / Validatevat.php जैसे frontend_model बनाएँ ।

<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>

आपके संदर्भ के लिए ऊपर का रास्ता। अब अपने खुद के मॉड्यूल के लिए उचित बनाएँ।

— पायल पटेल
स्रोत
1

सिस्टम कॉन्फ़िगरेशन में एक बटन जोड़ने और एक कस्टम फ़ंक्शन चलाने के लिए, आपको frontend_modelअपना बटन रेंडर करने के लिए बनाने की आवश्यकता है । के टेम्पलेट में frontend_model, आप अपने ajax तर्क लिख सकते हैं।

यहाँ एक उदाहरण है:

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>

फ्रंटेंड मॉडल

यह क्लास बटन html रेंडर करने के लिए जिम्मेदार होगी। getButtonHtml()फ़ंक्शन बटन 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();
    }
}

यहाँ, हम frontend_modelबटन रेंडर करने के लिए हमारे हैं । अब, हमें एक नियंत्रक वर्ग बनाने की आवश्यकता है जो हमारे 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
    }
}

हमारे पास एक फ़ंक्शन getAjaxSyncUrl()है frontend_modelजो इस नियंत्रक के url को लौटाएगा। इसके अलावा, इसमें परिवर्तनशील $_templateहै frontend_modelजो हमारे रेंडरर के लिए हमारी टेम्पलेट फ़ाइल का पथ रखता है।

synchronize.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() ?>

आप टेम्पलेट में देख सकते हैं, बटन पर क्लिक करने पर, यह निर्धारित किए गए नियंत्रक के लिए एक अजाक्स अनुरोध को ट्रिगर करेगा forntend_model।

मुझे उम्मीद है इससे मदद मिलेगी।

— श्याम
स्रोत
1

आपको frontend_modelकॉन्फ़िगरेशन में कस्टम रेंडर फ़ील्ड के लिए कस्टम को परिभाषित करने की आवश्यकता है । आप इस लिंक की मदद ले सकते हैं ।

— सौरव
स्रोत
1

बैकएंड कॉन्फ़िगरेशन अनुभाग में एक बटन बनाने के लिए, आपको इन चरणों को करने की आवश्यकता है:

चरण 1: system.xmlइन स्क्रिप्ट्स की तरह फ़ाइल में फ़ील्ड जोड़ें बटन है :

<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>

चरण 2: सिस्टम बटन बनाएँ Block:

फ़ाइल बनाएँ 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
    }

}

चरण 3: फ़ाइल बनाएँ 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>
— हù हếन को नमस्कार करें
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.