উত্তর:
আমরা উদাহরণস্বরূপ আমাদের অন্যান্যও কিনে নেওয়া মডিউলটি ব্যবহার করে সমাধানটি বর্ণনা করব, যেখানে ম্যাগওয়ার্স - একটি বিক্রেতার নাম এবং এছাড়াও ব্যাটারব্যাট - একটি মডিউল নাম:
প্রথমত, আপনাকে কনফিগারেশন ফাইলের ক্ষেত্র হিসাবে আপনার বোতামটি যুক্ত করতে হবে। (উদাহরণ হিসাবে 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 অন্যরাও কিনেছে মডিউলটির কার্যকারী উদাহরণ । আপনি যদি এটি অধ্যয়ন করতে চান তবে আপনি এটি বিনামূল্যে ডাউনলোড করতে পারেন।
আপনি এটি বোতামের জন্য বিক্রেতা / ম্যাজেন্টো / মডিউল-গ্রাহক / ইত্যাদি / প্রশাসনিক / সিস্টেম.এক্সএমএল এও পরীক্ষা করে দেখুন । কোডের নীচে এটি উপরের পাথে চেক করুন। এই বিক্রেতা / ম্যাজেন্টো / মডিউল-গ্রাহক / ব্লক / অ্যাডমিনিচটিএমএল / সিস্টেম / কনফিগারেশন / ভ্যালিডেভ্যাট.এফপি এর মতো ফ্রন্টএন্ড_মডেল তৈরি করুন ।
<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>
আপনার রেফারেন্সের জন্য উপরের পাথ। এখন আপনার নিজের মডিউল জন্য উপযুক্ত তৈরি করুন।
সিস্টেম কনফিগারেশনে একটি বোতাম যুক্ত করতে এবং একটি কাস্টম ফাংশন চালাতে, 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: 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>
Controller/Adminhtml/System/Config/Collection.php
?