2

I want to add Image before Shipping method name in Checkout page.I have checked in shipping.html but here all data coming from js.I can't find proper way for it. Right now i want to add icon for "Flat Rate" shipping method.

Thanks

  • have you tried adding it via css? – steros Mar 10 '17 at 13:50
  • No because i can't find any unique class for each shipping method. – nil108 Mar 10 '17 at 14:38
  • can you add some code where you want to add it? – steros Mar 10 '17 at 14:40
3

Vendor: Vendor

Module: CheckoutStep

Step - 1: Override shipping component at checkout_index_index.php

<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>

Step -2: Create di.xml to define our custom object to checkoutConfig at

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>

Step-3: Create customConfigProvider to add media url to checkoutConfig

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;
    }
}

Step -4: Create krish-shipping.js at

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;
            }
        });
    }
);

Step-5: Copy shipping.html from

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

To

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

Add image tag in shipping method foreach loop

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

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

Now copy shipping images like flatrate.png or bestway.png with method name in pub/media folder.

You can also customize like create new field in admin and change image via admin via customConfigProvider model file.

  • Hello @Prince Patel when I change the country its reflect to shipping methods section and then logo disappear. I debug and see that in the consol that there will be another json response in which my logo is not available. Where will this json prepare? – Hiren Shah Apr 2 '19 at 6:36
  • I have error in json response – Rajesh Nagappan Jul 23 '19 at 10:42

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.