Skip to content
This repository was archived by the owner on Apr 29, 2019. It is now read-only.

Commit e5a125b

Browse files
ameysarameysar
committed
MAGETWO-89990: Render form on multi shipping page (MAGETWO-84699)
1 parent da2b1d1 commit e5a125b

File tree

6 files changed

+204
-45
lines changed

6 files changed

+204
-45
lines changed

‎app/code/Magento/Multishipping/Block/DataProviders/Billing.php

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
namespace Magento\Multishipping\Block\DataProviders;
7+
8+
use Magento\Framework\View\Element\Block\ArgumentInterface;
9+
use Magento\Checkout\Model\CompositeConfigProvider;
10+
use Magento\Customer\Model\Address\Config as AddressConfig;
11+
use Magento\Framework\Serialize\Serializer\Json as Serializer;
12+
use Magento\Quote\Model\Quote\Address;
13+
14+
/**
15+
* Provides additional data for multishipping checkout billing step
16+
*
17+
* @see \Magento\Multishipping\view\frontend\templates\checkout\billing.phtml
18+
*/
19+
class Billing implements ArgumentInterface
20+
{
21+
/**
22+
* @var AddressConfig
23+
*/
24+
private $addressConfig;
25+
26+
/**
27+
* @var CompositeConfigProvider
28+
*/
29+
private $configProvider;
30+
31+
/**
32+
* @var Serializer
33+
*/
34+
private $serializer;
35+
36+
/**
37+
* @param AddressConfig $addressConfig
38+
* @param CompositeConfigProvider $configProvider
39+
* @param Serializer $serializer
40+
*/
41+
public function __construct(
42+
AddressConfig $addressConfig,
43+
CompositeConfigProvider $configProvider,
44+
Serializer $serializer
45+
) {
46+
$this->addressConfig = $addressConfig;
47+
$this->configProvider = $configProvider;
48+
$this->serializer = $serializer;
49+
}
50+
51+
/**
52+
* Get address formatted as html string.
53+
*
54+
* @param Address $address
55+
* @return string
56+
*/
57+
public function getAddressHtml(Address $address): string
58+
{
59+
$renderer = $this->addressConfig->getFormatByCode('html')->getRenderer();
60+
61+
return $renderer->renderArray($address->getData());
62+
}
63+
64+
/**
65+
* Returns serialized checkout config.
66+
*
67+
* @return string
68+
* @throws \InvalidArgumentException
69+
*/
70+
public function getSerializedCheckoutConfigs(): string
71+
{
72+
return $this->serializer->serialize($this->configProvider->getConfig());
73+
}
74+
}

‎app/code/Magento/Multishipping/view/frontend/layout/multishipping_checkout_billing.xml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
</referenceBlock>
1616
<referenceContainer name="content">
1717
<block class="Magento\Multishipping\Block\Checkout\Billing" name="checkout_billing" template="Magento_Multishipping::checkout/billing.phtml" cacheable="false">
18+
<arguments>
19+
<argument name="checkout_data" xsi:type="object">Magento\Multishipping\Block\DataProviders\Billing</argument>
20+
</arguments>
1821
<container name="payment_methods_before" label="Payment Methods Before"/>
1922
<container name="payment_methods_after" label="Payment Methods After"/>
2023
</block>

‎app/code/Magento/Multishipping/view/frontend/requirejs-config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ var config = {
88
'*': {
99
multiShipping: 'Magento_Multishipping/js/multi-shipping',
1010
orderOverview: 'Magento_Multishipping/js/overview',
11-
payment: 'Magento_Multishipping/js/payment'
11+
payment: 'Magento_Multishipping/js/payment',
12+
billingLoader: 'Magento_Checkout/js/checkout-loader'
1213
}
1314
}
1415
};

‎app/code/Magento/Multishipping/view/frontend/templates/checkout/billing.phtml

Lines changed: 88 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,93 @@
44
* See COPYING.txt for license details.
55
*/
66

