Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Magento 2 How to Override phtml or layout core files?

I had developed "Hello world" extension in Magento 2.

I want to override contact Us form of core files. What is correct way for overriding Contact us form file in Magento 2.

Please help me. Any help would be appreciated.

like image 257
Niks Avatar asked Nov 30 '22 17:11

Niks


1 Answers

Unlike the two previous answers, I chose to remove the original block from the layout and add a new one using my own template.

We will create a new module, VendorName_ModuleName, for which we need to create the following files :

  1. /app/code/VendorName/ModuleName/view/frontend/layout/contact_index_index.xml
  2. /app/code/VendorName/ModuleName/view/frontend/templates/form.phtml
  3. /app/code/VendorName/ModuleName/etc/module.xml
  4. /app/code/VendorName/ModuleName/composer.json
  5. /app/code/VendorName/ModuleName/registration.php

Every module in Magento 2 has unique name that’s made up of two parts. The first part is a word that describes the company, individual, or group that built the extension. This is sometimes called the “vendor” namespace. The second part of a module’s name is a word that describes what the module does.

Alan Storm, in his tutorial Magento 2 Hello World Module


contact_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">    
    <body>


        <!-- Remove the original Contact Form -->
        <referenceBlock name="contactForm" remove="true"/>


        <!-- Add a custom Contact Form -->
        <referenceContainer name="content">
            <block class="Magento\Contact\Block\ContactForm" name="customContactForm" template="My_Module::form.phtml" />
        </referenceContainer>
    

    </body>
</page>

In the above code, I removed the original form Block and replaced it by adding my own form inside the referenceContainer content.

Note :

In contact_index_index.xml, the code template="My_Module::form.phtml" refers to your custom contact form's phtml.


form.phtml

Now, you need to make the custom form template. You can copy the original one and make modifications to this file.

<form class="form contact"
      action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"
      id="contact-form"
      method="post"
      data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
      data-mage-init='{"validation":{}}'>
    <fieldset class="fieldset">
        <legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Write Us') ?></span></legend><br />
        <div class="field note no-label"><?php /* @escapeNotVerified */ echo __('Jot us a note and we’ll get back to you as quickly as possible.') ?></div>
        <div class="field name required">
            <label class="label" for="name"><span><?php /* @escapeNotVerified */ echo __('Name') ?></span></label>
            <div class="control">
                <input name="name" id="name" title="<?php /* @escapeNotVerified */ echo __('Name') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getUserName()) ?>" class="input-text" type="text" data-validate="{required:true}"/>
            </div>
        </div>
        <div class="field email required">
            <label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></label>
            <div class="control">
                <input name="email" id="email" title="<?php /* @escapeNotVerified */ echo __('Email') ?>" value="<?php echo $block->escapeHtml($this->helper('Magento\Contact\Helper\Data')->getUserEmail()) ?>" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
            </div>
        </div>
        <div class="field telephone">
            <label class="label" for="telephone"><span><?php /* @escapeNotVerified */ echo __('Phone Number') ?></span></label>
            <div class="control">
                <input name="telephone" id="telephone" title="<?php /* @escapeNotVerified */ echo __('Phone Number') ?>" value="" class="input-text" type="text" />
            </div>
        </div>
        <div class="field comment required">
            <label class="label" for="comment"><span><?php /* @escapeNotVerified */ echo __('What’s on your mind?') ?></span></label>
            <div class="control">
                <textarea name="comment" id="comment" title="<?php /* @escapeNotVerified */ echo __('What’s on your mind?') ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}"></textarea>
            </div>
        </div>
        <?php echo $block->getChildHtml('form.additional.info'); ?>
    </fieldset>
    <div class="actions-toolbar">
        <div class="primary">
            <input type="hidden" name="hideit" id="hideit" value="" />
            <button type="submit" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>" class="action submit primary">
                <span><?php /* @escapeNotVerified */ echo __('Submit') ?></span>
            </button>
        </div>
    </div>
</form>

registration.php

Simply replace the VendorName_ModuleName with your own.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'VendorName_ModuleName',
    __DIR__
);

module.xml

Replace VendorName_ModuleName with your own and 0.0.1 as setup version with the version of your custom module.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="VendorName_ModuleName" setup_version="0.0.1" />
</config>

composer.json

Of course, if you want to make your new module work, don't forget to add composer.json.

 {
"name": "VendorName/ModuleName",
"autoload": {
    "psr-4": { "VendorName\\ModuleName\\": "" },
    "files": [ "registration.php" ]
} }

Further Reference

  1. Magento 2 documentation for composer.json
  2. Invoke registration.php in composer.json with autoload
  3. Explore the code of Sample Modules by Magento on Github.
like image 94
Henry Avatar answered Dec 04 '22 03:12

Henry