Magento – Magento 2.2.6 – Mixin does not work

magento2magento2.2.6mixins

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

Best Answer

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

Related Topic