Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
I have the plugin in a directory
app/code/Amasty/Checkout/view/frontend/web/template/onepage/shipping/methods.html
that I would like to style (unfortunately, it can't be done only with CSS).
Is it possible to overwrite a plugin's template?
As it is not a good idea to fiddle with the files in plugin's folder.
It is an HTML template:
app/code/Amasty/Checkout/view/frontend/web/template/onepage/shipping/methods.html
I can give you some suggestions:
1) Override it by using require js:
http://devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/custom_js.html
requirejs-config.js
var config = {
map: {
'*': {
'Amasty_Checkout/template/onepage/shipping/methods.html':
'Vendor_Module/template/onepage/shipping/methods.html'
}
}
};
2) If having a custom theme, copy to your theme
For example:
app/design/frontend/[Vendor]/[theme]/Magento_Checkout/web/template/onepage/shipping/methods.html
3) This way is always useful for Checkout page: change template or js component via XML. If you want to use this way, you should learn more about the js component. Read more here: http://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_customize.html
Search through the module or project: onepage/shipping/methods, you can see this file in XML or Js file.
a) Change JS component:
[Vendor]/[Module]/view/frontend/layout/checkout_index_index.xml:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="before-shipping-method-form" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping_policy" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Checkout/js/[your]/[js]/[component]</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
In this way, you can add custom Js function to the template. BUT, for the JS component, one of the difficult parts of Magento 2, should start learning here:
https://alanstorm.com/magento_2_introducing_ui_components/
http://devdocs.magento.com/guides/v2.1/ui_comp_guide/bk-ui_comps.html
b) Change template via XML: if simply want to change the html template, choose this way
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="before-shipping-method-form" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping_policy" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Checkout/[your]/[template]</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
You can combine two ways together:
......
<item name="shipping_policy" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Checkout/js/[your]/[js]/[component]</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Vendor_Checkout/[your]/[template]</item>
</item>
</item>
......
