Skip to content

Instantly share code, notes, and snippets.

@sdverma

sdverma/checkout_index_index.xml

Last active April 3, 2020 09:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sdverma/f34f666241ba3c896a71d2b3d8dad8db to your computer and use it in GitHub Desktop.
Save sdverma/f34f666241ba3c896a71d2b3d8dad8db to your computer and use it in GitHub Desktop.
Download ZIP
Payments Details In an block below Order Summary in Checkout in Magento 2
Raw
checkout_index_index.xml
<!-- File Path in Magento2: app/code/CustomModules/PaymentOrderSummary/view/frontend/layout/checkout_index_index.xml -->
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment-info" xsi:type="array">
<item name="sortOrder" xsi:type="string">0</item>
<item name="component" xsi:type="string">CustomModules_PaymentOrderSummary/js/view/payment-info</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">CustomModules_PaymentOrderSummary/payment-info</item>
</item>
<item name="displayArea" xsi:type="string">payment-info</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Raw
payment-info.html
<!-- File Path in Magento2: app/code/CustomModules/PaymentOrderSummary/view/frontend/web/template/payment-info.html -->
<!-- ko if: (isVisible()) -->
<div class="payment-info">
<div class="payment-info">
<div class="shipping-information-title">
<span data-bind="i18n: 'Payment Method:'"></span>
</div>
<div class="shipping-information-content">
<strong class="value" data-bind="text: getPaymentMethodTitle"></strong><span class="pONumber"></span>
</div>
</div>
</div>
<div class="ko-concetp">
<div data-bind="afterRender: loadJsCustomAfterKoRender"></div>
</div>
<!--/ko-->
Raw
payment-info.js
// File Path in Magento2: app/code/CustomModules/PaymentOrderSummary/view/frontend/web/js/view/payment-info.js
define([
'jquery',
'uiComponent',
'ko',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/step-navigator'
], function ($, Component, ko, quote, stepNavigator) {
'use strict';
return Component.extend({
defaults: {
template: 'CustomModules_PaymentOrderSummary/payment-info'
},
initialize: function() {
this._super();
var self = this;
self.getPaymentMethodTitle = ko.observable(null);
quote.paymentMethod.subscribe(function(method){
if (method.method == 'authorizenet_acceptjs') {
$('.pONumber').html('');
self.getPaymentMethodTitle('Credit Card');
if ($('#po_number').val() != '') {
var ccNumber = getCreditCardNumber();
$('.pONumber').html(":"+ccNumber);
} else {
$('.pONumber').html('');
}
} else if (method.method == 'purchaseorder') {
self.getPaymentMethodTitle('Purchase Order');
if ($('#po_number').val() != '') {
$('.pONumber').html(":"+$('#po_number').val());
} else {
$('.pONumber').html('');
}
}
}, this, 'change');
},
/**
* @return {Boolean}
*/
isVisible: function () {
return !quote.isVirtual() && stepNavigator.isProcessed('shipping');
},
loadJsCustomAfterKoRender: function(){
$(document).on('focusout', '#po_number', function () {
$('.pONumber').html(":"+$(this).val());
});
$(document).on('focusout', '#authorizenet_acceptjs_cc_number', function () {
var ccNumber = ($(this).val()).substring($(this).val().length - 4);
$('.pONumber').html(":"+ccNumber);
});
}
});
function getCreditCardNumber() {
if ($('#authorizenet_acceptjs_cc_number').val() != '') {
return ($('#authorizenet_acceptjs_cc_number').val()).substring($('#authorizenet_acceptjs_cc_number').val().length - 4);
}
return '';
};
});
Raw
requirejs-config.js
//File Path in Magento2: app/code/CustomModules/PaymentOrderSummary/view/frontend/requirejs-config.js
var config = {
"map": {
"*": {
"Magento_Checkout/template/sidebar.html": "CustomModules_PaymentOrderSummary/template/sidebar.html"
}
}
};
Raw
sidebar.html
<!-- File Path in Magento2: app/code/CustomModules/PaymentOrderSummary/view/frontend/web/template/sidebar.html -->
<div id="opc-sidebar"
data-bind="afterRender:setModalElement, mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'custom',
'modalClass': 'opc-sidebar opc-summary-wrapper',
'wrapperClass': 'checkout-container',
'parentModalClass': '_has-modal-custom',
'responsive': true,
'responsiveClass': 'custom-slide',
'overlayClass': 'modal-custom-overlay',
'buttons': []
}}">
<!-- ko foreach: getRegion('summary') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="opc-block-shipping-information">
<!-- ko foreach: getRegion('shipping-information') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div class="opc-block-shipping-information">
<!-- ko foreach: getRegion('payment-info') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment