Skip to content

Commit 65a0c1f

Browse files
php-cuongphp-cuong
committed
fixed the bugs
1 parent 250ce3c commit 65a0c1f

File tree

3 files changed

+101
-142
lines changed

3 files changed

+101
-142
lines changed

‎etc/adminhtml/system.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
</field>
3535
<field id="api_key" translate="label comment" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">
3636
<label>Maps JavaScript API</label>
37-
<comment>Create API key, please &lt;a href="https://cloud.google.com/console" target="_blank"&gt;click here&lt;/a&gt;.</comment>
37+
<comment>Create API key, please &lt;a href="https://developers.google.com/places/web-service/get-api-key" target="_blank"&gt;click here&lt;/a&gt;.</comment>
3838
<validate>required-entry</validate>
3939
</field>
4040
</group>

‎view/frontend/web/js/address-autofill.js‎

Lines changed: 30 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -41,67 +41,52 @@ define([
4141
* @private
4242
*/
4343
_create: function () {
44-
this._initAutocomplete();
45-
},
46-
47-
/**
48-
* Fill in customer address
49-
*
50-
* @private
51-
*/
52-
_fillInAddress() {
44+
var self = this;
45+
this.options.autocomplete = new google.maps.places.Autocomplete(
46+
document.getElementById('street_1'),
47+
{types: ['geocode']}
48+
);
49+
// When the user selects an address from the dropdown, populate the address
50+
// fields in the form.
51+
this.options.autocomplete.addListener('place_changed', function() {
5352
// Get the place details from the autocomplete object.
54-
var place = this.options.autocomplete.getPlace();
53+
var place = self.options.autocomplete.getPlace();
5554
// Get each component of the address from the place details
5655
// and fill the corresponding field on the form.
5756
for (var i = place.address_components.length-1; i >= 0; i--) {
5857
var addressType = place.address_components[i].types[0];
5958
var long_name = place.address_components[i].long_name;
6059
var short_name = place.address_components[i].short_name;
61-
if (this.options.componentForm[addressType] && long_name) {
62-
if (this.options.componentForm[addressType] == 'country') {
63-
$('#'+this.options.componentForm[addressType]).val(short_name).trigger('change');
64-
} else if (this.options.componentForm[addressType] == 'region') {
65-
$('#'+this.options.componentForm[addressType]).val(long_name).trigger('change');
60+
if (self.options.componentForm[addressType] && long_name) {
61+
if (self.options.componentForm[addressType] == 'country') {
62+
$('#'+self.options.componentForm[addressType]).val(short_name).trigger('change');
63+
} else if (self.options.componentForm[addressType] == 'region') {
64+
$('#'+self.options.componentForm[addressType]).val(long_name).trigger('change');
6665
if ($('#region_id option:contains('+long_name+')')) {
6766
$('#region_id option:contains('+long_name+')').prop('selected', true);
6867
}
69-
} else if (this.options.componentForm[addressType] == 'route') {
68+
} else if (self.options.componentForm[addressType] == 'route') {
7069
$('#street_1').val(long_name).trigger('keyup');
71-
} else if (this.options.componentForm[addressType] == 'street_1') {
72-
$('#'+this.options.componentForm[addressType]).val(long_name + ' '+ $('#'+this.options.componentForm[addressType]).val());
70+
} else if (self.options.componentForm[addressType] == 'street_1') {
71+
$('#'+self.options.componentForm[addressType]).val(long_name + ' '+ $('#'+self.options.componentForm[addressType]).val());
7372
} else {
74-
$('#'+this.options.componentForm[addressType]).val(long_name).trigger('keyup');
73+
$('#'+self.options.componentForm[addressType]).val(long_name).trigger('keyup');
7574
}
7675
}
7776
}
78-
},
79-
80-
/**
81-
* Get place for customer address
82-
*
83-
* @private
84-
*/
85-
_initAutocomplete() {
86-
this.options.autocomplete = new google.maps.places.Autocomplete(
87-
document.getElementById('street_1'),
88-
{types: ['geocode']}
89-
);
90-
// When the user selects an address from the dropdown, populate the address
91-
// fields in the form.
92-
this.options.autocomplete.addListener('place_changed', this._fillInAddress());
93-
this.options.autocomplete.setComponentRestrictions({'country': this._getCountriesCodeArray()});
94-
},
77+
});
78+
this.options.autocomplete.setComponentRestrictions({'country': this._getCountriesCodeArray()});
79+
},
9580

96-
/**
97-
* Convert countries code to array
98-
*
99-
* @private
100-
*/
101-
_getCountriesCodeArray() {
102-
var countries = self.options.countries;
103-
return countries.split(',');
104-
}
81+
/**
82+
* Convert countries code to array
83+
*
84+
* @private
85+
*/
86+
_getCountriesCodeArray() {
87+
var countries = this.options.countries;
88+
return countries.split(',');
89+
}
10590
});
10691
return $.phpcuong.addressAutofill;
10792
});