7-
// @codingStandardsIgnoreFile
8-
9-
?>
10-
<?php
117
/**
128
* Multishipping checkout billing information
139
*
1410
* @var $block \Magento\Multishipping\Block\Checkout\Billing
1511
*/
1612
?>
17-
<form action="<?= /* @escapeNotVerified */ $block->getPostActionUrl() ?>" method="post" id="multishipping-billing-form" class="form multicheckout billing">
13+
<div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"billingLoader": {}}'>
14+
<div class="loader">
15+
<img src="<?= $block->escapeUrl($block->getViewFileUrl('images/loader-1.gif')); ?>"
16+
alt="<?= $block->escapeHtml(__('Loading...')); ?>"
17+
style="position: absolute;">
18+
</div>
19+
</div>
20+
<script>
21+
window.checkoutConfig = <?= /* @noEscape */ $block->getCheckoutData()->getSerializedCheckoutConfigs(); ?>;
22+
window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
23+
window.customerData = window.checkoutConfig.customerData;
24+
</script>
25+
<div id="checkout"></div>
26+
<form action="<?= $block->escapeUrl($block->getPostActionUrl()); ?>"
27+
method="post"
28+
id="multishipping-billing-form"
29+
class="form multicheckout billing">
1830
<div class="block block-billing">
1931
<div class="block-content">
2032
<div class="box box-billing-address">
2133
<strong class="box-title">
22-
<span><?= /* @escapeNotVerified */ __('Billing Address') ?></span>
23-
<a href="<?= /* @escapeNotVerified */ $block->getSelectAddressUrl() ?>" class="action"><span><?= /* @escapeNotVerified */ __('Change') ?></span></a>
34+
<span><?= $block->escapeHtml(__('Billing Address')); ?></span>
35+
<a href="<?= $block->escapeUrl($block->getSelectAddressUrl()); ?>" class="action">
36+
<span><?= $block->escapeHtml(__('Change')); ?></span>
37+
</a>
2438
</strong>
2539
<div class="box-content">
26-
<?php $_address = $block->getAddress() ?>
27-
<address><?= /* @escapeNotVerified */ $_address->format('html') ?></address>
40+
<address>
41+
<?= /* @noEscape */ $block->getCheckoutData()->getAddressHtml($block->getAddress()); ?>
42+
</address>
2843
</div>
2944
</div>
3045
<div class="box box-billing-method">
3146
<fieldset class="fieldset">
32-
<legend class="legend box-title"><span><?= /* @escapeNotVerified */ __('Payment Method') ?></span></legend><br>
47+
<legend class="legend box-title">
48+
<span><?= $block->escapeHtml(__('Payment Method')); ?></span>
49+
</legend><br>
3350
<div class="box-content">
3451
<?= $block->getChildHtml('payment_methods_before') ?>
3552
<?php /* Payment methods forms list */ ?>
36-
<dl class="items methods-payment" id="payment-methods">
53+
<dl class="checkout-payment-method" id="payment-methods">
3754
<?php
38-
$_methods = $block->getMethods();
39-
$_methodsCount = count($_methods);
55+
$methods = $block->getMethods();
56+
$methodsCount = count($methods);
57+
$methodsForms = $block->hasFormTemplates() ? $block->getFormTemplates(): [];
58+
59+
foreach ($methods as $_method) :
60+
$code = $_method->getCode();
61+
$checked = $block->getSelectedMethodCode() === $code;
62+
63+
if (isset($methodsForms[$code])) {
64+
$block->setMethodFormTemplate($code, $methodsForms[$code]);
65+
}
4066
?>
41-
<?php foreach ($_methods as $_method): $_code = $_method->getCode() ?>
42-
<dt class="item-title">
43-
<?php if ($_methodsCount > 1): ?>
44-
<input type="radio" id="p_method_<?= /* @escapeNotVerified */ $_code ?>" value="<?= /* @escapeNotVerified */ $_code ?>" name="payment[method]" title="<?= $block->escapeHtml($_method->getTitle()) ?>" <?php if ($block->getSelectedMethodCode() == $_code): ?> checked="checked"<?php endif; ?> class="radio"/>
45-
<?php else : ?>
46-
<input type="radio" id="p_method_<?= /* @escapeNotVerified */ $_code ?>" value="<?= /* @escapeNotVerified */ $_code ?>" name="payment[method]" checked="checked" class="radio solo method"/>
47-
<?php endif; ?>
48-
<label for="p_method_<?= /* @escapeNotVerified */ $_code ?>"><?= $block->escapeHtml($_method->getTitle()) ?></label>
49-
</dt>
50-
<?php if ($html = $block->getChildHtml('payment.method.' . $_code)) : ?>
51-
<dd class="item-content">
52-
<?= /* @escapeNotVerified */ $html ?>
67+
<dt class="item-title">
68+
<?php if ($methodsCount > 1) : ?>
69+
<input type="radio"
70+
id="p_method_<?= $block->escapeHtml($code); ?>"
71+
value="<?= $block->escapeHtml($code); ?>"
72+
name="payment[method]"
73+
title="<?= $block->escapeHtml($_method->getTitle()) ?>"
74+
<?php if ($checked) : ?>
75+
checked="checked"
76+
<?php endif; ?>
77+
class="radio"/>
78+
<?php else : ?>
79+
<input type="radio"
80+
id="p_method_<?= $block->escapeHtml($code); ?>"
81+
value="<?= $block->escapeHtml($code); ?>"
82+
name="payment[method]"
83+
checked="checked"
84+
class="radio solo method" />
85+
<?php endif; ?>
86+
<label for="p_method_<?= $block->escapeHtml($code); ?>">
87+
<?= $block->escapeHtml($_method->getTitle()) ?>
88+
</label>
89+
</dt>
90+
<?php if ($html = $block->getChildHtml('payment.method.' . $code)) : ?>
91+
<dd class="item-content <?= $checked ? '' : 'no-display'; ?>"
92+
data-bind="scope: 'payment_method_<?= $block->escapeHtml($code);?>'">
93+
<?= /* @noEscape */ $html; ?>
5394
</dd>
5495
<?php endif; ?>
5596
<?php endforeach; ?>
@@ -63,29 +104,35 @@
63104
</div>
64105
<div class="actions-toolbar">
65106
<div class="primary">
66-
<button id="payment-continue" type="submit" class="action primary continue"><span><?= /* @escapeNotVerified */ __('Go to Review Your Order') ?></span></button>
107+
<button id="payment-continue"
108+
type="button"
109+
class="action primary continue">
110+
<span><?= $block->escapeHtml(__('Go to Review Your Order')); ?></span>
111+
</button>
67112
</div>
68113
<div class="secondary">
69-
<a href="<?= /* @escapeNotVerified */ $block->getBackUrl() ?>" class="action back"><span><?= /* @escapeNotVerified */ __('Back to Shipping Information') ?></span></a>
114+
<a href="<?= $block->escapeUrl($block->getBackUrl()); ?>" class="action back">
115+
<span><?= $block->escapeHtml(__('Back to Shipping Information')); ?></span>
116+
</a>
70117
</div>
71118
</div>
72119
</form>
73120
<script>
74-
require(['jquery', 'mage/mage'], function(jQuery){
121+
require(['jquery', 'mage/mage'], function(jQuery) {
122+
var addtocartForm = jQuery('#multishipping-billing-form');
75123

76-
var addtocartForm = jQuery('#multishipping-billing-form');
77-
addtocartForm.mage('payment', {
78-
checkoutPrice: <?= (float)$block->getQuoteBaseGrandTotal() ?>
79-
});
80-
addtocartForm.mage('validation', {
81-
errorPlacement: function(error, element) {
82-
if (element.attr('data-validate') && element.attr('data-validate').indexOf('validate-cc-ukss') >= 0) {
83-
element.parents('form').find('[data-validation-msg="validate-cc-ukss"]').html(error);
84-
} else {
85-
element.after(error);
124+
addtocartForm.mage('payment', {
125+
checkoutPrice: <?= (float)$block->getQuoteBaseGrandTotal() ?>
126+
});
127+
128+
addtocartForm.mage('validation', {
129+
errorPlacement: function(error, element) {
130+
if (element.attr('data-validate') && element.attr('data-validate').indexOf('validate-cc-ukss') >= 0) {
131+
element.parents('form').find('[data-validation-msg="validate-cc-ukss"]').html(error);
132+
} else {
133+
element.after(error);
134+
}
86135
}
87-
}
136+
});
88137
});
89-
90-
});
91138
</script>

‎app/code/Magento/Multishipping/view/frontend/web/js/payment.js

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,12 @@ define([
6363
parentsDl = element.closest('dl');
6464

6565
parentsDl.find('dt input:radio').prop('checked', false);
66-
parentsDl.find('.items').hide().find('[name^="payment["]').prop('disabled', true);
66+
parentsDl.find('dd').addClass('no-display').end()
67+
.find('.items').hide()
68+
.find('[name^="payment["]').prop('disabled', true);
6769
element.prop('checked', true).parent()
68-
.nextUntil('dt').find('.items').show().find('[name^="payment["]').prop('disabled', false);
70+
.next('dd').removeClass('no-display')
71+
.find('.items').show().find('[name^="payment["]').prop('disabled', false);
6972
},
7073

7174
/**
@@ -122,16 +125,35 @@ define([
122125
this.element.find(this.options.methodsContainer).show();
123126
},
124127

128+
/**
129+
* Returns checked payment method.
130+
*
131+
* @private
132+
*/
133+
_getSelectedPaymentMethod: function () {
134+
return this.element.find('input[name=\'payment[method]\']:checked');
135+
},
136+
125137
/**
126138
* Validate before form submit
127139
* @private
128140
* @param {EventObject} e
129141
*/
130142
_submitHandler: function (e) {
143+
var currentMethod,
144+
submitButton;
145+
131146
e.preventDefault();
132147

133148
if (this._validatePaymentMethod()) {
134-
this.element.submit();
149+
currentMethod = this._getSelectedPaymentMethod();
150+
submitButton = currentMethod.parent().next('dd').find('button[type=submit]');
151+
152+
if (submitButton.length) {
153+
submitButton.first().trigger('click');
154+
} else {
155+
this.element.submit();
156+
}
135157
}
136158
}
137159
});

‎app/code/Magento/Payment/view/frontend/templates/transparent/iframe.phtml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,18 @@ $params = $block->getParams();
4646
});
4747
}
4848
);
49+
<?php elseif (isset($params['multishipping'])): ?>
50+
var require = window.top.require;
51+
require(
52+
[
53+
'jquery'
54+
],
55+
function($) {
56+
var parent = window.top;
57+
$(parent).trigger('clearTimeout');
58+
$(parent.document).find('#multishipping-billing-form').submit();
59+
}
60+
);
4961
<?php elseif (isset($params['order_success'])): ?>
5062
window.top.location = "<?= $block->escapeUrl($params['order_success']) ?>";
5163
<?php else: ?>

0 commit comments

Comments
 (0)