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