custom/static-plugins/WexoProjectCustomizations/src/Resources/views/storefront/component/account/register.html.twig line 1

Open in your IDE?
  1. {% sw_extends "@Storefront/storefront/component/account/register.html.twig" %}
  3. {% block component_account_register %}
  4.     {{ parent() }}
  6.     {% if config('WexoProjectCustomizations').config.activateAutocomplete %}
  7.         <div class="autocomplete-form"></div>
  8.         <script
  9.             src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDhHvbZden9wcgx8IQ5ZGX4X43YiaZGRqw&libraries=places&callback=initAutocomplete"
  10.             async defer>
  11.         </script>
  12.         <script>
  13.             let autocompleteBilling;
  14.             let billingAddress1Field;
  15.             let billingPostCode;
  16.             let billingCity;
  18.             let autocompleteShipping;
  19.             let shippingAddress1Field;
  20.             let shippingPostCode;
  21.             let shippingCity;
  24.             function initAutocomplete() {
  25.                 initAutocompleteBilling();
  26.                 initAutocompleteShipping();
  27.             }
  29.             function initAutocompleteBilling() {
  30.                 billingAddress1Field = document.querySelector("#billingAddressAddressStreet");
  31.                 billingPostCode = document.querySelector("#billingAddressAddressZipcode");
  32.                 billingCity = document.querySelector("#billingAddressAddressCity");
  34.                 // Create the autocomplete object, restricting the search predictions to
  35.                 autocompleteBilling = new google.maps.places.Autocomplete(billingAddress1Field, {
  36.                     fields: ["address_components", "geometry"],
  37.                     types: ["address"],
  38.                     componentRestrictions: {country:'dk'}
  39.                 });
  40.                 // When the user selects an address from the drop-down, populate the
  41.                 // address fields in the form.
  42.                 autocompleteBilling.addListener("place_changed", fillInAddressBilling);
  43.             }
  45.             function fillInAddressBilling() {
  46.                 // Get the place details from the autocomplete object.
  47.                 const place = autocompleteBilling.getPlace();
  48.                 let address1 = "";
  49.                 let postcode = "";
  51.                 // Get each component of the address from the place details,
  52.                 // and then fill-in the corresponding field on the form.
  53.                 // place.address_components are google.maps.GeocoderAddressComponent objects
  54.                 // which are documented at http://goo.gle/3l5i5Mr
  55.                 for (const component of place.address_components) {
  56.                     const componentType = component.types[0];
  58.                     switch (componentType) {
  59.                         case "route": {
  60.                             address1 = `${component.long_name} ${address1}`;
  61.                             break;
  62.                         }
  64.                         case "street_number": {
  65.                             address1 += component.short_name;
  66.                             break;
  67.                         }
  69.                         case "postal_code": {
  70.                             document.querySelector("#billingAddressAddressZipcode").value = component.long_name;
  71.                             break;
  72.                         }
  74.                         case "postal_code_suffix": {
  75.                             postcode = `${postcode}-${component.long_name}`;
  76.                             break;
  77.                         }
  79.                         case "postal_town": {
  80.                             document.querySelector("#billingAddressAddressCity").value = component.long_name;
  81.                             break;
  82.                         }
  84.                         case "locality": {
  85.                             document.querySelector("#billingAddressAddressCity").value = component.long_name;
  86.                             break;
  87.                         }
  89.                         case "administrative_area_level_1": {
  90.                             document.querySelector("#state").value = component.short_name;
  91.                             break;
  92.                         }
  94.                         case "country": {
  95.                             $("#billingAddressAddressCountry option[data-iso='" + component.short_name + "']").prop("selected", true);
  96.                             break;
  97.                         }
  98.                     }
  99.                 }
  100.                 billingAddress1Field.value = address1;
  101.             }
  103.             function initAutocompleteShipping() {
  104.                 shippingAddress1Field = document.querySelector("#shippingAddressAddressStreet");
  105.                 shippingPostCode = document.querySelector("#shippingAddressAddressZipcode");
  106.                 shippingCity = document.querySelector("#shippingAddressAddressCity");
  108.                 // Create the autocomplete object, restricting the search predictions to
  109.                 autocompleteShipping = new google.maps.places.Autocomplete(shippingAddress1Field, {
  110.                     fields: ["address_components", "geometry"],
  111.                     types: ["address"],
  112.                     componentRestrictions: {country:'dk'}
  113.                 });
  114.                 // When the user selects an address from the drop-down, populate the
  115.                 // address fields in the form.
  116.                 autocompleteShipping.addListener("place_changed", fillInAddressShipping);
  117.             }
  119.             function fillInAddressShipping() {
  120.                 // Get the place details from the autocomplete object.
  121.                 const place = autocompleteShipping.getPlace();
  122.                 let address1 = "";
  123.                 let postcode = "";
  125.                 // Get each component of the address from the place details,
  126.                 // and then fill-in the corresponding field on the form.
  127.                 // place.address_components are google.maps.GeocoderAddressComponent objects
  128.                 // which are documented at http://goo.gle/3l5i5Mr
  129.                 for (const component of place.address_components) {
  130.                     const componentType = component.types[0];
  132.                     switch (componentType) {
  133.                         case "route": {
  134.                             address1 = `${component.long_name} ${address1}`;
  135.                             break;
  136.                         }
  138.                         case "street_number": {
  139.                             address1 += component.short_name;
  140.                             break;
  141.                         }
  143.                         case "postal_code": {
  144.                             document.querySelector("#shippingAddressAddressZipcode").value = component.long_name;
  145.                             break;
  146.                         }
  148.                         case "postal_code_suffix": {
  149.                             postcode = `${postcode}-${component.long_name}`;
  150.                             break;
  151.                         }
  153.                         case "postal_town": {
  154.                             document.querySelector("#shippingAddressAddressCity").value = component.long_name;
  155.                             break;
  156.                         }
  158.                         case "locality": {
  159.                             document.querySelector("#shippingAddressAddressCity").value = component.long_name;
  160.                             break;
  161.                         }
  163.                         case "administrative_area_level_1": {
  164.                             document.querySelector("#state").value = component.short_name;
  165.                             break;
  166.                         }
  168.                         case "country": {
  169.                             if (document.querySelector("#state").value === "Northern Ireland") {
  170.                                 $("#shippingAddressAddressCountry option[value='315f0beac6764136a4482f7ff5635148']").prop("selected", true);
  171.                             } else if (document.querySelector("#state").value === "England") {
  172.                                 $("#shippingAddressAddressCountry option[value='92c4bbd1cb884370a0b1ee11de0825e0']").prop("selected", true);
  173.                             } else {
  174.                                 $("#shippingAddressAddressCountry option[data-iso='" + component.short_name + "']").prop("selected", true);
  175.                             }
  176.                             break;
  177.                         }
  178.                     }
  179.                 }
  180.                 shippingAddress1Field.value = address1;
  181.             }
  183.         </script>
  184.     {% endif %}
  185. {% endblock %}