1

I have created a small module to add a product automatically at cart when a specific coupon code is applied. All is working fine except the product image is missing for the first time, but it shows the image after a refreshing full page.

product image missing in the checkout page

In my findings, KnockoutJS is working on this section to generate image/dom related stuff. Dom is not being ready properly as the product is added automatically.

I am not really sure what to do. Any help would be appreciated. Thank you.

Update: I added a new repo on GitHub for code review as it contains more codes. Please follow the link.

4
  • add your script that you tried, it will easy to help.
    – Sohel Rana
    Dec 16, 2018 at 15:43
  • @SohelRana updated code link in the above. thank you. Dec 27, 2018 at 16:47
  • I am having this problem as well. Does anyone know the answer?
    – Jeremy
    May 25, 2019 at 11:25
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review
    – HelgeB
    May 25, 2019 at 14:00

2 Answers 2

2

When a customer visits /checkout the product image is stored in: window.checkoutConfig.imageData.

Since you are adding the product with a coupon code, the page is never refreshed, so the imageData is never updated with the new product.

If you want to avoid the page refresh, then you could create a mix-in to show a default thumbnail.

  1. create reuirejs-config.js file at Vendor/Module/view/frontend/requirejs-config.js:
var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/summary/item/details/thumbnail': {
                'Vendor_Module/js/view/summary/item/details/thumbnail-mixin': true
            }
        }
    }
};
  1. Create JS Mixin File: Vendor/Module/view/frontend/web/js/view/summary/item/details/thumbnail-mixin.js
/**
 * Mixin to add a default thumbnail image to: magento/module-checkout/view/frontend/web/js/view/summary/item/details/thumbnail.js
 */

define([], function () {
    'use strict';

    const mixin = {

        getSrc: function (item) {
            return this._super() || 'https://placehold.jp/150x150.png';
        },
        getWidth: function (item) {
            return this._super() || 150;
        },
        getHeight: function (item) {
            return this._super() || 150;
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
});

FYI - I created an extension to simplify this that you can install with Composer: composer require mikedubinsky/magento2-module-checkout-thumbnail

Hope it helps someone! :)

0

Just a loose thought : could it be a cache related problem ?

As i can see on default luma theme the url of the image looks like :

(.../pub/media/catalog/product/cache/1/thumbnail/75x75/beff4985b56e3afdbeabfc89641a4582/m/s/msh03-blue_main.jpg)

so could it be that this image is not cached yet ?

At the other hand you can always refresh the block by ajax.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.