Magento 2.x – Override HTML files
If you need to override a HTML file, ie, used on a uiComponent, you have a couple of ways to sort it, in this tutorial i will show you how to do it for the summary.html of the checkout.
- Override summary.html within a module:
/app/code/<vendor>/<module>/view/frontend/web/requirejs-config.js
|
1 2 3 4 5 6 7 8 |
var config = { map: { '*': { 'Magento_Checkout/template/summary.html': 'Vendor_Module/template/summary.html' } } }; |
/app/code/<vendor>/<module>/view/frontend/web/template/summary.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <div class="opc-block-summary" data-bind="blockLoader: isLoading"> <span data-bind="i18n: 'Order Summary'" class="title"></span> <span data-bind="i18n: 'My Custom Message'"></span> <!-- ko foreach: elems() --> <!-- ko template: getTemplate() --><!-- /ko --> <!-- /ko --> </div> |
- Override the file, directly on your custom theme (this will have priority over modules), in here:
app/design/frontend/<vendor>/<theme_name>/Magento_Checkout/web/template/summary.html
After adding whichever piece of code, you will need to run following commands:
|
1 2 3 |
rm -rf pub/static/* var/page_cache/* var/cache var/view_preprocessed/* php bin/magento cache:clean php bin/magento setup:static-content:deploy |
And that’s it. Give a try, and you should see something like this on your checkout order summary:
Happy coding.