¿Cómo crear un formulario personalizado en Magento2 Frontend?

19

Quiero crear un formulario personalizado en la interfaz y usar este formulario el cliente puede obtener una cita.

En mi forma, tengo 4 campos.

  1. Nombre (texto archivado)
  2. Apellido (texto archivado)
  3. Número de teléfono (campo numérico)
  4. Reserva de una hora (con calendario de fecha y hora)

Entonces, cuando un cliente llena este formulario y lo envía, quiero insertar estos datos en la base de datos y mostrarlos en la sección de administración.

¿Cómo puedo lograr esta funcionalidad en Magento-2.1?

He referido este enlace pero no es según mi funcionalidad.

Dhaval
fuente

Respuestas:

41

Suponiendo que tiene el siguiente módulo Company/Module.

Crear el enrutador frontend

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

Crea una ruta para administrar:

  • Solicitud GET que mostrará la plantilla de formulario HTML
  • Solicitud POST que enviará datos del formulario a Action Controller Class.
<?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>

Crea el diseño

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

Cree un diseño básico para asociar el Bloque a la plantilla phtml de la página del formulario

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

Crea el bloque

/ app / code / Company / Module / Block / Booking.php

Cree un bloque con muchas funciones que desee para su formulario.

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

Crea la plantilla

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

Cree una plantilla con su formulario HTML y agregue la acción del formulario correspondiente a la ruta.

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

Crear el controlador de acción

/ app / code / Company / Module / Controller / Index / Booking.php

Cree un controlador de acción para gestionar las solicitudes en la ruta.

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

Al reanudar, tendrá la siguiente arquitectura:

aplicación
  ├ código
  El | ├ Empresa
  El | El | ├ Módulo
  El | El | El | ├ Bloque
  El | El | El | El | ├ Booking.php
  El | El | El | ├ Controlador
  El | El | El | El | ├ Índice
  El | El | El | El | El | ├ Booking.php
  El | El | El | ├ etc.
  El | El | El | El | ├ frontend
  El | El | El | El | El | ├ routes.xml
  El | El | El | ├ ver
  El | El | El | El | ├ frontend
  El | El | El | El | El | ├ diseño
  El | El | El | El | El | El | ├ module_index_booking.xml
  El | El | El | El | El | ├ plantillas
  El | El | El | El | El | El | ├ booking.phtml

Luego ejecute los siguientes comandos:

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

Luego puede acceder a su página de formulario personalizado: http: // localhost / companymodule / index / booking

¡Feliz codificación!

Antoine Subit
fuente
¿Cómo puedo ver que esto está en la parte delantera?
Naveenbos
No mostraba nada en la parte frontal, utilicé el nombre de ruta routes.xml, pero está redirigiendo a la página 404 no encontrada
Naveenbos
Sí, he seguido lo mismo, y la redirección muestra 404
Khushbu_sipl
2
Tome nota para colocar su controlador en una carpeta llamada índice. Lo he intentado también tengo 404 página. Pero cuando visité devdocs.magento.com y leí las instrucciones estándar, logré resolver mi problema. Espero que esto ayude.
MazeStricks
1
@MartijnvanHoof Si extiende el módulo del proveedor de contactos, asegúrese de seguir la estructura de archivos del módulo. y allí puedes extender y crear tu propia lógica.
MazeStricks
0

De la respuesta de elección, cambio la línea if($post){aif($post['firstname']){

Y así puedo ver el formulario desde la interfaz y hacer clic para enviarlo a otra acción.

user60037
fuente