Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Tweeted twitter.com/StackMagento/status/1316076239698964480
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
  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
             }
         }
     }
    

    };

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

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

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

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

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

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

    };

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

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

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

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

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

Source Link

Magento 2.2.6 - Mixin does not work

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