Skip to content

Commit 5597840

Browse files
author
Korshenko, Olexii(okorshenko)
committed
Merge pull request #642 from magento-folks/checkout
[Folks] UI Clean-Ups
2 parents 357e3a1 + afad728 commit 5597840

File tree

42 files changed

+577
-124
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+577
-124
lines changed

‎app/code/Magento/Braintree/view/frontend/web/js/view/payment/method-renderer/cc-form.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,10 @@ define(
349349
}
350350
});
351351
}
352+
},
353+
354+
getCssClass: function () {
355+
return (this.isCcDetectionEnabled()) ? 'field type detection' : 'field type required';
352356
}
353357
});
354358
}

‎app/code/Magento/Braintree/view/frontend/web/template/payment/cc-form.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
2-
3-
41
<!--
52
/**
63
* Copyright © 2015 Magento. All rights reserved.
@@ -61,10 +58,12 @@
6158
</div>
6259
<div>&nbsp;</div>
6360
<!-- /ko -->
64-
<div class="field type required" data-bind="visible: isCcFormShown">
61+
<div data-bind="visible: isCcFormShown, attr: {class: getCssClass()}">
62+
<!-- ko if: (!isCcDetectionEnabled())-->
6563
<label data-bind="attr: {for: getCode() + '_cc_type'}" class="label">
6664
<span><!-- ko i18n: 'Credit Card Type'--><!-- /ko --></span>
6765
</label>
66+
<!-- /ko -->
6867
<div class="control">
6968
<!-- ko if: (!isCcDetectionEnabled())-->
7069
<select name="payment[cc_type]" class="select"
@@ -153,7 +152,7 @@
153152
<label data-bind="attr: {for: getCode() + '_cc_cid'}" class="label">
154153
<span><!-- ko i18n: 'Card Verification Number'--><!-- /ko --></span>
155154
</label>
156-
<div class="control">
155+
<div class="control _with-tooltip">
157156
<input type="number"
158157
class="input-text cvv"
159158
name="payment[cc_cid]"

‎app/code/Magento/Checkout/Block/Checkout/AttributeMerger.php

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,13 @@ class AttributeMerger
7272
*/
7373
private $directoryHelper;
7474

75+
/**
76+
* List of codes of countries that must be shown on the top of country list
77+
*
78+
* @var array
79+
*/
80+
private $topCountryCodes;
81+
7582
/**
7683
* @param AddressHelper $addressHelper
7784
* @param Session $customerSession
@@ -88,6 +95,7 @@ public function __construct(
8895
$this->customerSession = $customerSession;
8996
$this->customerRepository = $customerRepository;
9097
$this->directoryHelper = $directoryHelper;
98+
$this->topCountryCodes = $directoryHelper->getTopCountryCodes();
9199
}
92100

93101
/**
@@ -177,7 +185,7 @@ protected function getFieldConfig(
177185
? $additionalConfig['sortOrder']
178186
: $attributeConfig['sortOrder'],
179187
'validation' => $this->mergeConfigurationNode('validation', $additionalConfig, $attributeConfig),
180-
'options' => isset($attributeConfig['options']) ? $attributeConfig['options'] : [],
188+
'options' => $this->getFieldOptions($attributeCode, $attributeConfig),
181189
'filterBy' => isset($additionalConfig['filterBy']) ? $additionalConfig['filterBy'] : null,
182190
'customEntry' => isset($additionalConfig['customEntry']) ? $additionalConfig['customEntry'] : null,
183191
'visible' => isset($additionalConfig['visible']) ? $additionalConfig['visible'] : true,
@@ -318,4 +326,46 @@ protected function getCustomer()
318326
}
319327
return $this->customer;
320328
}
329+
330+
/**
331+
* Retrieve field options from attribute configuration
332+
*
333+
* @param string $attributeCode
334+
* @param array $attributeConfig
335+
* @return array
336+
*/
337+
protected function getFieldOptions($attributeCode, array $attributeConfig)
338+
{
339+
$options = isset($attributeConfig['options']) ? $attributeConfig['options'] : [];
340+
return ($attributeCode == 'country_id') ? $this->orderCountryOptions($options) : $options;
341+
}
342+
343+
/**
344+
* Order country options. Move top countries to the beginning of the list.
345+
*
346+
* @param array $countryOptions
347+
* @return array
348+
*/
349+
protected function orderCountryOptions(array $countryOptions)
350+
{
351+
if (empty($this->topCountryCodes)) {
352+
return $countryOptions;
353+
}
354+
355+
$headOptions = [];
356+
$tailOptions = [[
357+
'value' => 'delimiter',
358+
'label' => '──────────',
359+
'disabled' => true,
360+
]];
361+
foreach ($countryOptions as $countryOption) {
362+
if (empty($countryOption['value']) || in_array($countryOption['value'], $this->topCountryCodes)) {
363+
array_push($headOptions, $countryOption);
364+
} else {
365+
array_push($tailOptions, $countryOption);
366+
}
367+
368+
}
369+
return array_merge($headOptions, $tailOptions);
370+
}
321371
}

