8

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

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

1 Answer 1

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 you have read our privacy policy.

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