Як створити спеціальну форму в Magento2 Frontend?


19

Я хочу створити спеціальну форму в інтерфейсі, і за допомогою цієї форми клієнт може отримати зустріч.

У своєму вигляді у мене є 4 поля.

  1. Ім'я (текст подано)
  2. Прізвище (текст подано)
  3. Номер телефону (числове поле)
  4. Бронювання часу (з календарем часу)

Тож, коли клієнт заповнює цю форму і подає заявку, я хочу вставити ці дані в базу даних і показати в розділі адміністратора.

Як я можу досягти цієї функціональності в Magento-2.1

Я посилався на це посилання, але це не відповідає моїй функціональності.

Відповіді:


41

Припустимо, що у вас є наступний модуль Company/Module.

Створіть фронтальний роутер

/ app / code / Компанія / Модуль / тощо / frontend / routes.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 / Компанія / Модуль / view / frontend / 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 / Компанія / Модуль / 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
  | | | ├ тощо
  | | | | ├ фронтенд
  | | | | | ├ route.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

Щасливого кодування!


як я можу побачити, що це передній край?
Naveenbos

Не показуючи нічого на передньому кінці, я використав переднє ім’я route.xml, але воно перенаправляє на сторінку 404 не знайдено
Naveenbos

Так, я дотримувався того ж, і перенаправлення показує 404
Khushbu_sipl

2
Зверніть увагу, щоб розмістити контролер у папці під назвою index. Я також спробував це, я отримав 404 сторінки. Але коли я відвідав devdocs.magento.com і прочитав стандартні інструкції, мені вдалося вирішити свою проблему. Я сподіваюся, що це вам допоможе.
MazeStricks

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

0

З відповіді на вибір я змінюю рядок if($post){наif($post['firstname']){

І тому я можу побачити форму з frontend і зробити клацання, щоб надіслати іншу дію.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.