‎app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
<item name="grand-total" xsi:type="array">
157157
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
158158
<item name="config" xsi:type="array">
159-
<item name="title" xsi:type="string">Grand Total</item>
159+
<item name="title" xsi:type="string">Order Total</item>
160160
<item name="template" xsi:type="string">Magento_Checkout/cart/totals/grand-total</item>
161161
</item>
162162
</item>

‎app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
*/
77
-->
88
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
9+
<head>
10+
<script src="Magento_Checkout/js/checkout-loader.js"/>
11+
</head>
912
<body>
1013
<referenceContainer name="content">
1114
<block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="onepage.phtml" cacheable="false">

‎app/code/Magento/Checkout/view/frontend/templates/cart/coupon.phtml

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
?>
1010
<div class="block discount" id="block-discount" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
1111
<div class="title" data-role="title">
12-
<strong id="block-discount-heading" role="heading" aria-level="2"><?php /* @escapeNotVerified */ echo __('Discount Codes') ?></strong>
12+
<strong id="block-discount-heading" role="heading" aria-level="2"><?php /* @escapeNotVerified */ echo __('Apply Discount Code') ?></strong>
1313
</div>
1414
<div class="content" data-role="content" aria-labelledby="block-discount-heading">
1515
<form id="discount-coupon-form"
@@ -22,16 +22,16 @@
2222
<div class="fieldset coupon<?php strlen($block->getCouponCode()) ? ' applied' : ''?>">
2323
<input type="hidden" name="remove" id="remove-coupon" value="0" />
2424
<div class="field">
25-
<label for="coupon_code" class="label"><span><?php /* @escapeNotVerified */ echo __('Enter your code') ?></span></label>
25+
<label for="coupon_code" class="label"><span><?php /* @escapeNotVerified */ echo __('Enter discount code') ?></span></label>
2626
<div class="control">
27-
<input type="text" class="input-text" id="coupon_code" name="coupon_code" value="<?php echo $block->escapeHtml($block->getCouponCode()) ?>" placeholder="<?php echo $block->escapeHtml(__('Enter your code'));?>" />
27+
<input type="text" class="input-text" id="coupon_code" name="coupon_code" value="<?php echo $block->escapeHtml($block->getCouponCode()) ?>" placeholder="<?php echo $block->escapeHtml(__('Enter discount code'));?>" />
2828
</div>
2929
</div>
3030
<div class="actions-toolbar">
3131
<?php if (!strlen($block->getCouponCode())): ?>
3232
<div class="primary">
33-
<button class="action apply primary" type="button" value="<?php /* @escapeNotVerified */ echo __('Apply Coupon') ?>">
34-
<span><?php /* @escapeNotVerified */ echo __('Apply Coupon') ?></span>
33+
<button class="action apply primary" type="button" value="<?php /* @escapeNotVerified */ echo __('Apply Discount') ?>">
34+
<span><?php /* @escapeNotVerified */ echo __('Apply Discount') ?></span>
3535
</button>
3636
</div>
3737
<?php else: ?>

‎app/code/Magento/Checkout/view/frontend/templates/onepage.phtml

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,35 @@
66

77
// @codingStandardsIgnoreFile
88
?>
9-
<div id="checkout" data-bind="scope:'checkout'" class="checkout-container">
10-
<!-- ko template: getTemplate() --><!-- /ko -->
11-
<script type="text/x-magento-init">
12-
{
13-
"#checkout": {
14-
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
15-
}
16-
}
17-
</script>
18-
<script>
19-
window.checkoutConfig = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getCheckoutConfig()); ?>;
20-
// Create aliases for customer.js model from customer module
21-
window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
22-
window.customerData = window.checkoutConfig.customerData;
23-
</script>
24-
<script>
25-
require([
26-
'mage/url',
27-
'Magento_Checkout/js/model/step-loader',
28-
'Magento_Ui/js/block-loader'
29-
], function(url, loader, blockLoader) {
30-
loader.registerLoader();
31-
blockLoader("<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>");
32-
return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');
33-
})
34-
</script>
9+
<div id="checkout" data-bind="scope:'checkout'" class="checkout-container">
10+
<div id="checkout-loader" data-role="checkout-loader" class="loading-mask">
11+
<div class="loader">
12+
<img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
13+
alt="<?php /* @escapeNotVerified */ echo __('Loading...'); ?>"
14+
style="position: absolute;">
15+
</div>
3516
</div>
17+
<!-- ko template: getTemplate() --><!-- /ko -->
18+
<script type="text/x-magento-init">
19+
{
20+
"#checkout": {
21+
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
22+
}
23+
}
24+
</script>
25+
<script>
26+
window.checkoutConfig = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getCheckoutConfig()); ?>;
27+
// Create aliases for customer.js model from customer module
28+
window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
29+
window.customerData = window.checkoutConfig.customerData;
30+
</script>
31+
<script>
32+
require([
33+
'mage/url',
34+
'Magento_Ui/js/block-loader'
35+
], function(url, blockLoader) {
36+
blockLoader("<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>");
37+
return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');
38+
})
39+
</script>
40+
</div>

