Come creare un modulo personalizzato nel frontend Magento2?


19

Voglio creare un modulo personalizzato in frontend e utilizzando questo modulo il cliente può ottenere un appuntamento.

Nella mia forma, ho 4 campi.

  1. Nome (testo archiviato)
  2. Cognome (testo archiviato)
  3. Numero di telefono (campo numerico)
  4. Prenota un orario (con calendario data e ora)

Quindi, quando un cliente compila questo modulo e invia, voglio inserire questi dati nel database e mostrarli nella sezione admin.

Come posso ottenere questa funzionalità in Magento-2.1

Ho fatto riferimento a questo link ma non è secondo la mia funzionalità.

Risposte:


41

Supponendo di avere il seguente modulo Company/Module.

Crea il router frontend

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

Crea un percorso per gestire:

  • OTTIENI una richiesta per visualizzare il modello di modulo HTML
  • Richiesta POST che invierà i dati del modulo alla classe Controller azione.
<?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 il layout

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

Creare un layout di base per associare il blocco al modello phtml della pagina del modulo

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

/ app / code / Azienda / Modulo / Blocco / Booking.php

Crea un blocco con molte funzioni che desideri per il tuo modulo.

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

/ app / codice / azienda / modulo / vista / frontend / modelli / booking.phtml

Crea un modello con il modulo HTML e aggiungi l'azione del modulo corrispondente al routing.

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

Crea il controller di azione

/ app / codice / azienda / modulo / controller / indice / prenotazione.php

Crea un Action Controller per gestire le richieste sulla rotta.

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

Nel riprendere avrai la seguente architettura:

App
  ├ codice
  | ├ Azienda
  | | ├ Modulo
  | | | ├ Blocco
  | | | | ├ Booking.php
  | | | ├ Controller
  | | | | ├ Indice
  | | | | | ├ Booking.php
  | | | ├ ecc
  | | | | ├ frontend
  | | | | | ├ route.xml
  | | | ├ vista
  | | | | ├ frontend
  | | | | | ├ layout
  | | | | | | ├ module_index_booking.xml
  | | | | | ├ modelli
  | | | | | | ├ booking.phtml

Quindi eseguire i seguenti comandi:

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

Quindi è possibile accedere alla pagina del modulo personalizzato: http: // localhost / companymodule / index / booking

Buona programmazione!


come posso vedere questo è in front-end?
Naveenbos,

Non mostrando nulla nel front-end, ho usato route.xml frontname, ma sta reindirizzando alla pagina 404 non trovata
Naveenbos

Sì, ho seguito lo stesso e il reindirizzamento mostra 404
Khushbu_sipl,

2
Si prega di prendere nota di posizionare il controller in una cartella denominata indice. Ci ho provato anche io ho 404 pagine. Ma mentre visitavo devdocs.magento.com e leggevo le istruzioni standard, sono riuscito a risolvere il mio problema. Spero che questo ti possa aiutare.
MazeStricks,

1
@MartijnvanHoof Se si estende il modulo del fornitore di contatto, assicurarsi di seguire la struttura dei file del modulo. e lì puoi estendere e creare la tua logica.
MazeStricks,

0

Dalla risposta scelta cambio linea if($post){aif($post['firstname']){

E così posso vedere il modulo da frontend e fare un clic per inviare a un'altra azione.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.