magento 2 - display shipping method logo

Question

I have created a module to add a shipping method logo. In backend its successfully working fine like uploading logo image, deleting logo image, etc. Please see the below image.

But I am stuck to display that logo image on checkout page shipping method list.

How to display custom system configuration value in knockoutjs html file. I am new to knockoutjs, please give me steps to add a logo in rates array.

Answer 1

Try with below way.

app/code/Vendor/ModuleName/view/frontend/web/js/view/custom-shipping.js

define([
'ko',
'jquery',
'uiComponent',
'mage/storage',
'mage/url'

], function (ko, $, Component, storage, url) { 'use strict';

return Component.extend({
    defaults: {
        template: 'Vendor_ModueName/payment/payment'
    },
    getconfigValue: function () {
        var serviceUrl = url.build('modulename/custom/storeconfig');

        storage.get(serviceUrl).done(
            function (response) {
                if (response.success) {
                    return response.value
                }
            }
        ).fail(
            function (response) {
                return response.value
            }
        );
        return false;
    }
});
});

Create controller

app/code/Vendor/ModuleName/Controller/Custom/Storeconfig.php

namespace Vendor\ModuleName\Controller\Custom;

class Storeconfig extends \Magento\Framework\App\Action\Action {

protected $resultJsonFactory;

protected $storeManager;

protected $scopeConfig;

public function __construct(
    \Magento\Framework\App\Action\Context $context,
    \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
    \Magento\Store\Model\StoreManagerInterface $storeManager,
    \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
) {
    $this->resultJsonFactory = $resultJsonFactory;
    $this->storeManager = $storeManager;
    $this->scopeConfig = $scopeConfig;
    parent::__construct($context);
}

/**
 * Execute view action
 *
 * @return \Magento\Framework\Controller\ResultInterface
 */
public function execute()
{
    $response = [];
    try {
        $configValue = $this->scopeConfig->getValue(
            'your/path/config',
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
        $response = [
            'success' => true,
            'value' => __($configValue)
        ];

    } catch (\Exception $e) {
        $response = [
            'success' => false,
            'value' => __($e->getMessage())
        ];
        $this->messageManager->addError($e->getMessage());
    }
    $resultJson = $this->resultJsonFactory->create();
    return $resultJson->setData($response);
}

}

Show config value using .html file as per below code.

<div class="config-data-show" data-bind="html: getconfigValue"></div>

Take reference from below 2 links

• How to get system config value to knockout template
• How to add shipping image or icon before shipping methode

Using the above 2 links you will get definitely result.

I hope it helps!