Overwrite third party template file in my custom module

Question

I have done some research to this subject but couldn't seem to find a detailed answer.

What I need

To overwrite a template file from a third party module in my case: Amasty One Step Checkout

Template file to overwrite:

/app/code/Amasty/Checkout/view/frontend/web/template/onepage/shipping/methods.html

I have found that this file is loaded using knockoutjs via this function:

<!-- ko with: requestComponent('checkout.steps.shipping-step.shippingAddress') -->
<!-- ko template: 'Amasty_Checkout/onepage/shipping/methods' --><!-- /ko -->
<!--/ko-->

in file:

app\code\Amasty\Checkout\view\frontend\web\template\onepage3円columns.html

What I've done

Added module dependency

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 <module name="Plugin_Name" setup_version="1.0.0">
 <sequence>
 <module name="Magento_Checkout" />
 <module name="Amasty_Checkout" />
 </sequence>
 </module>
</config>

Tried overwriting the template file like this in my module's checkout_index_index.xml

<referenceBlock name="checkout.steps.shipping-step.shippingAddress">
 <action method="setTemplate">
 <argument name="template" xsi:type="string">Plugin_Name::shipping_view.html</argument>
 </action>
</referenceBlock>

But without success..

Can someone explain what steps to take to overwrite a third party's template file and if there is a difference if it is loaded in another template file via knockoutjs

Thanks in advance

Answer 1

Try this:

Create requirejs-config.js file at below path.

/app/code/Vendor/Module/view/frontend/requirejs-config.js

And put below code in requirejs-config.js

var config = {
 map: {
 '*': {
 'Amasty_Checkout/template/onepage/shipping/methods.html': 
 'Vendor_Module/template/onepage/shipping/methods.html'
 }
 }
};

We can override any html file in this way.

• MGento: What if we want to override a design template file to a custom module?