1

We are working on hyperlocal modules. We are serving to specific cities as of now only. For this, we have enabled the location selection also. But we need to restrict the places from everywhere to Visakhapatnam and Hyderabad locations only.

My Addressform.phtml is as follows:

<?php
/**
  * Webkul_MpHyperLocal address block.
  * @category  Webkul
  * @package   Webkul_MpHyperLocal
  * @author    Webkul
  * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
  * @license   https://store.webkul.com/license.html
  */

// @codingStandardsIgnoreFile
$block->logItem();
$address = $block->isAddressSet();
?>
<i class="material-icons depoto-first-icon">location_on</i>
<span id="selected-location" class="depoto-selected-area">
    <?php echo $address ? $address['address'] :''; ?>
</span>
<i class="material-icons my_location">expand_more</i>
<div class="wk-mp-design" style="display: none;">
    <fieldset class="info wk-mp-fieldset fieldset" id="select-address-popup">
        <div class="fieldset form-list" id="cust">
            <div class="field">
                <label class="label depoto-places"><?php echo __('We are serving at Visakhapatnam and Hyderabad only')?></label>
                <div class="control">
                   <input class="input-text depoto-input-width" placeholder="Enter your shipping area..." data-lat="<?php echo $address ? $address['latitude'] :'' ?>" data-lng="<?php echo $address ? $address['longitude']:''?>" data-city="<?php echo $address ? $address['city'] :'' ?>" data-state="<?php echo $address ? $address['state'] :'' ?>" data-country="<?php echo $address ? $address['country'] :'' ?>" name="address" value="<?php echo $address ? $address['address'] :''?>" id="autocomplete" type="text" />
                </div>                                                              
            </div>
        </div>
    </fieldset>
</div>
<script>
require.config({
    map: {
        '*': {
            'googleMapPlaceLibrary': 'https://maps.googleapis.com/maps/api/js?key=<?php echo $block->getGoogleApiKey()?>&v=3.exp&libraries=places'
        }
    }
 });
 </script>
<script type="text/x-magento-init">
    {
        "*": {
            "addresspopup": {
                "saveAction": "<?php echo $block->getSaveAction()?>",
                "isAddressSet": "<?php echo $address ? 1:0 ?>",
                "popupHeading": "<?php echo $block->getLocationPopupWindow()?>"
            }
        }
    }
</script>
<script>
require(
    [
    "jquery",
    ],
    function ($) {
        $(document).ready(function() {
            console.log('ddd');
            popupkey: window.popupConfig
            $('.action-close').click();
        });
    });
</script>

We have the js like the following:

It's for all areas. But we need only for Visakhapatnam and Hyderabad locations. Apart from these locations, every location has to show the result as no services are available.

My Addresspopup.js is as follows:

/**

 * Webkul MpHyperLocal address form script

 * @category  Webkul

 * @package   Webkul_MpHyperLocal

 * @author    Webkul

 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)

 * @license   https://store.webkul.com/license.html

 */