‎app/code/Magento/Checkout/view/frontend/web/js/action/place-order.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,17 @@ define(
99
'mage/storage',
1010
'mage/url',
1111
'Magento_Checkout/js/model/error-processor',
12-
'Magento_Customer/js/model/customer'
12+
'Magento_Customer/js/model/customer',
13+
'Magento_Checkout/js/model/full-screen-loader'
1314
],
14-
function (quote, urlBuilder, storage, url, errorProcessor, customer) {
15+
function (quote, urlBuilder, storage, url, errorProcessor, customer, fullScreenLoader) {
1516
'use strict';
1617

1718
return function (paymentData, redirectOnSuccess, messageContainer) {
1819
var serviceUrl,
1920
payload;
2021

21-
redirectOnSuccess = redirectOnSuccess === false ? false : true;
22+
redirectOnSuccess = redirectOnSuccess !== false;
2223

2324
/** Checkout for guest and registered customer. */
2425
if (!customer.isLoggedIn()) {
@@ -39,8 +40,10 @@ define(
3940
billingAddress: quote.billingAddress()
4041
};
4142
}
43+
44+
fullScreenLoader.startLoader();
4245
return storage.post(
43-
serviceUrl, JSON.stringify(payload)
46+
serviceUrl, JSON.stringify(payload), false
4447
).done(
4548
function () {
4649
if (redirectOnSuccess) {
@@ -50,6 +53,7 @@ define(
5053
).fail(
5154
function (response) {
5255
errorProcessor.process(response, messageContainer);
56+
fullScreenLoader.stopLoader();
5357
}
5458
);
5559
};

‎app/code/Magento/Checkout/view/frontend/web/js/action/set-payment-information.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ define(
88
'Magento_Checkout/js/model/url-builder',
99
'mage/storage',
1010
'Magento_Checkout/js/model/error-processor',
11-
'Magento_Customer/js/model/customer'
11+
'Magento_Customer/js/model/customer',
12+
'Magento_Checkout/js/model/full-screen-loader'
1213
],
13-
function (quote, urlBuilder, storage, errorProcessor, customer) {
14+
function (quote, urlBuilder, storage, errorProcessor, customer, fullScreenLoader) {
1415
'use strict';
1516

1617
return function (messageContainer) {
@@ -39,15 +40,18 @@ define(
3940
billingAddress: quote.billingAddress()
4041
};
4142
}
43+
44+
fullScreenLoader.startLoader();
4245
return storage.post(
43-
serviceUrl, JSON.stringify(payload)
46+
serviceUrl, JSON.stringify(payload), false
4447
).done(
4548
function () {
4649
//do nothing
4750
}
4851
).fail(
4952
function (response) {
5053
errorProcessor.process(response, messageContainer);
54+
fullScreenLoader.stopLoader();
5155
}
5256
);
5357
};

‎app/code/Magento/Checkout/view/frontend/web/js/checkout-loader.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Copyright © 2015 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
/*jslint browser: true*/
6+
(function () {
7+
'use strict';
8+
9+
var checkInterval;
10+
11+
checkInterval = setInterval(function () {
12+
var checkoutContainer = document.getElementById('checkoutSteps'),
13+
steps,
14+
loaderContainer;
15+
16+
//Return if checkout steps container not loaded
17+
if (!checkoutContainer) {
18+
return;
19+
}
20+
21+
//Checkout steps
22+
steps = checkoutContainer.getElementsByTagName('li');
23+
24+
//Remove loader and clear update interval if content loaded
25+
if (steps && steps.length > 0) {
26+
clearInterval(checkInterval);
27+
loaderContainer = document.getElementById('checkout-loader');
28+
29+
if (loaderContainer && loaderContainer.parentNode) {
30+
loaderContainer.parentNode.removeChild(loaderContainer);
31+
}
32+
}
33+
34+
}, 100);
35+
})();

‎app/code/Magento/Checkout/view/frontend/web/js/model/full-screen-loader.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Copyright © 2015 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
/*jshint browser:true jquery:true*/
6+
/*global alert*/
7+
define(
8+
['jquery'],
9+
function ($) {
10+
'use strict';
11+
12+
var containerId = '#checkout';
13+
14+
return {
15+
16+
/**
17+
* Start full page loader action
18+
*/
19+
startLoader: function () {
20+
$(containerId).trigger('processStart');
21+
},
22+
23+
/**
24+
* Stop full page loader action
25+
*/
26+
stopLoader: function () {
27+
$(containerId).trigger('processStop');
28+
}
29+
};
30+
}
31+
);

0 commit comments

Comments
 (0)