简体   繁体   中英

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.

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 .

You can do it using a plugin.

First you have to override the block and call the beforeToHtml method like this:

public function beforeToHtml(\Magento\Catalog\Block\Product\View\Description $originalBlock)
{
    $originalBlock->setTemplate('Vendorname_Modulename::description.phtml');
}

i solved this problem. if you want to override any core files, you simply use reference name and this reference name passed to referenceBlock name="passit".

For conatct us file override, first you get the original file of contactus form.phtml and after that find it's layout file contact_index_index.xml and get the reference name like "contactForm" .

System/core contact_index_index.xml File.

<referenceContainer name="content">
            <block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml">
                <container name="form.additional.info" label="Form Additional Info"/>
            </block>
        </referenceContainer>

This "contactForm" reference name passed to our extension layout file in referenceBlock tag. Please show following code.

Our Extension layout contact_index_index.xml file

<referenceBlock name="contactForm">
    <action method="setTemplate">
     <argument name="template"xsi:type="string">Test_Overide::form.phtml</argument>
   </action>
</referenceBlock>

After this , system contactus form.phtml not called, Our extension form.phtml file called. You can check using Developer front end debugging tool.

Hi easiest way to override core template file:-

module-contact/view/frontend/templates/form.phtml

go to your theme app/design/frontend/vendor/your_theme/ follow below steps:

  1. Create Magento_Contact folder (Renamed module-contact to Magento-Contact)
  2. Create templates folder
  3. Create form.phtm or copy your form.phtml from core and then edit it.

For this you need to create an extension (custom module).

Create a block , etc and view folder from app/magento.

In the etc folder create module.xml :

<?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="Xyz_Contact" setup_version="0.0.1"></module>
</config>

In the view folder create a layout folder and place code below in a file named contact_index_index.xml :

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Contact Us</title>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Xyz\Contact\Block\ContactForm" name="contactForm" template="Xyz_Contact::form.phtml">
                <container name="form.additional.info" label="Form Additional Info"/>
            </block>
        </referenceContainer>
    </body>
</page>

Create templates folder and place the code below into form.phtml :

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
?>
<form class="form contact"
      action="<?php echo $block->getFormAction(); ?>"
      id="contact-form"
      method="post"
      data-hasrequired="<?php echo __('* Required Fields') ?>"
      data-mage-init='{"validation":{}}'>
    <fieldset class="fieldset">
        <legend class="legend"><span><?php echo __('Write Us') ?></span></legend><br />
        <div class="field note no-label"><?php 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 echo __('Name') ?></span></label>
            <div class="control">
                <input name="name" id="name" title="<?php 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 echo __('Email') ?></span></label>
            <div class="control">
                <input name="email" id="email" title="<?php 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 echo __('Phone Number') ?></span></label>
            <div class="control">
                <input name="telephone" id="telephone" title="<?php echo __('Phone Number') ?>" value="" class="input-text" type="text" />
            </div>
        </div>
        <div class="field comment required">
            <label class="label" for="comment"><span><?php echo __('What’s on your mind?') ?></span></label>
            <div class="control">
                <textarea name="comment" id="comment" title="<?php 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 echo __('Submit') ?>" class="action submit primary">
                <span><?php echo __('Submit') ?></span>
            </button>
        </div>
    </div>
</form>

In Block folder, create a file named ContactForm.php and use the code below:

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Xyz\Contact\Block;

use Magento\Framework\View\Element\Template;

/**
 * Main contact form block
 */
class ContactForm extends Template
{
    /**
     * @param Template\Context $context
     * @param array $data
     */
    public function __construct(Template\Context $context, array $data = [])
    {
        parent::__construct($context, $data);
        $this->_isScopePrivate = true;
    }
}

Please do not forget to register your module in app/etc/config.php , or using the Magento binary tool from the command line: php -f bin/magento module:enable Xyz_Contact .

Here Xyz is the name of company (the vendor ) and Contact is the module name.

Let me know if you have any questions.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM