0

I'm trying to override the template used by vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details/thumbnail.js:13

        return Component.extend({
    defaults: {
        template: 'Magento_Checkout/summary/item/details/thumbnail'
    },

I tried putting it here: app/design/frontend/ClientName/default/Magento_Checkout/view/frontend/web/template/summary/item/details/thumbnail.html

But it doesn't use it. The original uiComponent is defined here: vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml:399

                                                                    <item name="thumbnail" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                                                                    <item name="displayArea" xsi:type="string">before_details</item>
                                                                </item>

What is the best / most efficient method to override the default template?

1 Answer 1

1

What I did was to override the thumbnail component in a layout file, then in that component I set the template to override.

Create checkout_index_index.xml like at app/code/Vendor/Modulename/view/frontend/layout/checkout_index_index.xml :

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <!-- Modifying an existing step-->
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="cart_items" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="details" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="thumbnail" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Modulename/js/view/summary/item/details/thumbnail</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>

                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>


Create the component file at app/code/Vendor/Modulename/view/frontend/web/js/view/summary/item/details/thumbnail.js

Copy the original component into here and change the template value to your own :

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

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

    var imageData = window.checkoutConfig.imageData;

    return Component.extend({
        defaults: {
            template: 'Vendor_Modulename/summary/item/details/thumbnail'
        },
        displayArea: 'before_details',
        imageData: imageData,

        /**
         * @param {Object} item
         * @return {Array}
         */
        getImageItem: function (item) {
            if (this.imageData[item['item_id']]) {
                return this.imageData[item['item_id']];
            }

            return [];
        },

        /**
         * @param {Object} item
         * @return {null}
         */
        getSrc: function (item) {
            if (this.imageData[item['item_id']]) {
                return this.imageData[item['item_id']].src;
            }
            return null;
        },
        /**
         * @param {Object} item
         * @return {null}
         */
        getWidth: function (item) {
            if (this.imageData[item['item_id']]) {
                return this.imageData[item['item_id']].width;
            }

            return null;
        },

        /**
         * @param {Object} item
         * @return {null}
         */
        getHeight: function (item) {
            if (this.imageData[item['item_id']]) {
                return this.imageData[item['item_id']].height;
            }

            return null;
        },

        /**
         * @param {Object} item
         * @return {null}
         */
        getAlt: function (item) {
            if (this.imageData[item['item_id']]) {
                return this.imageData[item['item_id']].alt;
            }

            return null;
        }
    });
});


Create the template file with your modifications at app/code/Vendor/Modulename/view/frontend/web/template/summary/item/details/thumbnail.html


<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<span class="product-image-container"
      data-bind="attr: {'style': 'height: ' + getHeight($parents[1])/2 + 'px; width: ' + getWidth($parents[1])/2 + 'px;' }">
    <span class="product-image-wrapper">
        <img
            data-bind="attr: {'src': getSrc($parents[1]), 'width': getWidth($parents[1]), 'height': getHeight($parents[1]), 'alt': getAlt($parents[1]), 'title': getAlt($parents[1]) }"/>
    </span>
</span>

Im not sure if this is the correct way but it works for me, the only thing you would have to check is that when you upgrade magento to another version or add a patch, it might change the default thumbnail component so take this into consideration

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.