Hi everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series.
In the previous lesson, I showed everybody, How to add a new customer attribute in Magento 2.
If you don’t learn this lesson yet, you can watch it here
This is the results of the previous lesson, I added the Telephone attribute to the customer account information. How it only works on the backend, this field doesn’t show on the storefront so the customer can not edit the content.
Today, I am going to show everybody a best practice, How to override a template in Magento 2.
When do we need to override a template in Magento 2? Whenever we need to change the content displaying on it.
In this practice, we will display the telephone of a customer in the account information section. We will display it behind the Email field.
That is what we will do it displaying in this practice.
Okie, let’s go.
Let’s do this practice, you need to follow steps by step:
Step 1: Determining the template needs to override
– Enable Template Path Hints for Storefront, Log into the backend and navigate to the STORES → Settings → Configuration → Advanced → Developer
– In the Debug section, click on the field Enabled Template Path Hints for Storefront, select Yes.
– Press the button Save Config.
– Go to the page you need to add the content.
Base on the path of URL, we determine the layout file named. For this page, it will be the customer_account_index.xml
This is the path of the template file we need to override it
Similar for this page, this is the layout file named. customer_account_edit.xml
This is the template path we need to override
End of the step #1, we have determined the layouts and templates file need to override.
Step 2: Create a new layout
– Create the new layout named customer_account_index.xml in the path appcodePHPCuongCustomerAccountviewfrontendlayout
– Create the template file named info.phtml in the path appcodePHPCuongCustomerAccountviewfrontendtemplatescustomeraccountdashboard
– Create the new layout named customer_account_edit.xml in the path appcodePHPCuongCustomerAccountviewfrontendlayout
– Create the template file named edit.phtml in the path appcodePHPCuongCustomerAccountviewfrontendtemplatescustomerform
Step 3: Test and see the results.
Run the comment line following:
– php bin/magento cache:flush
Oh, it works perfectly.
For now, we try to enable the Template Path Hints for Storefront so we will see the new template in our custom module.
We have overridden the templates successfully.
Thank you for your watching. If you have any questions about this practice please feel free to leave a comment below.
Don’t forget to like, comment, share and subscribe to my channel for getting the latest videos.
Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2.