define(

    [

    "jquery",

    "mage/translate",

    "Magento_Ui/js/modal/modal",

    "googleMapPlaceLibrary"

    ],

    function ($, $t, modal) {

    "use strict";

    $.widget(

        'affiliate.register',

        {

            _create: function () {

                var optionsData = this.options;

                var autocomplete;

                var address_Type = {

                    locality: 'long_name',

                    administrative_area_level_1: 'long_name',

                    country: 'long_name'

                  };

                var addressMap = {

                    locality: 'city',

                    administrative_area_level_1: 'state',

                    country: "country"

                  };

                var selector = {

                    city: 1,

                    state: 2,

                    country: 3

                  };

                autocomplete = new google.maps.places.Autocomplete(

                    /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),

                    {types: ['geocode']}

                );



                // When the user selects an address from the dropdown, populate the address

                // fields in the form.

                autocomplete.addListener('place_changed', fillInAddress);



                function fillInAddress()

                {

                    var place = autocomplete.getPlace();

                    var data = {};

                    var custAddressType = {

                        'locality' : 'long_name',

                        'administrative_area_level_1' : 'long_name',

                        'country' : 'long_name'

                    };

                    var addressMap = {

                        'locality' : 'city',

                        'administrative_area_level_1' : 'state',

                        'country' : 'country'

                    };

                    $('#autocomplete').attr('data-lat', place.geometry.location.lat());

                    $('#autocomplete').attr('data-lng', place.geometry.location.lng());

                    var address_components = place.address_components;

                    for (var i=0; i<address_components.length; i++) {

                        var addressType = address_components[i]['types'][0];

                        if (typeof custAddressType[addressType] !== 'undefined') {

                            data[addressMap[addressType]] = address_components[i][custAddressType[addressType]];

                        }

                    }

                    if (data.city) {

                        $('#autocomplete').attr('data-city', data.city);

                    } else {

                        $('#autocomplete').attr('data-city', '');

                    }

                    if (data.state) {

                        $('#autocomplete').attr('data-state', data.state);

                    } else {

                        $('#autocomplete').attr('data-state', '');

                    }

                    if (data.country) {

                        $('#autocomplete').attr('data-country', data.country);

                    } else {

                        $('#autocomplete').attr('data-country', '');

                    }



                }





                if ($('#autocompleteform').length > 0) {

                    var autocompleteform;

                    autocompleteform = new google.maps.places.Autocomplete(

                        /** @type {!HTMLInputElement} */(document.getElementById('autocompleteform')),

                        {types: ['geocode']}

                    );



                    // When the user selects an address from the dropdown, populate the address

                    // fields in the form.

                    autocompleteform.addListener('place_changed', fillInPopupAddress);



                    function fillInPopupAddress()

                    {

                    // Get the place details from the autocomplete object.

                        var placepopup = autocompleteform.getPlace();

                        var address = ($('#autocompleteform').val()).split(",");

                        console.log(placepopup.address_components);

                        for (var i = 0; i < placepopup.address_components.length; i++) {

                          var addressType = placepopup.address_components[i].types[0];

                          if (address_Type[addressType]) {

                            var val = placepopup.address_components[i][address_Type[addressType]];

                            if (val == address[0]) {

                                console.log(addressMap[addressType]);

                                $('#address_type>option:eq('+selector[addressMap[addressType]]+')').prop('selected', true);

                            }

                          }

                        }

                        $('#latitude').val(placepopup.geometry.location.lat());

                        $('#longitude').val(placepopup.geometry.location.lng());

                    }

                }



                var options = {

                    type: 'popup',

                    responsive: true,

                    innerScroll: true,

                    width:'200px',

                    title: $t(optionsData.popupHeading),

                    buttons: [{

                        text: $.mage.__('Show'),

                        class: 'go-to-shop',

                        click: function () {

                            var address = $('#autocomplete');

                            if (address.val()) {

                                var conf = confirm($t('If you enter new location, existed cart will empty.'));

                                if (conf) {

                                    $('.go-to-shop').before($('<span />').addClass('loader'));

                                    $.ajax({

                                        url: optionsData.saveAction,

                                        data: {

                                            'address':address.val(),

                                            'lat':address.attr('data-lat'),

                                            'lng':address.attr('data-lng'),

                                            'city':address.attr('data-city'),

                                            'state':address.attr('data-state'),

                                            'country':address.attr('data-country')

                                        },

                                        type: 'POST',

                                        dataType:'html',

                                        success: function (transport) {

                                            var response = $.parseJSON(transport);

                                            if (response.status) {

                                                location.reload();

                                            } else {

                                                $('.go-to-shop').before($('<span/>').text(response.msg));

                                            }

                                        }

                                    });

                                }

                            } else {

                                address.focus();

                                address.css('border', '1px solid red');

                            }

                        }

                    }]

                };

                window.popupConfig = 0;

                if (optionsData.isAddressSet == 0) {

                    var cont = $('<div />').append($('#select-address-popup'));

                    modal(options, cont);

                    if(!window.popupConf['popupconfig']) {

                        cont.modal('openModal');

                        window.popupConf['popupconfig'] = 1;

                    }

                }

                $('#selected-location, .my_location').on('click', function () {

                    var cont = $('<div />').append($('#select-address-popup'));

                    modal(options, cont);

                    if(!window.popupConfig) {

                        cont.modal('openModal');

                        window.popupConfig = 1;

                    } else {

                        window.popupConfig = 0;

                    }

                });

                $('#autocomplete').keypress(function () {

                    $(this).css('border','1px solid #c2c2c2');

                });

            }

        }

    );

    return $.affiliate.register;

    }

);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.