Как создать пользовательскую форму в Magento2 Frontend?


19

Я хочу создать пользовательскую форму во внешнем интерфейсе, и с помощью этой формы клиент может получить назначение.

В моей форме у меня есть 4 поля.

  1. Имя (текстовое поле)
  2. Фамилия (текстовое поле)
  3. № телефона (числовое поле)
  4. Бронирование времени (с календарем даты и времени)

Поэтому, когда клиент заполняет эту форму и отправляет ее, я хочу вставить эти данные в базу данных и показать в разделе администратора.

Как я могу достичь этой функциональности в Magento-2.1

Я ссылался на эту ссылку, но она не соответствует моей функциональности.

Ответы:


41

Предполагая, что у вас есть следующий модуль Company/Module.

Создайте интерфейсный маршрутизатор

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

Создайте маршрут для управления:

  • ПОЛУЧИТЬ запрос, который будет отображать шаблон формы HTML
  • POST-запрос для отправки данных формы в класс Action Controller.
<?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>

Создать макет

/ app / code / Company / Module / view / внешний интерфейс / layout / module_index_booking.xml

Создайте базовый макет, чтобы связать блок с шаблоном phtml страницы формы.

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

Создать блок

/ приложение / код / ​​компания / модуль / блок / Booking.php

Создайте блок с множеством функций, которые вы хотите для своей формы.

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

Создать шаблон

/ app / code / Company / Module / view / frontend / templates / booking.phtml

Создайте шаблон с вашей HTML-формой и добавьте действие формы, соответствующее маршрутизации.

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

Создайте контроллер действий

/ приложение / код / ​​компания / модуль / контроллер / индекс / Booking.php

Создайте контроллер действий для управления запросами на маршруте.

<?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();
    }
}

При возобновлении у вас будет следующая архитектура:

приложение
  ├ код
  | ├ Компания
  | | ├ Модуль
  | | | ├ Блок
  | | | | ├ Booking.php
  | | | ├ контроллер
  | | | | ├ Индекс
  | | | | | ├ Booking.php
  | | | ├ и т. Д.
  | | | | ├ интерфейс
  | | | | | ├ rout.xml
  | | | ├ посмотреть
  | | | | ├ интерфейс
  | | | | | ├ макет
  | | | | | | ├ module_index_booking.xml
  | | | | | ├ шаблоны
  | | | | | | ├ booking.phtml

Затем выполните следующие команды:

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

Затем вы можете получить доступ к своей странице пользовательской формы: http: // localhost / companymodule / index / booking

Удачного кодирования!


как я могу увидеть это в передней части?
Навинбос

Ничего не отображая в переднем конце, я использовал front.xml frontname, но он перенаправляет на страницу 404 not found
Naveenbos

Да, я следовал тому же, и перенаправление показывает 404
Khushbu_sipl

2
Пожалуйста, обратите внимание, чтобы поместить ваш контроллер в папку с именем index. Я попробовал это также, я получил 404 страницу. Но когда я посетил devdocs.magento.com и прочитал стандартные инструкции, мне удалось решить мою проблему. Я надеюсь, что это поможет вам.
MazeStricks

1
@MartijnvanHoof Если вы расширяете модуль поставщика контактов, обязательно следуйте, какова файловая структура модуля. и там вы можете расширить и создать свою собственную логику.
MazeStricks

0

От выбора ответа я меняю строку if($post){наif($post['firstname']){

И поэтому я могу видеть форму из внешнего интерфейса и сделать щелчок, чтобы отправить к другому действию.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.