Can't override knockoutjs template

Eddcapone commented 3 years ago

Preconditions (*)

2.4.2 EE

Steps to reproduce (*)

I try to override the knockoutjs template vendor\amasty\module-single-step-checkout\view\frontend\web\template\checkout\summary\item\details.html from my own Theme. The module amasty\module-single-step-checkout is registered as Amasty_Checkout

Attempt 1:

I copied the file into my theme at THEME\Amasty_Checkout\web\template\checkout\summary\item\details.html and made my changes, then I flushed the cache and the browser cache, but it still loads the old template. I also executed grunt clean to clear static files. But it does not help either.

Attempt 2:

THEME\Company_Base\web\template\details.html (Copied from THEME\Amasty_Checkout\web\template\checkout\summary\item\details.html)
THEME\Amasty_Checkout\layout\checkout_index_index.xml:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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">
                                        <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="config" xsi:type="array">
                                                                <!-- Assigning a new template -->
                                                                <!--<item name="elementTmpl" xsi:type="string">Company_Base/details</item>-->
                                                                <item name="template" xsi:type="string">Company_Base/details</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Additional Information:

The template is set in the file vendor\amasty\module-single-step-checkout\view\frontend\web\js\view\checkout\summary\item\details.js:

/*jshint browser:true jquery:true*/
/*global alert*/
define(
    [
        'jquery',
        'Magento_Checkout/js/view/summary/item/details',
        'Magento_Checkout/js/model/quote',
        'Magento_Ui/js/modal/confirm',
        'Amasty_Checkout/js/action/remove-item',
        'Amasty_Checkout/js/action/update-item',
        'mage/translate',
        'ko',
        'Amasty_Checkout/js/options/configurable',
        'priceOptions',
        'mage/validation'
    ],
    function ($, Component, quote, confirm, removeItemAction, updateItemAction, $t, ko, configurable, priceOptions) {
        "use strict";
        return Component.extend({
            defaults: {
                template: 'Amasty_Checkout/checkout/summary/item/details'
            },
            ...

Expected result (*)

Template should get overridden

Actual result (*)

Template is not getting overridden

Please provide Severity assessment for the Issue as Reporter. This information will help during Confirmation and Issue triage processes.

[x] Severity: S0 - Affects critical data or functionality and leaves users without workaround.
[ ] Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
[ ] Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
[ ] Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
[ ] Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

m2-assistant[bot] commented 3 years ago

Hi @Eddcapone. Thank you for your report. To help us process this issue please make sure that you provided the following information:

Summary of the issue
Information on your environment
Steps to reproduce
Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release

For more details, please, review the Magento Contributor Assistant documentation.

Please, add a comment to assign the issue: @magento I am working on this

Join Magento Community Engineering Slack and ask your questions in #github channel.

:warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

:clock10: You can find the schedule on the Magento Community Calendar page.

:telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

:movie_camera: You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

:pencil2: Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

mrtuvn commented 3 years ago

Add mixin for Amasty_Checkout/js/view/checkout/summary/item/details and place you custom js in module YourBrand_CustomAmastyCheckout/js/view/checkout/summary/item/details-mixin. In side your custom component create previously then you need re-define you template When checkout custom wrap all customize in module will make you easier to maintain later

mrtuvn commented 3 years ago

This problem may suitable for magento stackexchange than git for purpose report bug. In my opinion this may not a bug

Eddcapone commented 3 years ago

@mrtuvn ok thanks, but are you sure that this is not a bug? You can override templates by placing them in your own theme. I also managed to do this with .phtml and .html but in this case it just does not work. Maybe because the template is hardcoded into the .js view model file? You can't even override it from a layout file. This looks like a bug to me. It should get programmed properly, so that you can override it from a layout file at least.

mrtuvn commented 3 years ago

I'm not sure maybe template process by jsLayout will different than normal template block (phtml) with fallback mechanism. Need to recheck

mrtuvn commented 3 years ago

Second approach you can try override html by requirejs-config.js in custom theme to replacehtml

use map directive 'Amasty_Checkout/checkout/summary/item/details': 'Amasty_Checkout/checkout/summary/item/details-custom'

Amasty_Checkout/checkout/summary/item/details-custom create your own html file in theme folder app/design/frontend/Youbrand/yourtheme/Amasty_Checkout/web/template/checkout/summary/item/details-custom.html

after that run deploy static for re-deploy

Let's me know results if you try this

Eddcapone commented 3 years ago

I already found a way to override the template via uiRegistry, but in this bug report I try to point out that it does not work the normal way. But thank you very much for your help attempt.

mrtuvn commented 3 years ago

Good to know! Glad you find the way when we got many ways to get a job done. But imo i don't like XML way with crazy XML tree xmas. Hard to track. Hope it's should be improved someday

mrtuvn commented 3 years ago

Screenshot from 2021-04-14 06-37-22 Tested replace html of component app/code/Magento/Checkout/view/frontend/web/js/view/summary/item/details.js store in module app/code/Magento/Checkout Place my html in theme luma app/design/frontend/Magento/luma/Magento_Checkout/web/template/summary/item/details.html

mrtuvn commented 3 years ago

Screenshot from 2021-04-14 06-53-15 This one demo override html via layout like your second attempt in description

Eddcapone commented 3 years ago

@mrtuvn yes I guess the bug is only caused if the template was already overriden by another module. like described in my question. There is a module called "Amasty_Checkout" which overrides the template. And I try to override the overriden template again.

--> this is the original template
vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js

--> original template from `magento/module-checkout` ↑ is overriden from `amasty\module-single-step-checkout`  third party module (works)
vendor\amasty\module-single-step-checkout\view\frontend\web\template\checkout\summary\item\details.html

--> I try to override the template from `amasty\module-single-step-checkout` by placing the file into my theme (does not work)
app/design/frontend/company/base/Amasty_Checkout/web/template/checkout/summary/item/details.html

Do you understand?

mrtuvn commented 3 years ago

Screenshot from 2021-04-14 22-04-25 still work at my local with luma vanilla setup + only amasty checkout (no Other 3rd-party extensions). Override origin template by amasty inside theme

Screenshot from 2021-04-14 22-08-50

Eddcapone commented 3 years ago

@mrtuvn ok I see you have a module called Amasty/CustomCheckout. Did you made any additional changes there to make it work?

mrtuvn commented 3 years ago

No in last reply that module not included/enable only module default of amasty and small additional html in theme

Eddcapone commented 3 years ago

@mrtuvn Ok thx for testing. I have no explanation for this then. I will close the issue and if I know how I can reproduce it everytime then I will open another issue. Thx!

mrtuvn commented 3 years ago

cc @Eddcapone If you need any further discuss please ping me or DMs to me on slack (https://magentocommeng.slack.com) or skype (see my profile).

Eddcapone commented 3 years ago

@mrtuvn ok thank you very much for your offer :) very nice from you

cartok commented 2 years ago

I have the same problem right now, tried to override vendor/magento/module-tax/view/frontend/web/template/checkout/summary/shipping.html via theme and it does not work.

hoangoclan commented 1 year ago

@cartok Disable this config in dev env will solve the problem

elburro1887 commented 1 year ago

In case this helps anyone, I just found out that Amasty's own template file in view/frontend/web/template/checkout/summary/item/details.html is only loaded when "Allow to Edit Products in the Order Summary" is set to YES. If it is set to no then Magento's own file is loaded.

Im running Magento 2.3.3 and Amasty Checkout 3.0.13

magento / magento2