ম্যাজেন্টো 2 কনফিগারেশন বিভাগে কীভাবে একটি বোতাম তৈরি করবেন?


12

আমি কীভাবে ম্যাজেন্টো 2 ব্যাকএন্ড কনফিগারেশন বিভাগে একটি বোতাম যুক্ত করতে পারি এবং বোতামটি ক্লিক করা হলে একটি সাধারণ পিএইচপি পদ্ধতিতে কল করতে পারি?

এই পদ্ধতির কলটি একটি এজেএক্স কল হতে পারে।

উত্তর:


19

আমরা উদাহরণস্বরূপ আমাদের অন্যান্যও কিনে নেওয়া মডিউলটি ব্যবহার করে সমাধানটি বর্ণনা করব, যেখানে ম্যাগওয়ার্স - একটি বিক্রেতার নাম এবং এছাড়াও ব্যাটারব্যাট - একটি মডিউল নাম:

প্রথমত, আপনাকে কনফিগারেশন ফাইলের ক্ষেত্র হিসাবে আপনার বোতামটি যুক্ত করতে হবে। (উদাহরণ হিসাবে 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 / টেমপ্লেট / সিস্টেম / কনফিগ / 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>

আপনার প্রয়োজন অনুসারে আপনাকে কোডটির অংশটি আবার লিখতে হবে তবে আমি এটি উদাহরণ হিসাবে রেখে দেব। Ajax অনুরোধ পদ্ধতি 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');
    }
}
?>

PS এটি আমাদের MageWorx অন্যরাও কিনেছে মডিউলটির কার্যকারী উদাহরণ । আপনি যদি এটি অধ্যয়ন করতে চান তবে আপনি এটি বিনামূল্যে ডাউনলোড করতে পারেন।


আমি আপনার উত্তরটি ব্যবহার করেছি, তবে আমি কীভাবে সংজ্ঞায়িত ফাংশনগুলিকে কল করব Controller/Adminhtml/System/Config/Collection.php?
কনডোর

1

আপনি এটি বোতামের জন্য বিক্রেতা / ম্যাজেন্টো / মডিউল-গ্রাহক / ইত্যাদি / প্রশাসনিক / সিস্টেম.এক্সএমএল এও পরীক্ষা করে দেখুন । কোডের নীচে এটি উপরের পাথে চেক করুন। এই বিক্রেতা / ম্যাজেন্টো / মডিউল-গ্রাহক / ব্লক / অ্যাডমিনিচটিএমএল / সিস্টেম / কনফিগারেশন / ভ্যালিডেভ্যাট.এফপি এর মতো ফ্রন্টএন্ড_মডেল তৈরি করুন ।

<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, আপনি আপনার এজাক্স যুক্তি লিখতে পারেন।

এখানে একটি উদাহরণ:

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>

সামনের মডেল

এই শ্রেণিটি এইচটিএমএল বোতামটি রেন্ডার করার জন্য দায়বদ্ধ হবে। getButtonHtml()ফাংশন বোতাম এইচটিএমএল তৈরি করবে।

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বোতামটি রেন্ডার করতে হবে। এখন, আমাদের একটি নিয়ামক শ্রেণি তৈরি করতে হবে যা আমাদের এজ্যাক্স অনুরোধটি পরিচালনা করবে।

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>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.