‎view/frontend/web/js/checkout-address-autofill.js‎

Lines changed: 70 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,7 @@ define([
3838
shippingAutocomplete: null,
3939
billingAutocomplete: null,
4040
billingStreetFound: false,
41-
billingFunction: null,
42-
shippingFunctions: null
41+
billingFunction: null
4342
},
4443

4544
/**
@@ -48,97 +47,8 @@ define([
4847
*/
4948
_create: function () {
5049
var self = this;
51-
this._initShippingAutocomplete();
5250

53-
$(document).on('change', 'select[name="billing_address_id"]', function() {
54-
if ($(this).find('option:last').prop('selected')) {
55-
self._initBillingAutocomplete();
56-
}
57-
});
58-
59-
$(document).on('click', 'input[name="billing-address-same-as-shipping"], .action-edit-address', function() {
60-
self._initBillingAutocomplete();
61-
});
62-
},
63-
64-
/**
65-
* Fill in shipping address
66-
*
67-
* @private
68-
*/
69-
_fillInShippingAddress() {
70-
// Get the place details from the autocomplete object.
71-
var place = this.options.shippingAutocomplete.getPlace();
72-
// Get each component of the address from the place details
73-
// and fill the corresponding field on the form.
74-
for (var i = place.address_components.length-1; i >= 0; i--) {
75-
var addressType = place.address_components[i].types[0];
76-
var long_name = place.address_components[i].long_name;
77-
var short_name = place.address_components[i].short_name;
78-
if (this.options.componentForm[addressType] && long_name) {
79-
if (this.options.componentForm[addressType] == 'country') {
80-
$('#shipping-new-address-form select[name="country_id"]').val(short_name).trigger('change');
81-
} else if (this.options.componentForm[addressType] == 'region') {
82-
$('#shipping-new-address-form input[name="region"]').val(long_name).trigger('keyup');
83-
if ($('#shipping-new-address-form select[name="region_id"] option:contains('+long_name+')')) {
84-
$('#shipping-new-address-form select[name="region_id"] option:contains('+long_name+')').prop('selected', true).trigger('change');
85-
}
86-
} else if (this.options.componentForm[addressType] == 'route') {
87-
$('#shipping-new-address-form input[name="street[0]"]').val(long_name).trigger('keyup').trigger('keyup');
88-
} else if (this.options.componentForm[addressType] == 'street_1') {
89-
$('#shipping-new-address-form input[name="street[0]"]').val(long_name + ' '+ $('#shipping-new-address-form input[name="street[0]"]').val()).trigger('keyup');
90-
} else if (this.options.componentForm[addressType] == 'zip') {
91-
$('#shipping-new-address-form input[name="postcode"]').val(long_name).trigger('keyup');
92-
} else {
93-
$('#shipping-new-address-form input[name="'+this.options.componentForm[addressType]+'"]').val(long_name).trigger('keyup');
94-
}
95-
}
96-
}
97-
},
98-
99-
/**
100-
* Fill in billing address
101-
*
102-
* @private
103-
*/
104-
_fillInBillingAddress() {
105-
// Get the place details from the autocomplete object.
106-
var place = this.options.billingAutocomplete.getPlace();
107-
console.log(place);
108-
// Get each component of the address from the place details
109-
// and fill the corresponding field on the form.
110-
for (var i = place.address_components.length-1; i >= 0; i--) {
111-
var addressType = place.address_components[i].types[0];
112-
var long_name = place.address_components[i].long_name;
113-
var short_name = place.address_components[i].short_name;
114-
if (this.options.componentForm[addressType] && long_name) {
115-
if (this.options.componentForm[addressType] == 'country') {
116-
$('#billing-new-address-form select[name="country_id"]').val(short_name).trigger('change');
117-
} else if (this.options.componentForm[addressType] == 'region') {
118-
$('#billing-new-address-form input[name="region"]').val(long_name).trigger('keyup');
119-
if ($('#billing-new-address-form select[name="region_id"] option:contains('+long_name+')')) {
120-
$('#billing-new-address-form select[name="region_id"] option:contains('+long_name+')').prop('selected', true).trigger('change');
121-
}
122-
} else if (this.options.componentForm[addressType] == 'route') {
123-
$('#billing-new-address-form input[name="street[0]"]').val(long_name).trigger('keyup').trigger('keyup');
124-
} else if (this.options.componentForm[addressType] == 'street_1') {
125-
$('#billing-new-address-form input[name="street[0]"]').val(long_name + ' '+ $('#billing-new-address-form input[name="street[0]"]').val()).trigger('keyup');
126-
} else if (this.options.componentForm[addressType] == 'zip') {
127-
$('#billing-new-address-form input[name="postcode"]').val(long_name).trigger('keyup');
128-
} else {
129-
$('#billing-new-address-form input[name="'+this.options.componentForm[addressType]+'"]').val(long_name).trigger('keyup');
130-
}
131-
}
132-
}
133-
},
134-
135-
/**
136-
* Get place for shipping address
137-
*
138-
* @private
139-
*/
140-
_initShippingAutocomplete() {
141-
var self = this;
51+
// Fill in shipping address
14252
this.options.shippingFunctions = setInterval(function() {
14353
var street = $('#shipping-new-address-form').find('input[name="street[0]"]')[0];
14454
if (street) {
@@ -149,7 +59,33 @@ define([
14959
self.options.shippingAutocomplete.inputId = street.id;
15060
self.options.shippingAutocomplete.setComponentRestrictions({'country': self._getCountriesCodeArray()});
15161
google.maps.event.addListener(self.options.shippingAutocomplete, 'place_changed', function () {
152-
self._fillInShippingAddress();
62+
// Get the place details from the autocomplete object.
63+
var place = self.options.shippingAutocomplete.getPlace();
64+
// Get each component of the address from the place details
65+
// and fill the corresponding field on the form.
66+
for (var i = place.address_components.length-1; i >= 0; i--) {
67+
var addressType = place.address_components[i].types[0];
68+
var long_name = place.address_components[i].long_name;
69+
var short_name = place.address_components[i].short_name;
70+
if (self.options.componentForm[addressType] && long_name) {
71+
if (self.options.componentForm[addressType] == 'country') {
72+
$('#shipping-new-address-form select[name="country_id"]').val(short_name).trigger('change');
73+
} else if (self.options.componentForm[addressType] == 'region') {
74+
$('#shipping-new-address-form input[name="region"]').val(long_name).trigger('keyup');
75+
if ($('#shipping-new-address-form select[name="region_id"] option:contains('+long_name+')')) {
76+
$('#shipping-new-address-form select[name="region_id"] option:contains('+long_name+')').prop('selected', true).trigger('change');
77+
}
78+
} else if (self.options.componentForm[addressType] == 'route') {
79+
$('#shipping-new-address-form input[name="street[0]"]').val(long_name).trigger('keyup').trigger('keyup');
80+
} else if (self.options.componentForm[addressType] == 'street_1') {
81+
$('#shipping-new-address-form input[name="street[0]"]').val(long_name + ' '+ $('#shipping-new-address-form input[name="street[0]"]').val()).trigger('keyup');
82+
} else if (self.options.componentForm[addressType] == 'zip') {
83+
$('#shipping-new-address-form input[name="postcode"]').val(long_name).trigger('keyup');
84+
} else {
85+
$('#shipping-new-address-form input[name="'+self.options.componentForm[addressType]+'"]').val(long_name).trigger('keyup');
86+
}
87+
}
88+
}
15389
});
15490
clearInterval(self.options.shippingFunctions);
15591
}
@@ -158,14 +94,26 @@ define([
15894
clearInterval(self.options.shippingFunctions);
15995
}
16096
}, 2000);
97+
98+
$(document).on('change', 'select[name="billing_address_id"]', function() {
99+
if ($(this).find('option:last').prop('selected')) {
100+
self._fillInBillingAddress();
101+
}
102+
});
103+
104+
$(document).on('click', 'input[name="billing-address-same-as-shipping"], .action-edit-address', function() {
105+
if ($(this).find('option:last').prop('selected')) {
106+
self._fillInBillingAddress();
107+
}
108+
});
161109
},
162110

163111
/**
164-
* Get place for billing address
112+
* Fill in billing address
165113
*
166114
* @private
167115
*/
168-
_initBillingAutocomplete() {
116+
_fillInBillingAddress() {
169117
var self = this;
170118
if (!this.options.billingStreetFound) {
171119
this.options.billingFunctions = setInterval(function() {
@@ -178,7 +126,33 @@ define([
178126
self.options.billingAutocomplete.inputId = street.id;
179127
self.options.billingAutocomplete.setComponentRestrictions({'country': self._getCountriesCodeArray()});
180128
google.maps.event.addListener(self.options.billingAutocomplete, 'place_changed', function () {
181-
self._fillInBillingAddress();
129+
// Get the place details from the autocomplete object.
130+
var place = self.options.billingAutocomplete.getPlace();
131+
// Get each component of the address from the place details
132+
// and fill the corresponding field on the form.
133+
for (var i = place.address_components.length-1; i >= 0; i--) {
134+
var addressType = place.address_components[i].types[0];
135+
var long_name = place.address_components[i].long_name;
136+
var short_name = place.address_components[i].short_name;
137+
if (self.options.componentForm[addressType] && long_name) {
138+
if (self.options.componentForm[addressType] == 'country') {
139+
$('#billing-new-address-form select[name="country_id"]').val(short_name).trigger('change');
140+
} else if (self.options.componentForm[addressType] == 'region') {
141+
$('#billing-new-address-form input[name="region"]').val(long_name).trigger('keyup');
142+
if ($('#billing-new-address-form select[name="region_id"] option:contains('+long_name+')')) {
143+
$('#billing-new-address-form select[name="region_id"] option:contains('+long_name+')').prop('selected', true).trigger('change');
144+
}
145+
} else if (self.options.componentForm[addressType] == 'route') {
146+
$('#billing-new-address-form input[name="street[0]"]').val(long_name).trigger('keyup').trigger('keyup');
147+
} else if (self.options.componentForm[addressType] == 'street_1') {
148+
$('#billing-new-address-form input[name="street[0]"]').val(long_name + ' '+ $('#billing-new-address-form input[name="street[0]"]').val()).trigger('keyup');
149+
} else if (self.options.componentForm[addressType] == 'zip') {
150+
$('#billing-new-address-form input[name="postcode"]').val(long_name).trigger('keyup');
151+
} else {
152+
$('#billing-new-address-form input[name="'+self.options.componentForm[addressType]+'"]').val(long_name).trigger('keyup');
153+
}
154+
}
155+
}
182156
});
183157
clearInterval(self.options.billingFunctions);
184158
self.options.billingStreetFound = true;

0 commit comments

Comments
 (0)