Làm cách nào để tạo biểu mẫu tùy chỉnh trong Magento2 Frontend?


19

Tôi muốn tạo một biểu mẫu tùy chỉnh ở lối vào và sử dụng biểu mẫu này khách hàng có thể nhận được một cuộc hẹn.

Trong hình thức của tôi, tôi có 4 lĩnh vực.

  1. Tên (văn bản nộp)
  2. Họ (văn bản nộp)
  3. Số điện thoại (trường số)
  4. Đặt thời gian (với lịch ngày giờ)

Vì vậy, khi một khách hàng điền vào biểu mẫu này và không gửi, tôi muốn chèn dữ liệu này vào cơ sở dữ liệu và hiển thị trong phần quản trị.

Làm cách nào tôi có thể đạt được chức năng này trong Magento-2.1

Tôi đã giới thiệu liên kết này nhưng nó không theo chức năng của tôi.

Câu trả lời:


41

Giả sử bạn có mô-đun sau Company/Module.

Tạo bộ định tuyến lối vào

/ app / code / Company / Module / etc / frontend / Rout.xml

Tạo một tuyến đường để quản lý:

  • NHẬN yêu cầu sẽ hiển thị mẫu biểu mẫu HTML
  • POST yêu cầu sẽ gửi dữ liệu biểu mẫu đến Lớp điều khiển hành động.
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="companymodule" frontName="companymodule">
            <module name="Company_Module"/>
        </route>
    </router>
</config>

Tạo bố cục

/ app / code / Company / Module / view / frontend / layout / module_index_booking.xml

Tạo bố cục cơ bản để liên kết Khối với mẫu phtml của trang mẫu

<?xml version="1.0"?>
<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>HTML title - The booking form page</title>
    </head>
    <body>
        <referenceBlock name="navigation.sections" remove="true" />
        <referenceContainer name="content">
            <block class="Company\Module\Block\Booking" name="companymodule.booking" template="Company_Module::booking.phtml"/>
        </referenceContainer>
    </body>
</page>

Tạo khối

/ ứng dụng / mã / Công ty / Mô-đun / Chặn / Đặt trước.php

Tạo một khối với nhiều chức năng bạn muốn cho biểu mẫu của bạn.

<?php

namespace Company\Module\Block;

class Booking extends \Magento\Framework\View\Element\Template
{
    /**
     * Construct
     *
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template $context,
        array $data = []
    )
    {
        parent::__construct($context, $data);
       }

    /**
     * Get form action URL for POST booking request
     *
     * @return string
     */
    public function getFormAction()
    {
            // companymodule is given in routes.xml
            // controller_name is folder name inside controller folder
            // action is php file name inside above controller_name folder

        return '/companymodule/controller_name/action';
        // here controller_name is index, action is booking
    }
}

Tạo mẫu

/ ứng dụng / mã / Công ty / Mô-đun / chế độ xem / frontend / mẫu / booking.phtml

Tạo một mẫu với biểu mẫu HTML của bạn và thêm hành động biểu mẫu tương ứng với định tuyến.

<h1>Booking page</h1>

<form action="<?php echo $block->getFormAction() ?>" method="post">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input name="phone" type="text">
    <input name="bookingTime" type="date">
    <input type="submit" value="Send booking informations">
</form>

Tạo bộ điều khiển hành động

/ ứng dụng / mã / Công ty / Mô-đun / Trình điều khiển / Chỉ mục / Đặt trước.php

Tạo Bộ điều khiển hành động để quản lý các yêu cầu trên tuyến.

<?php

namespace Company\Module\Controller\Index;

use Magento\Framework\Controller\ResultFactory;

class Booking extends \Magento\Framework\App\Action\Action
{
    /**
     * Booking action
     *
     * @return void
     */
    public function execute()
    {
        // 1. POST request : Get booking data
        $post = (array) $this->getRequest()->getPost();

        if (!empty($post)) {
            // Retrieve your form data
            $firstname   = $post['firstname'];
            $lastname    = $post['lastname'];
            $phone       = $post['phone'];
            $bookingTime = $post['bookingTime'];

            // Doing-something with...

            // Display the succes form validation message
            $this->messageManager->addSuccessMessage('Booking done !');

            // Redirect to your form page (or anywhere you want...)
            $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
            $resultRedirect->setUrl('/companymodule/index/booking');

            return $resultRedirect;
        }
        // 2. GET request : Render the booking page 
        $this->_view->loadLayout();
        $this->_view->renderLayout();
    }
}

Khi tiếp tục, bạn sẽ có kiến ​​trúc sau:

ứng dụng
  Mã
  | Công ty
  | | Mô-đun
  | | | Khối
  | | | | Đặt trước.php
  | | | Bộ điều khiển
  | | | | Chỉ số
  | | | | | Đặt trước.php
  | | | V.v.
  | | | | Lối vào
  | | | | | ├ tuyến đường
  | | | Xem
  | | | | Lối vào
  | | | | | Bố trí
  | | | | | | ├ module_index_booking.xml
  | | | | | Mẫu
  | | | | | | Đặt phòng.

Sau đó chạy các lệnh sau:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush

Sau đó, bạn có thể truy cập vào trang biểu mẫu tùy chỉnh của mình: http: // localhost / companymodule / index / booking

Chúc mừng mã hóa!


Làm thế nào tôi có thể thấy điều này là ở phía trước?
Naveenbos

Không hiển thị bất cứ điều gì ở giao diện người dùng, tôi đã sử dụng tên trước của Rout.xml, nhưng nó đang chuyển hướng đến trang không tìm thấy 404
Naveenbos

Có, tôi đã làm theo như vậy và chuyển hướng hiển thị 404
Khushbu_sipl

2
Vui lòng lưu ý để đặt bộ điều khiển của bạn trong một thư mục được gọi là chỉ mục. Tôi đã thử nó tôi cũng có trang 404. Nhưng khi tôi truy cập devdocs.magento.com và đọc các hướng dẫn tiêu chuẩn, tôi đã giải quyết được vấn đề của mình. Tôi hy vọng điều này sẽ giúp bạn.
Mê cung

1
@MartijnvanHoust Nếu bạn mở rộng mô-đun nhà cung cấp liên hệ, hãy chắc chắn làm theo cấu trúc tệp của mô-đun là gì. và ở đó bạn có thể mở rộng và tạo logic của riêng bạn.
Mê cung

0

Từ phản ứng lựa chọn, tôi thay đổi dòng if($post){thànhif($post['firstname']){

Và vì vậy tôi có thể thấy biểu mẫu từ frontend và nhấp chuột để gửi đến một hành động khác.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.