FM / checkout

/var/www/vhosts/nabawater/frontend/views/checkout/

/var/www/vhosts/nabawater/frontend/views/checkout

Name	Size	Mode	Actions
checkout.php	49081	0644	edit dl rm
checkout_old.php	50272	0644	edit dl rm
order_confirmation.php	1667	0644	edit dl rm
_checkout_mini_cart.php	1929	0644	edit dl rm
_checkout_without_login.php	11826	0644	edit dl rm
_checkout_with_login.php	6602	0644	edit dl rm
_mini_cart.php	5945	0644	edit dl rm

Edit: /var/www/vhosts/nabawater/frontend/views/checkout/_checkout_without_login.php (11826B)

<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
use common\helpers\Com;
use frontend\models\AddressType;

$addresstype = AddressType::getaddresstype();
?>

<div class="row" data-sticky_parent>
                <div class="col-sm-8 forms-checkout" data-sticky_column>

<div class="bx-borderd">
<i class="material-icons ic">account_circle</i>
<h3>Account</h3>
<p>To place your order now, log in to your existing account or sign up.</p>
<p class="btns mb-0">
<a data-toggle="modal" data-dismiss="modal" data-target="#login" class="btn btn-primary-line">Have an account?<b>Log In</b></a>
<a data-toggle="modal" data-dismiss="modal" data-target="#register" class="btn btn-primary">Don't have an account?<b>Sign Up</b></a>
</p>
</div>
<?php /*
<div class="bx-borderd">
    <i class="material-icons ic">account_circle</i>
    <h3>Guest Login</h3>

<div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>First Name</label>
                                <input type="text" name="first_name" required class="form-control validation">
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Last Name</label>
                                <input type="text" name="last_name"  class="form-control">
                                <span class="help-block"></span>
                            </div>
                        </div>
                    </div>

<div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Mobile Number</label>
                                <input type="tel" name="mobile_number" id="mobile" required  class="form-control validation">
                                <span id="mobile-error" class="help-block"></span>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Email Id</label>
                                <input type="email" name="email" id="email" required class="form-control validation">
                                <span id="email-error" class="help-block"></span>
                            </div>
                        </div>
                    </div>

</div>

<div class="bx-borderd">
    <i class="material-icons ic">place</i>

<h4 class="f18">Your delivery address</h4>
    <p>Drag and click for the exact location</p>

<div id="map" class="map_ifrmae"></div>
    
    <input type="hidden" name="useraddress-latitude" id="address-latitude" value="<?=(com::isSession('customer_latitude')) ? com::session('customer_latitude') : '';?>" class="form-control">
    <input type="hidden" name="useraddress-longitude" id="address-longitude" value="<?=(com::isSession('customer_langtitude')) ? com::session('customer_langtitude') : ''; ?>" class="form-control">
    
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                    <label>Address Type</label>
                    <select name="address_type" id="address_type" class="form-control validation" required>
                        <option value=""><?=yii::t('frontend','Select address type');?></option>
                        <?php foreach ($addresstype as $key => $value) { ?>
                            <option value="<?=$key?>"><?=$value;?></option>
                        <?php } ?>     
                    </select>
                    <span class="errors"></span>
            </div> 
        </div> 
        <div class="col-sm-6">
            <div class="form-group">
                <label><?=yii::t('frontend', 'Flat number');?></label>
                <input type="text" name="flat_no" id="address-flat_no" required class="form-control validation">
                <span class="errors"></span>
            </div>
        </div>
    </div>
    
    <div class="row">
        
        <div class="col-sm-6">
            <div class="form-group">
                <label><?=yii::t('frontend', 'Apartment');?></label>
                <input type="text" name="apartment" id="address-apartment" required class="form-control validation">
                <span class="errors"></span>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label><?=yii::t('frontend', 'Street Name');?></label>
                <input type="text" name="street_name" id="address-street_name" required class="form-control validation">
                <span class="errors"></span>
            </div>
        </div>
    </div>
    
    <div class="row">
        
        <div class="col-sm-6">
            <div class="form-group">
                <label><?=yii::t('frontend', 'Area');?></label>
                <input type="text" name="area" id="address-area" required class="form-control validation">
                <span class="errors"></span>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label><?=yii::t('frontend', 'City');?></label>
                <input type="text" name="city" id="address-city" required class="form-control validation">
                <span class="errors"></span>
            </div>
        </div>
        
    </div>

<div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label><?=yii::t('frontend', 'Landmark')?>(optional)</label>
                <input type="text" name="landmark" id="address-landmark" class="form-control">
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label><?=yii::t('frontend', 'Comapny')?>(optional)</label>
                <input type="text" name="company" id="company" class="form-control">
            </div>
        </div>
    </div>

</div>
          */?>          
            
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfEgFTpKyh7XHdF7pbqxlfStMX8zX_QWc&libraries=places&callback=initMap"></script>
<script type="text/javascript">
    runOnLoad(function() {
        
        initMap();
    
        function initMap() {

var lat=$("#useraddress-latitude").val();
                if(lat.trim()=='') {
                    lat=10.960078;
                }
            var long=$("#useraddress-longitude").val();
                if(long.trim()=='') {
                    long=78.076607;
                }

var mapCanvas = document.getElementById("map");
            var myCenter = new google.maps.LatLng(lat, long);
            var mapOptions = {
                center: myCenter,
                zoom: 5
            };

var map = new google.maps.Map(mapCanvas, mapOptions);
            var img = "<?=Com::res('images/map_pin.png')?>";
            var infowindow = new google.maps.InfoWindow();

var marker = new google.maps.Marker({
                position: myCenter,
                icon: "<?=Com::res('images/map_pin.png')?>",
                animation: google.maps.Animation.BOUNCE,
                draggable: true,
            });

marker.setMap(map);
                google.maps.event.addListener(map, 'click', function (event) {
                    moveMarker(event.latLng);

});

google.maps.event.addListener(marker, 'dragend', function(event) {
                    moveMarker(event.latLng);           
                });

var input = document.getElementById('searchTextField');
                var autocomplete = new google.maps.places.Autocomplete(input, {
                    types: ["geocode"]
                });

function moveMarker(latlng) {
                    marker.setPosition(latlng);
                    $('#address-latitude').val(latlng.lat());
                    $('#address-longitude').val(latlng.lng());

var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({
                        "latLng": latlng,
                    }, function(results, status) {
                    place(results,status);
                    console.log(results[0].address_components);
                    if (status == google.maps.GeocoderStatus.OK) {
                        var lat = results[0].geometry.location.lat(),
                            lng = results[0].geometry.location.lng(),

placeName = results[0].address_components[0].long_name,
                            latlng = new google.maps.LatLng(lat, lng);
                        moveMarker(placeName, latlng);
                        $("#searchTextField").val(results[0].formatted_address);
                    }
                });

}

autocomplete.bindTo('bounds', map);

google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
                infowindow.close();
                var place = autocomplete.getPlace();
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }
                moveMarker(place.geometry.location);
            });
        }
        
        
         function place(results, status){

for (var i = results[0].address_components.length - 1; i >= 0; i--) {
                    if ($.inArray('premise', results[0].address_components[i].types) != '-1') {
                        $('#address-apartment').val(results[0].address_components[i].long_name);
                    }
                    if($.inArray('political',results[0].address_components[i].types)!='-1') {
                        $('#address-area').val(results[0].address_components[i].long_name);
                    }
                    if ($.inArray('locality', results[0].address_components[i].types) != '-1') {
                        $('#address-landmark').val(results[0].address_components[i].long_name);
                    }
                    if ($.inArray('route', results[0].address_components[i].types) != '-1') {
                        $('#address-street_name').val(results[0].address_components[i].long_name);
                    }
                    if ($.inArray('administrative_area_level_2', results[0].address_components[i].types) != '-1') {
                        $('#address-city').val(results[0].address_components[i].long_name); 
                    }
                    /*if($.inArray('postal_code',results[0].address_components[i].types)!='-1') {
                        $('#Street_Name').val(results[0].address_components[i].long_name);
                    }*/
                    /*if($.inArray('street_number',results[0].address_components[i].types)!='-1') {
                        $('[name="floor"]').val(results[0].address_components[i].long_name);
                    }
                    if($.inArray('neighborhood',results[0].address_components[i].types)!='-1') {
                        $('[name="lane"]').val(results[0].address_components[i].long_name);
                    }*/
                }
            }
        
        
    });

</script>

Account

To place your order now, log in to your existing account or sign up.

Have an account?Log In Don't have an account?Sign Up

Guest Login

First Name

Last Name

Mobile Number

Email Id

Your delivery address

Drag and click for the exact location

Address Type

(optional)

*/?>