How to override a knockout HTML template file in Magento 2
Hi everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series.
Today, I am going to show everybody a best practice, How to override a knockout HTML template file in Magento 2.
By default, Magento 2 shows the payment terms in the popup content on the checkout page. However, you want to show the payment terms content below the billing information. So this practice helps to do it working.
What you will get after completing this practice?
1. You will know, how to enable the payment terms on the checkout page in Magento 2.
2. You will know, how to create a new module in Magento 2.
3. You will know, how to override a knockout HTML template file in Magento 2 using the custom module.
4. You will know, how to add the CSS to a custom module in Magento 2.
Let’s do this practice, you need to follow steps by step:
Step 1: Enable the payment terms on the checkout page
– Log into the backend and navigate to the STORES → Settings → Configuration → Sales → Checkout
– In the Checkout Options section, set the Enable Terms and Conditions to Yes
– Click Save Config button.
Step 2: Add New Payment Terms
– Navigate to the STORES → Settings → Terms and Conditions → Add New Condition
– Enter the Terms and Conditions Information
– Click Save Condition button.
Go to the checkout page
The payment terms content is showing in the popup.
And now, we will override the default of Magento 2, show the payment terms below the billing information.
Step 3: Declaring a new module called PHPCuong_PaymentTerms
– Create the namespace PHPCuong in the path appcode.
– Create the module named PaymentTerms in the path appcodePHPCuong.
– Create the file named registration.php in the path appcodePHPCuongPaymentTerms
– Create the file named module.xml in the path appcodePHPCuongPaymentTermsetc
End of the step #3, I have been completed the step to create a new module called PHPCuong_PaymentTerms.
Step 4: Override the Knockout HTML template file
– In this step, I have known the Knockout HTML template file for overriding.
You can see it here, that is the file we need to override.
– Create the new file named checkout-agreements.html in the path appcodePHPCuongPaymentTermsviewfrontendwebtemplatecheckout
– Create the new file named requirejs-config.js in the path appcodePHPCuongPaymentTermsviewfrontend
Step 5: Add the CSS to a custom module
– Create the new file named _module.less in the path appcodePHPCuongPaymentTermsviewfrontendwebcsssource
Step 6: Test and See the results
Run the commands line following:
php bin/magento setup:upgrade (Install the new modules)
php bin/magento setup:static-content:deploy (Deploy the static content)
php bin/magento cache:flush (flush caches)
Yeah, it works perfectly.
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.
Get the source code of this practice in the Github