Wie erstelle ich ein benutzerdefiniertes Formular im Magento2 Frontend?


19

Ich möchte ein benutzerdefiniertes Formular im Frontend erstellen und mit diesem Formular kann der Kunde einen Termin vereinbaren.

In meinem Formular habe ich 4 Felder.

  1. Vorname (Text abgelegt)
  2. Nachname (Text abgelegt)
  3. Telefonnummer (numerisches Feld)
  4. Zeit buchen (mit Datum Zeitkalender)

Wenn ein Kunde dieses Formular ausfüllt und abschickt, möchte ich diese Daten in die Datenbank einfügen und im Admin-Bereich anzeigen.

Wie kann ich diese Funktionalität in Magento-2.1 erreichen?

Ich habe auf diesen Link verwiesen , aber er entspricht nicht meiner Funktionalität.

Antworten:


41

Angenommen, Sie haben das folgende Modul Company/Module.

Erstellen Sie den Frontend-Router

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

Erstellen Sie eine Route zum Verwalten von:

  • GET-Anfrage, die die HTML-Formularvorlage anzeigt
  • POST-Anforderung, die Formulardaten an die Action Controller-Klasse sendet.
<?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>

Erstellen Sie das Layout

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

Erstellen Sie ein Basislayout, um den Block mit der Formularseiten-HTML-Vorlage zu verknüpfen

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

Erstellen Sie den Block

/ app / code / Firma / Modul / Block / Buchung.php

Erstellen Sie einen Block mit vielen Funktionen, die Sie für Ihr Formular benötigen.

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

Erstellen Sie die Vorlage

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

Erstellen Sie eine Vorlage mit Ihrem HTML-Formular und fügen Sie die dem Arbeitsplan entsprechende Formularaktion hinzu.

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

Erstellen Sie den Action Controller

/ app / code / Unternehmen / Modul / Controller / Index / Booking.php

Erstellen Sie einen Action Controller, um die Anforderungen auf der Route zu verwalten.

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

In der Wiederaufnahme werden Sie die folgende Architektur haben:

App
  ├ Code
  | ├ Firma
  | | ├ Modul
  | | | ├ Blockieren
  | | | | ├ Buchung.php
  | | | ├ Steuerung
  | | | | ├ Index
  | | | | | ├ Buchung.php
  | | | ├ usw
  | | | | ├ Frontend
  | | | | | ├ routes.xml
  | | | ├ anzeigen
  | | | | ├ Frontend
  | | | | | ├ Layout
  | | | | | | ├ module_index_booking.xml
  | | | | | ├ Vorlagen
  | | | | | | ├ booking.phtml

Führen Sie dann folgende Befehle aus:

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

Dann können Sie auf Ihre benutzerdefinierte Formularseite zugreifen: http: // localhost / companymodule / index / booking

Viel Spaß beim Codieren!


Wie kann ich sehen, dass dies im Front-End ist?
Naveenbos

Ich habe im Frontend nichts angezeigt und die Datei routes.xml frontname verwendet. Sie wird jedoch auf die Seite 404 umgeleitet, die nicht gefunden wurde
Naveenbos,

Ja, ich bin dem gleichen gefolgt und die Umleitung zeigt 404
Khushbu_sipl

2
Bitte beachten Sie, dass Sie Ihren Controller in einem Ordner namens index ablegen müssen. Ich habe es auch versucht, ich habe 404 Seite. Aber als ich devdocs.magento.com besuchte und die Standardanweisungen las, konnte ich mein Problem lösen. Ich hoffe, dies wird dir helfen.
MazeStricks

1
@MartijnvanHoof Wenn Sie das Modul "Contact Vendor" erweitern, müssen Sie unbedingt die Dateistruktur des Moduls beachten. und dort können Sie Ihre eigene Logik erweitern und erstellen.
MazeStricks

0

Von der Auswahlantwort ändere ich die Zeile if($post){aufif($post['firstname']){

Und so kann ich das Formular vom Frontend aus sehen und einen Klick ausführen, um es an eine andere Aktion zu senden.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.