1

I try to add more KO functions to the Magento_Checkout/template/summary.html

I have an own extension "XXX_Checkout"

For this i do the follow parts:

  1. Create Mixin

/app/code/XXX/Checkout/view/frontend/requirejs-config.js

    var config = {
    map: {
        '*': {
            'Magento_Checkout/js/view/shipping': 'XXX_Checkout/js/view/shipping',
            'Magento_Checkout/js/view/payment': 'XXX_Checkout/js/view/payment',
            'Magento_Checkout/js/model/shipping-save-processor/default': 'XXX_Checkout/js/model/shipping-save-processor/default',
            'Magento_Checkout/template/summary.html': 'XXX_Checkout/template/summary.html'
        }
    },
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-payment-information': {
                'XXX_Checkout/js/order/set-payment-information-mixin': true
            },
            'Magento_Checkout/js/view/summary': {
                'XXX_Checkout/js/view/summary-mixin': true
            }
        }
    }
};

For this i place the original summary.html in my Extension and place some additional code:

/app/code/XXX/Checkout/view/frontend/web/template/summary.html

<div class="opc-block-summary" data-bind="blockLoader: isLoading">
    <span data-bind="i18n: 'Order Summary'" class="title"></span>
    <!-- ko foreach: elems() -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
</div>

<!-- ko if: (isVisiblePaymentButton()) -->
<div class="actions-toolbar-trigger" id="place-order-trigger-wrapper">
    <button type="button" class="button action primary" id="place-order-trigger">
        <span><!-- ko i18n: 'Place Order'--><!-- /ko --></span>
    </button>
</div>
<!-- /ko -->

Now i add the summary-mixin.js

/app/code/Team23/Checkout/view/frontend/web/js/view/summary-mixin.js

define([
    'jquery',
    'jquery/ui',
    'ko',
    'Magento_Checkout/js/model/step-navigator'
], function($, ui, ko, stepNavigator){
    'use strict';
    var mixin = {
        isVisibleShippingButton: function () {
            return !stepNavigator.getActiveItemIndex();
        },

        isVisiblePaymentButton: function () {
            return stepNavigator.getActiveItemIndex();
        },

        initialize: function () {
            var self = this;

            $(function() {
                $('body').on('click', '#place-order-trigger', function () {
                    $('.payment-method._active').find('.action.primary.checkout').trigger('click');
                });
            });

            this._super();
        }
    };

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

After build and cache clean i get this error in my console:

knockout.js:3012 Uncaught ReferenceError: Unable to process binding "if: function(){return (isVisiblePaymentButton()) }"
Message: isVisiblePaymentButton is not defined
    at if (eval at createBindingsStringEvaluator (knockout.js:2624), 

So i think, the mixin is not working.

What is wrong?

Best regards Andre

  • I never knew that we can map .html files too like that – LAW Nov 30 '18 at 7:31
  • Can you please check if summary-mixin is loading in the browser. – Anshu Mishra Nov 30 '18 at 7:52
  • no is nit loading ...so i think something is wrong. – Andre Bubner Nov 30 '18 at 9:22
  • @LAW .. when u work in a extension with a view and you want to overwrite a knockout html than u have to do this .. so the specs. did you know another way? – Andre Bubner Nov 30 '18 at 9:24
  • @AndreBubner No I do not, I knew this even now. So Thanks to you! :) – LAW Nov 30 '18 at 10:33
0

i solve the problem. Dont know exactly what the problem was, cause i restart my docker image and clear caches again.

Now it works as aspected ... Handbanging

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.