Как я могу добавить значок перед названием способа доставки в magento2?

Поставщик: Поставщик

Модуль: Шаг проверки

Шаг 1: Переопределить компонент доставки в checkout_index_index.xml

<item name="shipping-step" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="shippingAddress" xsi:type="array">
            <item name="component" xsi:type="string">
                Vendor_CheckoutStep/js/view/krish-shipping
             </item>
         </item>
     </item>
 </item>

Шаг 2: Создание di.xml чтобы определить наш пользовательский объект в checkoutconfig в

App/code/Vendor/CheckoutStep/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <!-- pass custom variable to checkout page -->
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="checkout_custom_shipping_block" xsi:type="object">
                      Vendor\CheckoutStep\Model\CustomConfigProvider
                </item>
            </argument>
        </arguments>
    </type>
</config>

Шаг 3: Создайте customconfigprovider, чтобы добавить URL-адрес носителя в Проверка конфигурации

App/code/Vendor/CheckoutStep/Model/CustomConfigProvider.php

<?php
namespace Vendor\CheckoutStep\Model;
use Magento\Checkout\Model\ConfigProviderInterface;
class CustomConfigProvider implements ConfigProviderInterface
{
    protected $_storeManager;
    public function __construct(\Magento\Store\Model\StoreManagerInterface $storeManager)
    {
        $this->_storeManager = $storeManager;
    }

    public function getConfig()
    {
        $mediaUrl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA );
        $config = [];
        $config['mediaUrl'] = $mediaUrl;
        return $config;
    }
}

Шаг -4: Создание krish-shipping.js в

App/code/Vendor/CheckoutStep/view/frontend/web/js/view/krish-shipping.js

define(
    [
        'jquery',
        'ko',
        'Magento_Customer/js/model/customer',
        'Magento_Checkout/js/view/shipping'
    ],
    function(
        $,
        ko,
        customer,
        Component
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_CheckoutStep/shipping'
            },

            initialize: function () {
                var self = this;
                this._super();

                if (!customer.isLoggedIn()){
                    self.visible(false);
                }
            },

            getMediaUrl: function(methodCode) {
                var imageurl = window.checkoutConfig.mediaUrl + methodCode + '.png';
                return imageurl;
            }
        });
    }
);

Шаг 5: Копирование shipping.html из

Vendor/magento/module-checkout/view/frontend/web/template/shipping.html

Чтобы

App/code/Vendor/CheckoutStep/view/frontend/web/template/shipping.html

Добавить тег изображения в метод доставки для каждого цикла

<!--ko foreach: { data: rates(), as: 'method'}-->

<td class="col col-carrier">
       <img data-bind="attr: {
              'src': $parent.getMediaUrl(method.method_code)
         }" width="50"/>
</td>

Теперь скопируйте изображения доставки, такие как flatrate.png или bestway.png с именем метода в папке pub/media.

Вы также можете настроить, например, создать новое поле в admin и изменить изображение с помощью администратор с помощью файла модели customConfigProvider.