首先，我们需要创建registration.php和etc/module.xml文件：
Registration.php:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Magenest_Feedback',
__DIR__
);
Module.xml:
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magenest_Feedback"/>
</config>
Db_schema.xml:
<?xml version="1.0"?>
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
<table name="magenest_feedback" resource="default" engine="innodb" comment="Magenest Feedback">
<column xsi:type="int" name="entity_id" padding="10" unsigned="true" nullable="false" identity="true" comment="ID"/>
<column xsi:type="int" name="product_id" nullable="false" comment="Product Id"/>
<column xsi:type="int" name="order_id" comment="Order Id"/>
<column xsi:type="int" name="customer_id" comment="Customer Id"/>
<column xsi:type="varchar" name="message" length="255" comment="Message"/>
<column xsi:type="boolean" name="status" default="0" comment="Status"/>
<constraint xsi:type="primary" referenceId="PRIMARY">
<column name="entity_id"/>
</constraint>
<index referenceId="magenest_feedback_entity_id" indexType="btree">
<column name="entity_id"/>
</index>
</table>
</schema>
创建routes, controller, layout
routes： etc\frontend\routes.xml:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="feedback" frontName="feedback">
<module name="Magenest_Feedback"/>
</route>
</router>
</config>
controller：Controller\Customer\Index.php
<?php
/**
* Copyright © 2021 Magenest. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Magenest\Feedback\Controller\Customer;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\View\Result\PageFactory;
class Index extends Action
{
protected $_pageFactory;
public function __construct(
Context $context,
PageFactory $pageFactory
){
parent::__construct($context);
$this->_pageFactory = $pageFactory;
}
public function execute()
{
return $this->_pageFactory->create();
}
}
到这里，您可以访问http://baseURL/feedback/customer/index默认Magento布局和空白内容区域
创建 layout view\frontend\layout\feedback_customer_index.xml:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Magenest\Feedback\Block\Customer\Feedback" name="customer_feedback" template="Magenest_Feedback::customer_feedback.phtml"/>
</referenceContainer>
</body>
</page>
创建block, template
View\frontend\templates\customer_feedback.phtml
<?php
/**
* @var \Magenest\Feedback\Block\Customer\Feedback $block ;
*/
?>
<div id="feedback-form-data" data-bind="scope: 'feedback-data'">
<!-- ko template: getTemplate() --> <!-- /ko -->
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"feedback-data": {
"component": "Magenest_Feedback/js/view/customer-feedback",
"feedbackData": <?php /* @escapeNotVerified */ echo $block->feedbackLastData(); ?>
}
}
}
}
}
</script>
Block\Customer\Feedback.php
<?php
/**
* Copyright © 2021 Magenest. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Magenest\Feedback\Block\Customer;
use Magento\Framework\View\Element\Template;
use Magenest\Feedback\Model\ResourceModel\Feedback\CollectionFactory;
use Magento\Framework\Json\Helper\Data;
class Feedback extends Template
{
protected $feedbackCollectionFactory;
protected $jsonHelper;
public function __construct(
Template\Context $context,
CollectionFactory $feedbackCollectionFactory,
Data $jsonHelper,
array $data = []
){
$this->feedbackCollectionFactory = $feedbackCollectionFactory;
$this->jsonHelper = $jsonHelper;
parent::__construct($context, $data);
}
public function feedbackLastData(){
//we get the last feedback
$feedbackData = $this->feedbackCollectionFactory->create()
->getLastItem()->getData();
return $this->jsonHelper->serialize($feedbackData);
}
}
创建component ,template:
创建 component :view\frontend\web\js\customer_feedback.js:
define([
'jquery',
'ko',
'uiComponent',
'mage/url',
'Magento_Ui/js/modal/alert',
], function($, ko, Component, url, alert) {
return Component.extend({
defaults: {
template: 'Magenest_Feedback/customer-feedback',
data : ko.observableArray([])
},
initialize: function () {
this._super();
this.data(this.feedbackData);
},
initObserver: function () {
this._super();
},
sendFeedback: function ($param) {
var data = {
'order_id': $('#order_id').val(),
'product_id': $('#product_id').val(),
'message': $('#message').val(),
};
$.ajax({
url: url.build('feedback/customer/save'),
data: data,
type: 'get',
dataType: 'json',
context: this,
success: function (response) {
if (response.status === true){
this.data(response.newData);
alert({
content: $.mage.__('Thanks for Submitting.')
});
}
},
});
}
});
});
feedback view\frontend\web\template\customer-feedback.html:
<form class="form customer-feedback">
<div class="field">
<label class="label">
<span><!-- ko i18n: 'Product Id'--><!-- /ko --></span>
</label>
<div class="control">
<input id="product_id" name="product_id" type="number" value="" class="input-text">
</div>
</div>
<div class="field">
<label class="label">
<span><!-- ko i18n: 'Order Id'--><!-- /ko --></span>
</label>
<div class="control">
<input id="order_id" name="order_id" type="number" value="" class="input-text">
</div>
</div>
<div class="field">
<label class="label">
<span><!-- ko i18n: 'Message'--><!-- /ko --></span>
</label>
<div class="control">
<textarea id="message" name="message"></textarea>
</div>
</div>
<br/>
<div class="actions-toolbar">
<div class="primary">
<button type="submit" class="action primary" data-bind="click : sendFeedback">
<span>Submit</span>
</button>
</div>
</div>
</fieldset>
</form>
<table>
<thead>
<tr>
<th><span data-bind="i18n: 'Id'"></span></th>
<th><span data-bind="i18n: 'Product Id'"></span></th>
<th><span data-bind="i18n: 'Order Id'"></span></th>
<th><span data-bind="i18n: 'Message'"></span></th>
<th><span data-bind="i18n: 'Status'"></span></th>
</tr>
</thead>
<tbody data-bind="foreach: data">
<tr>
<td data-bind="text: entity_id"></td>
<td data-bind="text: product_id"></td>
<td data-bind="text: order_id"></td>
<td data-bind="text: message"></td>
<td data-bind="text: status"></td>
</tr>
</tbody>
</table>
