Skip to content

J
joshine
Commit ccdf1fce by dhn
Options

结算页收货地址和发票地址样式功能修改

parent 081c335a
Showing with 447 additions and 58 deletions
app/code/Magento/Checkout/view/frontend/templates/cart/shipping.phtml
...@@ -11,32 +11,20 @@ ...@@ -11,32 +11,20 @@
$selectedCountryId = $block->getCountryId(); $selectedCountryId = $block->getCountryId();
$flatraPrice = $block->getFlatratePrice(); $flatraPrice = $block->getFlatratePrice();
?> ?>
<div id="block-shipping" <div id="block-shipping" class="block shipping">
class="block shipping" <div id="block-summary" style="display: none;">
data-mage-init='{"collapsible":{"openedState": "active", "saveState": true}}' <form method="post" id="shipping-zip-form">
> <fieldset class="fieldset estimate">
<div class="title" data-role="title"> <div class="field" name="shippingAddress.country_id">
<strong id="block-shipping-heading" role="heading" aria-level="2"> <label class="label" for="shipping_country_id">
<?= $block->getQuote()->isVirtual() <span><?= __('Country')?></span>
? $block->escapeHtml(__('Estimate Tax')) </label>
: $block->escapeHtml(__('Estimate Shipping and Tax')) <div class="control">
?> <?= $block->getCountryHtmlSelect(null, 'country_id', 'shipping_country_id')?>
</strong> </div>
</div> </div>
<div id="block-summary" </fieldset>
data-bind="scope:'block-summary'" </form>
class="content"
data-role="content"
aria-labelledby="block-shipping-heading"
>
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
"#block-summary": {
"Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>
}
}
</script>
<?php $serializedCheckoutConfig = /* @noEscape */ $block->getSerializedCheckoutConfig(); <?php $serializedCheckoutConfig = /* @noEscape */ $block->getSerializedCheckoutConfig();
$scriptString = <<<script $scriptString = <<<script
......
app/code/Magento/Checkout/view/frontend/web/js/model/quote.js
...@@ -33,6 +33,7 @@ define([ ...@@ -33,6 +33,7 @@ define([
paymentMethod = ko.observable(null), paymentMethod = ko.observable(null),
paymentMethodlist = ko.observable(null), paymentMethodlist = ko.observable(null),
responseBillStatus = ko.observable(null), responseBillStatus = ko.observable(null),
billAddressMent = ko.observable(null),
quoteData = window.checkoutConfig.quoteData, quoteData = window.checkoutConfig.quoteData,
basePriceFormat = window.checkoutConfig.basePriceFormat, basePriceFormat = window.checkoutConfig.basePriceFormat,
priceFormat = window.checkoutConfig.priceFormat, priceFormat = window.checkoutConfig.priceFormat,
...@@ -47,6 +48,7 @@ define([ ...@@ -47,6 +48,7 @@ define([
shippingMethod: shippingMethod, shippingMethod: shippingMethod,
shippingSaveMethod:shippingSaveMethod, shippingSaveMethod:shippingSaveMethod,
responseBillStatus:responseBillStatus, responseBillStatus:responseBillStatus,
billAddressMent:billAddressMent,
billingAddress: billingAddress, billingAddress: billingAddress,
paymentMethod: paymentMethod, paymentMethod: paymentMethod,
paymentMethodlist:paymentMethodlist, paymentMethodlist:paymentMethodlist,
......
app/code/Magento/Checkout/view/frontend/web/js/view/billing-address.js
...@@ -43,6 +43,7 @@ define([ ...@@ -43,6 +43,7 @@ define([
var lastSelectedBillingAddress = null, var lastSelectedBillingAddress = null,
setCurrentBillingAddress = null, setCurrentBillingAddress = null,
getCurrentBillingAddress = null,
addressUpadated = false, addressUpadated = false,
addressEdited = false, addressEdited = false,
countryData = customerData.get('directory-data'), countryData = customerData.get('directory-data'),
...@@ -81,7 +82,7 @@ define([ ...@@ -81,7 +82,7 @@ define([
this._super() this._super()
.observe({ .observe({
selectedAddress: null, selectedAddress: null,
isAddressDetailsVisible: quote.billingAddress() != null, isAddressDetailsVisible: getCurrentBillingAddress == null,
isAddressFormVisible: !customer.isLoggedIn() || !addressOptions.length, isAddressFormVisible: !customer.isLoggedIn() || !addressOptions.length,
isAddressSameAsShipping: true, isAddressSameAsShipping: true,
saveInAddressBook: 1 saveInAddressBook: 1
...@@ -94,8 +95,6 @@ define([ ...@@ -94,8 +95,6 @@ define([
this.saveInAddressBook(1); this.saveInAddressBook(1);
} }
setCurrentBillingAddress = quote.billingAddress(); setCurrentBillingAddress = quote.billingAddress();
this.isAddressDetailsVisible(true);
}, this); }, this);
return this; return this;
...@@ -113,8 +112,17 @@ define([ ...@@ -113,8 +112,17 @@ define([
return address.getAddressInline(); return address.getAddressInline();
}, },
currentBillingAddress:function(){ currentBillingAddress:function(){
if(getCurrentBillingAddress)
{
return getCurrentBillingAddress;
}
return setCurrentBillingAddress; return setCurrentBillingAddress;
}, },
billAddressMent: function(){
return quote.billAddressMent();
},
/** /**
* @return {Boolean} * @return {Boolean}
*/ */
...@@ -164,6 +172,7 @@ define([ ...@@ -164,6 +172,7 @@ define([
// New address must be selected as a billing address // New address must be selected as a billing address
selectBillingAddress(newBillingAddress); selectBillingAddress(newBillingAddress);
setCurrentBillingAddress = newBillingAddress; setCurrentBillingAddress = newBillingAddress;
getCurrentBillingAddress = newBillingAddress;
checkoutData.setSelectedBillingAddress(newBillingAddress.getKey()); checkoutData.setSelectedBillingAddress(newBillingAddress.getKey());
checkoutData.setNewCustomerBillingAddress(addressData); checkoutData.setNewCustomerBillingAddress(addressData);
} }
......
app/code/Magento/Checkout/view/frontend/web/js/view/part.js
...@@ -7,6 +7,7 @@ define([ ...@@ -7,6 +7,7 @@ define([
], function ($, Component,registry,checkoutDataResolver,quote) { ], function ($, Component,registry,checkoutDataResolver,quote) {
'use strict'; 'use strict';
var input_city = $('#co-shipping-form input[name="city"]'); var input_city = $('#co-shipping-form input[name="city"]');
if (input_city.is(':visible') && !input_city.closest('.field').hasClass('_required')) { if (input_city.is(':visible') && !input_city.closest('.field').hasClass('_required')) {
input_city.attr('required',true); input_city.attr('required',true);
input_city.attr('_required',true); input_city.attr('_required',true);
...@@ -21,7 +22,8 @@ define([ ...@@ -21,7 +22,8 @@ define([
$(document).on('click', '#next-shipping>span', function () { $(document).on('click', '#next-shipping>span', function () {
var loginForm = $('.form.form-login'); var loginForm = $('.form.form-login');
var addressForm = $('#checkout-step-shipping>#co-shipping-form'); var addressForm = $('#checkout-step-shipping>#co-shipping-form');
if (loginForm.length > 0 && !loginForm.validate().form()) {
if (loginForm.length > 0 && !loginForm.validates().form()) {
return false; return false;
} }
if (addressForm.length > 0) { if (addressForm.length > 0) {
...@@ -38,12 +40,27 @@ define([ ...@@ -38,12 +40,27 @@ define([
if (region_select.is(':visible') && region_select.closest('.field').hasClass('_required')) { if (region_select.is(':visible') && region_select.closest('.field').hasClass('_required')) {
region_select.attr('required',true); region_select.attr('required',true);
} }
if (!addressForm.validate().form()) { var selectInput = $('#shipping-new-address-form .select-input');
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
var selectName = $(selectInput[i]).next('select').attr('name');
$(selectInput[i]).attr('name',selectName)
}
}
if (!addressForm.validates().form()) {
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
$(selectInput[i]).removeAttr('name')
}
}
return false; return false;
} }
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
$(selectInput[i]).removeAttr('name')
}
}
var paymentMethodObj = $('.checkout-index-index .payment-method'); var paymentMethodObj = $('.checkout-index-index .payment-method');
if(paymentMethodObj.length < 1) if(paymentMethodObj.length < 1)
{ {
...@@ -65,6 +82,50 @@ define([ ...@@ -65,6 +82,50 @@ define([
} }
if(!registry.get('checkout.steps.shipping-step.shippingAddress.after-shipping-method-form.billing-address-form').isAddressSameAsShipping()) if(!registry.get('checkout.steps.shipping-step.shippingAddress.after-shipping-method-form.billing-address-form').isAddressSameAsShipping())
{ {
var billadressForm = $('.checkout-billing-address form');
if(billadressForm.length > 0)
{
if (!$('.checkout-billing-address input[name="region"]').closest('.field').hasClass('_required')) {
$('.checkout-billing-address input[name="region"]').removeAttr('required');
}
if (!$('.checkout-billing-address input[name="street[1]"]').closest('.field').hasClass('_required')) {
$('.checkout-billing-address input[name="street[1]"]').removeAttr('required');
}
if (!$('.checkout-billing-address input[name="company"]').closest('.field').hasClass('_required')) {
$('.checkout-billing-address input[name="company"]').removeAttr('required');
}
var region_select = $('.checkout-billing-address select[name="region_id"]');
if (region_select.is(':visible') && region_select.closest('.field').hasClass('_required')) {
region_select.attr('required',true);
}
var selectInput = $('.checkout-billing-address .select-input');
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
var selectName = $(selectInput[i]).next('select').attr('name');
$(selectInput[i]).attr('name',selectName)
}
}
if (!billadressForm.validates().form()) {
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
$(selectInput[i]).removeAttr('name')
}
}
return false;
}
if(selectInput.length > 0){
for(var i=0;i<selectInput.length;i++){
$(selectInput[i]).removeAttr('name')
}
}
}else {
return false;
}
$('#submitBill').trigger('click'); $('#submitBill').trigger('click');
if(quote.responseBillStatus() == 400) if(quote.responseBillStatus() == 400)
{ {
...@@ -87,6 +148,7 @@ define([ ...@@ -87,6 +148,7 @@ define([
$('html,body').animate({scrollTop: scrollTop}, 'fast'); $('html,body').animate({scrollTop: scrollTop}, 'fast');
} }
checkoutDataResolver.resolveEstimationAddress(); checkoutDataResolver.resolveEstimationAddress();
quote.billAddressMent(true);
}); });
$(document).on('click', '#shipping-text .address-edit', function () { $(document).on('click', '#shipping-text .address-edit', function () {
...@@ -129,7 +191,9 @@ define([ ...@@ -129,7 +191,9 @@ define([
{ {
$('#action-edit-address').trigger('click'); $('#action-edit-address').trigger('click');
} }
quote.billAddressMent(false);
}); });
} }
}); });
} }
......
app/code/Magento/Checkout/view/frontend/web/template/billing-address/details.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* See COPYING.txt for license details. * See COPYING.txt for license details.
*/ */
--> -->
<div if="isAddressDetailsVisible() && currentBillingAddress()" class="billing-address-details"> <div if="isAddressDetailsVisible() && currentBillingAddress() && billAddressMent()" class="billing-address-details">
<div class="billing-box"> <div class="billing-box">
<div class="billing-address-box"> <div class="billing-address-box">
<text args="currentBillingAddress().prefix"></text> <text args="currentBillingAddress().firstname"></text> <text args="currentBillingAddress().prefix"></text> <text args="currentBillingAddress().firstname"></text>
......
app/code/Magento/Theme/view/base/requirejs-config.js
...@@ -30,6 +30,7 @@ var config = { ...@@ -30,6 +30,7 @@ var config = {
}, },
paths: { paths: {
'jquery/validate': 'jquery/jquery.validate', 'jquery/validate': 'jquery/jquery.validate',
'jquery/validates': 'jquery/jquery.validates',
'jquery/hover-intent': 'jquery/jquery.hoverIntent', 'jquery/hover-intent': 'jquery/jquery.hoverIntent',
'jquery/file-uploader': 'jquery/fileUploader/jquery.fileuploader', 'jquery/file-uploader': 'jquery/fileUploader/jquery.fileuploader',
'prototype': 'legacy-build.min', 'prototype': 'legacy-build.min',
......
app/code/Magento/Ui/view/base/web/js/form/components/group.js
...@@ -8,8 +8,9 @@ ...@@ -8,8 +8,9 @@
*/ */
define([ define([
'underscore', 'underscore',
'uiCollection' 'uiCollection',
], function (_, Collection) { 'jquery'
], function (_, Collection,$) {
'use strict'; 'use strict';
return Collection.extend({ return Collection.extend({
...@@ -104,6 +105,18 @@ define([ ...@@ -104,6 +105,18 @@ define([
*/ */
getPreview: function () { getPreview: function () {
return this.elems.map('getPreview'); return this.elems.map('getPreview');
},
getStreetState: function () {
if(this.elems()[0].value._latestValue == '' && this.elems()[0].initialValue == ''){
return false;
}
return true;
},
/**
* Updates data from server.
*/
isCheckoutIndex: function () {
return $('body').hasClass('checkout-index-index');
} }
}); });
}); });
app/code/Magento/Ui/view/base/web/js/form/element/abstract.js
...@@ -11,8 +11,9 @@ define([ ...@@ -11,8 +11,9 @@ define([
'mageUtils', 'mageUtils',
'uiLayout', 'uiLayout',
'uiElement', 'uiElement',
'Magento_Ui/js/lib/validation/validator' 'Magento_Ui/js/lib/validation/validator',
], function (_, utils, layout, Element, validator) { 'jquery'
], function (_, utils, layout, Element, validator,$) {
'use strict'; 'use strict';
return Element.extend({ return Element.extend({
...@@ -482,6 +483,13 @@ define([ ...@@ -482,6 +483,13 @@ define([
} }
return id; return id;
},
/**
* Updates data from server.
*/
isCheckoutIndex: function () {
return $('body').hasClass('checkout-index-index');
} }
}); });
}); });
app/code/Magento/Ui/view/base/web/js/form/element/select.js
...@@ -11,8 +11,9 @@ define([ ...@@ -11,8 +11,9 @@ define([
'mageUtils', 'mageUtils',
'uiRegistry', 'uiRegistry',
'./abstract', './abstract',
'uiLayout' 'uiLayout',
], function (_, utils, registry, Abstract, layout) { 'jquery'
], function (_, utils, registry, Abstract, layout,$) {
'use strict'; 'use strict';
var inputNode = { var inputNode = {
...@@ -310,6 +311,9 @@ define([ ...@@ -310,6 +311,9 @@ define([
} }
return this._super(); return this._super();
},
showNewSelect: function(){
return $('body').hasClass('checkout-index-index');
} }
}); });
}); });
app/code/Magento/Ui/view/base/web/js/form/form.js
...@@ -356,6 +356,13 @@ define([ ...@@ -356,6 +356,13 @@ define([
makeRequest(this.params, this.data, this.reloadUrl).then(function (data) { makeRequest(this.params, this.data, this.reloadUrl).then(function (data) {
app(data, true); app(data, true);
}); });
},
/**
* Updates data from server.
*/
isCheckoutIndex: function () {
return $('body').hasClass('checkout-index-index');
} }
}); });
}); });
app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js
...@@ -13,6 +13,7 @@ define([ ...@@ -13,6 +13,7 @@ define([
'moment', 'moment',
'tinycolor', 'tinycolor',
'jquery/validate', 'jquery/validate',
'jquery/validates',
'mage/translate' 'mage/translate'
], function ($, _, utils, moment, tinycolor) { ], function ($, _, utils, moment, tinycolor) {
'use strict'; 'use strict';
......
app/code/Magento/Ui/view/frontend/web/templates/form/element/select.html
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
* See COPYING.txt for license details. * See COPYING.txt for license details.
*/ */
--> -->
<!-- ko ifnot: isCheckoutIndex() -->
<select class="select" data-bind=" <select class="select" data-bind="
attr: { attr: {
name: inputName, name: inputName,
...@@ -26,3 +27,31 @@ ...@@ -26,3 +27,31 @@
} }
}" }"
></select> ></select>
<!-- /ko -->
<!-- ko if: isCheckoutIndex() -->
<input class="input-text select-input" type="text" data-bind="value: getPreview(),attr: {
'aria-required': required
}" required readonly="readonly"/>
<select class="select check-select" data-bind="
attr: {
name: inputName,
id: uid,
disabled: disabled,
'aria-describedby': getDescriptionId(),
'aria-required': required,
'aria-invalid': error() ? true : 'false',
placeholder: placeholder
},
hasFocus: focused,
optgroup: options,
value: value,
optionsCaption: caption,
optionsValue: 'value',
optionsText: 'label',
optionsAfterRender: function(option, item) {
if (item && item.disabled) {
ko.applyBindingsToNode(option, {attr: {disabled: true}}, item);
}
}"></select>
<!-- /ko -->
\ No newline at end of file
app/code/Magento/Ui/view/frontend/web/templates/form/field.html
...@@ -4,9 +4,12 @@ ...@@ -4,9 +4,12 @@
* See COPYING.txt for license details. * See COPYING.txt for license details.
*/ */
--> -->
<!-- ko ifnot: isCheckoutIndex() -->
<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses"> <div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses">
<label class="label" data-bind="attr: { for: element.uid }"><!-- ko if: element.label --><span translate="element.label"></span><!-- /ko --></label> <label class="label" data-bind="attr: { for: element.uid }">
<!-- ko if: element.label --><span translate="element.label"></span><!-- /ko -->
</label>
<div class="control" data-bind="css: {'_with-tooltip': element.tooltip}"> <div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
<!-- ko ifnot: element.hasAddons() --> <!-- ko ifnot: element.hasAddons() -->
...@@ -50,3 +53,36 @@ ...@@ -50,3 +53,36 @@
<!-- /ko --> <!-- /ko -->
</div> </div>
</div> </div>
<!-- /ko -->
<!-- ko if: isCheckoutIndex() -->
<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses">
<label class="label" data-bind="attr: { for: element.uid },css: {'fouse-label': element.value}">
<!-- ko if: element.label --><span translate="element.label"></span><!-- /ko -->
</label>
<div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
<!-- ko ifnot: element.hasAddons() -->
<!-- ko template: element.elementTmpl --><!-- /ko -->
<!-- /ko -->
<!-- ko if: element.hasAddons() -->
<div class="control-addon">
<!-- ko template: element.elementTmpl --><!-- /ko -->
<!-- ko if: element.addbefore -->
<label class="addon-prefix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label>
<!-- /ko -->
<!-- ko if: element.addafter -->
<label class="addon-suffix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko if: element.tooltip -->
<!-- ko template: element.tooltipTpl --><!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
\ No newline at end of file
app/code/Magento/Ui/view/frontend/web/templates/group/group.html
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
* See COPYING.txt for license details. * See COPYING.txt for license details.
*/ */
--> -->
<!-- ko ifnot: isCheckoutIndex() -->
<fieldset class="field" data-bind="css: additionalClasses"> <fieldset class="field" data-bind="css: additionalClasses">
<legend class="label"> <legend class="label">
<span translate="element.label"></span> <span translate="element.label"></span>
...@@ -11,26 +12,51 @@ ...@@ -11,26 +12,51 @@
<div class="control"> <div class="control">
<!-- ko foreach: { data: elems, as: 'element' } --> <!-- ko foreach: { data: elems, as: 'element' } -->
<!-- ko if: element.visible() --> <!-- ko if: element.visible() -->
<!-- ko ifnot: (element.input_type == 'checkbox' || element.input_type == 'radio') --> <!-- ko ifnot: (element.input_type == 'checkbox' || element.input_type == 'radio') -->
<!-- ko template: $parent.fieldTemplate --><!-- /ko --> <!-- ko template: $parent.fieldTemplate --><!-- /ko -->
<!-- /ko --> <!-- /ko -->
<!-- ko if: (element.input_type == 'checkbox' || element.input_type == 'radio') --> <!-- ko if: (element.input_type == 'checkbox' || element.input_type == 'radio') -->
<!-- ko template: element.elementTmpl --><!-- /ko --> <!-- ko template: element.elementTmpl --><!-- /ko -->
<!-- /ko --> <!-- /ko -->
<!-- /ko --> <!-- /ko -->
<!-- /ko --> <!-- /ko -->
<!-- ko if: validateWholeGroup --> <!-- ko if: validateWholeGroup -->
<!-- ko foreach: { data: elems, as: 'element' } --> <!-- ko foreach: { data: elems, as: 'element' } -->
<!-- ko if: element.error() && element.visible() --> <!-- ko if: element.error() && element.visible() -->
<label class="error" data-bind="attr: { for: uid }, text: element.error"></label> <label class="error" data-bind="attr: { for: uid }, text: element.error"></label>
<!-- /ko --> <!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</div>
</fieldset>
<!-- /ko -->
<!-- ko if: isCheckoutIndex() -->
<fieldset class="field" data-bind="css: additionalClasses">
<legend class="label" data-bind="css: {'fouse-label': getStreetState()}">
<span translate="element.label"></span>
</legend>
<div class="control">
<!-- ko foreach: { data: elems, as: 'element' } -->
<!-- ko if: element.visible() -->
<!-- ko ifnot: (element.input_type == 'checkbox' || element.input_type == 'radio') -->
<!-- ko template: $parent.fieldTemplate --><!-- /ko -->
<!-- /ko --> <!-- /ko -->
<!-- ko if: (element.input_type == 'checkbox' || element.input_type == 'radio') -->
<!-- ko template: element.elementTmpl --><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko --> <!-- /ko -->
</div> </div>
</fieldset> </fieldset>
<!-- /ko -->
\ No newline at end of file
app/design/frontend/Joshine/breeze/Magento_Checkout/templates/onepage.phtml
...@@ -871,10 +871,98 @@ $full_free_ship = $_helper->currency($full_free, true, false); ...@@ -871,10 +871,98 @@ $full_free_ship = $_helper->currency($full_free, true, false);
.checkout-index-index .page-header .header.content .logo{ .checkout-index-index .page-header .header.content .logo{
left:35%; left:35%;
} }
.checkout-index-index .form-shipping-address{
margin-top:2rem;
}
}
.checkout-index-index #shipping .field.street {
min-height:7rem;
}
.checkout-index-index #shipping .field.street .field.additional .control input[type="text"] {
padding:0;
}
.checkout-index-index #shipping .field.street .control{
border:none;
}
.checkout-index-index #shipping .field.street .control .field .control{
border: 1px solid #ddd;
} }
.checkout-index-index #shipping .field.field-select-billing .control{
border:none;
}
.checkout-index-index .opc .field-select-billing .label{
border-bottom: none;
}
.checkout-index-index .select-style{
height:3rem;
z-index:2;
transition: all .3s ease;
border:1px solid #ddd;
}
.checkout-index-index .error-border-style{
border:1px solid #fa320f!important;
}
.checkout-index-index .select-input{
cursor: pointer;
}
.fieldset.address .check-select{
z-index:2;
display:none;
}
.checkout-index-index #customer-password{
height: 50px;
outline: none;
text-indent: 10px;
padding: 18px 0 0;
border: none;
color: #515151;
background: 0 0;
}
/************************************* top logo style end******************************************************/ /************************************* top logo style end******************************************************/
/********************************************address from end****************************************************/
#shipping .field{
position: relative;
}
#shipping .field .label{
position: absolute;
z-index: 1;
top:15px;
line-height: 18px;
transition: all .3s ease;
margin-left:0.5rem;
}
#shipping .field .control {
height:50px;
border:1px solid #ddd;
}
#shipping .field.required .label::before, #shipping .field._required .label::before {
content: '*';
color: rgba(var(--danger-color), var(--danger-alpha, 1));
}
#shipping .field.required .label::after, #shipping .field._required .label::after {
content: '';
}
#shipping .field ._with-tooltip .field-tooltip {
/*position: static;*/
vertical-align: middle;
}
#shipping .field .control input[type="text"],#maincontent input[type="email"] {
height: 50px;
outline: none;
text-indent: 10px;
padding: 18px 0 0;
border: none;
color: #515151;
background: 0 0;
}
#shipping .fouse-label{
top:5px!important;
}
/********************************************address from end****************************************************/
</style> </style>
<div id="checkout" data-bind="scope:'checkout'" class="checkout-container"> <div id="checkout" data-bind="scope:'checkout'" class="checkout-container">
...@@ -953,5 +1041,113 @@ script; ...@@ -953,5 +1041,113 @@ script;
}); });
} }
$(document).on('focus', '#shipping input[type="email"],#shipping input[type="password"],#shipping input[type="text"]', function () {
if($(this).hasClass('select-input'))
{
return false;
}
if(!$(this).parent().prev('label').hasClass('fouse-label')){
$(this).parent().prev('label').addClass('fouse-label')
}
});
$(document).on('blur', '#shipping input[type="email"],#shipping input[type="password"],#shipping input[type="text"]', function () {
if($(this).hasClass('select-input'))
{
return false;
}
if($(this).parent().prev('label').hasClass('fouse-label')){
if($(this).val() == ''){
$(this).parent().prev('label').removeClass('fouse-label')
}
}
if($(this).attr('aria-required') == 'true')
{
var thisVal = $(this).val();
if(thisVal === '' || thisVal == null || thisVal.length === 0 || /^\s+$/.test(thisVal))
{
$(this).addClass('error-border-style')
}
else if($(this).hasClass('error-border-style'))
{
$(this).removeClass('error-border-style')
}
}
});
$(document).on('focus', '#shipping .field.street ._required input[type="text"]', function () {
if(!$(this).parent().parent().parent().prev('.label').hasClass('fouse-label')){
$(this).parent().parent().parent().prev('.label').addClass('fouse-label')
}
});
$(document).on('blur', '#shipping .field.street ._required input[type="text"]', function () {
if($(this).parent().parent().parent().prev('.label').hasClass('fouse-label')){
var thisVal = $(this).val();
if(thisVal === '' || thisVal == null || thisVal.length === 0 || /^\s+$/.test(thisVal))
{
$(this).addClass('error-border-style');
$(this).parent().parent().parent().prev('.label').removeClass('fouse-label')
}
else if($(this).hasClass('error-border-style'))
{
$(this).removeClass('error-border-style')
}
}
});
//select-input
$(document).on('click', '#shipping .select-input', function () {
if($(this).next('.select').is(':visible'))
{
$(this).next('.select').hide();
$(this).next('.select').removeClass('select-style')
if($(this).val() == '')
{
if($(this).parent().prev('.label').hasClass('fouse-label')){
$(this).parent().prev('.label').removeClass('fouse-label');
}
}
}
else
{
$(this).next('.select').show();
$(this).next('.select').addClass('select-style');
if($(this).val() == '')
{
$(this).parent().prev('.label').addClass('fouse-label');
}
}
});
//check-select
$(document).on('click', '#shipping .check-select', function () {
$(document).on('change', '#shipping .check-select', function () {
if($(this).val() != '')
{
if($(this).val() == '-')
{
$(this).prev('input').addClass('error-border-style');
}else {
$(this).hide();
$(this).removeClass('select-style');
if($(this).prev('input').hasClass('error-border-style')){
$(this).prev('input').removeClass('error-border-style');
}
}
}
else
{
$(this).prev('input').addClass('error-border-style');
}
});
});
}); });
</script> </script>
\ No newline at end of file
app/design/frontend/Joshine/breeze/Magento_Checkout/web/template/form/element/email.html
...@@ -14,7 +14,10 @@ ...@@ -14,7 +14,10 @@
method="post"> method="post">
<fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading"> <fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
<div class="field required"> <div class="field required">
<label class="label" for="customer-email"><span data-bind="i18n: 'Email Address'"></span><!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko --></label> <label class="label" for="customer-email" data-bind="css:{'fouse-label': email}">
<span data-bind="i18n: 'Email Address'"></span>
<!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->
</label>
<div class="control _with-tooltip"> <div class="control _with-tooltip">
<input class="input-text" <input class="input-text"
type="email" type="email"
...@@ -37,10 +40,6 @@ ...@@ -37,10 +40,6 @@
<label class="label" for="customer-password"><span data-bind="i18n: 'Password'"></span></label> <label class="label" for="customer-password"><span data-bind="i18n: 'Password'"></span></label>
<div class="control"> <div class="control">
<input class="input-text" <input class="input-text"
data-bind="
attr: {
placeholder: $t('Password'),
}"
type="password" type="password"
name="password" name="password"
id="customer-password" id="customer-password"
...@@ -67,4 +66,4 @@ ...@@ -67,4 +66,4 @@
<!--Hidden fields --> <!--Hidden fields -->
</fieldset> </fieldset>
</form> </form>
<!-- /ko --> <!-- /ko -->
\ No newline at end of file
lib/web/mage/validation.js
...@@ -9,6 +9,7 @@ define([ ...@@ -9,6 +9,7 @@ define([
'mageUtils', 'mageUtils',
'jquery-ui-modules/widget', 'jquery-ui-modules/widget',
'jquery/validate', 'jquery/validate',
'jquery/validates',
'mage/translate' 'mage/translate'
], function ($, moment, utils) { ], function ($, moment, utils) {
'use strict'; 'use strict';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment