2

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.

2

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>
......
  • Thank you Khoa, you saved my day! I can confirm that I have tried the second variant and it is work. – Stanislav Spuzyak Dec 21 '17 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.