0

I am developing a module for Magento2 that adds an image next to a specific shipping method on checkout and I am lost on how to get this done.

The shipping method in question is not custom made only the carrier label is modified in shipping settings (in the added picture the method is called "Test"). I also have a module configuration page where you enter the names of shipping methods you want this image to display next to.

My goal is to add an image next to every shipping method that is defined in custom module settings on every checkout update.

I notice that checkout updates every time a country, postcode or address is changed with a REST API call to "estimate-shipping-methods". I am looking for a way to override this method and add images to shipping options defined in module settings every time this call is made.

enter image description here

What I have done so far successfully:

  • created a module configuration page where I can enter the shipping methods that I want the image displayed next to.
  • overridden checkout_index_index.xml shippingAddress component so I can add my custom JS file (shiny.js).
  • created a sampleConfigProvider which gets shipping methods from the configuration page to my custom JS file successfully.

Module settings

Module settings

checkout_index_index.xml VendorName/ModuleName/view/frontend/layout/checkout_index_index.xml

    define(
[
    "uiComponent",
    'ko',
    'jquery',
    'domReady',
],
function(
    Component,
    ko,
    $
) {
    $(document).ready(function (){
    var checkExist = setInterval(function() {
        if ($('.loading-mask').length==0) {
            AddImage();
            clearInterval(checkExist);
            }
            }, 100); // check every 100ms
            
'use strict';
        return Component.extend({
             defaults: {
                template: 'VendorName_ModuleName/shiny'
            },
            initialize: function () {               
                this._super(); //you must call super on components or they will not render              
            },
            getTest: function () {
                return window.checkoutConfig.ps.test; --> returns successfully
            }
        });

VendorName/ModuleName/view/frontend/web/js/view/shiny.js

What I tried and failed:

  • in my custom JS file I check for the checkout loader to finish loading, then I display the image, but the problem with this method is the checkout updates on certain fields change which reloads the shipping method form and removes the image.
New contributor
Matic is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

Matic is a new contributor. Be nice, and check out our Code of Conduct.

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

Browse other questions tagged or ask your own question.