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


    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:


<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 -->

<!-- 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>
<!-- /ko -->

Now i add the summary-mixin.js


], 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 () {


    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
    – Gagan
    Nov 30, 2018 at 7:31
  • Can you please check if summary-mixin is loading in the browser. Nov 30, 2018 at 7:52
  • no is nit loading ...so i think something is wrong. Nov 30, 2018 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? Nov 30, 2018 at 9:24
  • @AndreBubner No I do not, I knew this even now. So Thanks to you! :)
    – Gagan
    Nov 30, 2018 at 10:33

1 Answer 1


I solve the problem. Don't 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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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