Magento 2 : cashondelivery.phtml file custom code not show

Question

First I try to modify the code directly of core file.

vendor\magento\module-offline-payments\view\frontend\templates\form\cashondelivery.phtml

I added testing code like this.

<?php $instructions = $block->getInstructions(); ?>
<?php if ($instructions): ?>
    <?php echo "MY CUSTOM CODE HERE"; ?>
    <?php $methodCode = $block->escapeHtml($block->getMethodCode());?>
    <div class="items <?= /* @noEscape */ $methodCode ?> instructions agreement" id="payment_form_<?= /* @noEscape */ $methodCode ?>" style="display: none;">
        <?= /* @noEscape */ nl2br($block->escapeHtml($instructions)) ?>
    </div>
<?php endif; ?>

Here I have one question.

Where my custom message show? Currently it not showing my message any where on checkout???

Thanks in advance.

Answer 1

You have to work on vendor/magento/module-offline-payments/view/frontend/web/template/payment/cashondelivery.html

As magento2 manage checkout steps manage from knockout js & UI element. So you have to copy cashondelivery.html to

app/design/frontend/{ThemeVendor}/{Themename}/web/template/payment/cashondelivery.html

and Do add this text to here.

Then do static content deploy and cache flush.

By Custom module

Create requirejs-config.js at /app/code/{VenDorName}/{Module}/view/frontend. Override the knockout js using and it code

requirejs-config.js code is below

var config = {
    map: {
        '*': {
            'Magento_OfflinePayments/js/view/payment/method-renderer/cashondelivery-method' : '{VenDorName}_{Module}/js/view/payment/method-renderer/cashondelivery-method',
        }
    }
};

Create knock view file cashondelivery-method.js at /app/code/{VenDorName}/{Module}/view/frontend/web/js/view/payment/method-renderer/.

and code is

define([
    'Magento_Checkout/js/view/payment/default'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: '{VenDorName}_{Module}/payment/cashondelivery'
        },

        /**
         * Returns payment method instructions.
         *
         * @return {*}
         */
        getInstructions: function () {
            return window.checkoutConfig.payment.instructions[this.item.method];
        }
    });
});

And copy vendor/magento/module-offline-payments/view/frontend/web/template/payment/cashondelivery.html to

/app/code/{VenDorName}/{Module}/view/frontend/web/template/payment/cashondelivery.html

After that you have to do Static content deploy

Answer 2

module-offline-payments\view\frontend\templates\form\cashondelivery.phtml is for Check Out with Multiple Addresses

Answer 3

Above answer using theme is not working because need to create folder having name Magento_OfflinePayments in theme.

So the Actual path in your custom theme to override this file will be:

app/design/frontend/Smartwave/porto/Magento_OfflinePayments/web/template/payment/cashondelivery.html