Skip to content

Instantly share code, notes, and snippets.

@janisdonis

janisdonis/php to js

Created May 20, 2018 14:52
Show Gist options
  • Save janisdonis/ed276bfa13bcd9f1d49a57c3d87e839f to your computer and use it in GitHub Desktop.
Save janisdonis/ed276bfa13bcd9f1d49a57c3d87e839f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
php to js
<?php get_header(); ?>
<main id="main-content">
<div class="search-object">
<div class="container d-flex">
<div class="form d-flex justify-content-end">
<div class="wrapper">
<?php echo do_shortcode('[searchandfilter id="42"]'); ?>
<form>
<div class="selects row">
<div class="col-xl-2 col-lg-6 col-md-6 col-sm-12">
<div class="form-group">
<label>Mājoklis</label>
<select class="selectpicker">
<option>Dzīvokļi</option>
<option>Dzīvokļi 2</option>
<option>Dzīvokļi 3</option>
<option>Dzīvokļi 4</option>
</select>
</div>
</div>
<div class="col-xl-2 col-lg-6 col-md-6 col-sm-12">
<div class="form-group">
<label>Darījuma veids</label>
<select class="selectpicker" title="">
<option>Pārdod</option>
</select>
</div>
</div>
<div class="col-xl-2 col-lg-6 col-md-6 col-sm-12">
<div class="form-group">
<label>Pilsēta</label>
<select class="selectpicker">
<option>Rīga</option>
<option>Rīga</option>
<option>Rīga</option>
</select>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<div class="form-group">
<label>Rajons</label>
<select class="selectpicker">
<option>Klusais centrs</option>
<option>Klusais centrs</option>
</select>
</div>
</div>
</div>
<div class="sliders row">
<div class="slider col-sm-12">
<div class="form-group">
<label>Cena</label>
<input type="text" id="price-slider" readonly>
<div id="slider-price-range"></div>
</div>
</div>
<div class="slider col-md-6">
<div class="form-group">
<label>Īpašuma platība</label>
<input type="text" id="area-slider-1" readonly>
<div id="slider-area-range-1"></div>
</div>
</div>
<div class="slider col-md-6">
<div class="form-group">
<label>Īpašuma platība</label>
<input type="text" id="area-slider-2" readonly>
<div id="slider-area-range-2"></div>
</div>
</div>
</div>
</form>
<div class="found-objects">
<div class="sort-by d-flex justify-content-between">
<span>Kārtot pēc:</span>
<ul class="actions d-flex">
<li class="active"><a href="#">Platības</a></li>
<li><a href="#">Cenas</a></li>
</ul>
</div>
<div><div class="objects-list"><div class="container"><div class="row">
<?php
$storeData = [];
while (have_posts()) : the_post();
?>
<?php
$location = get_field('location');
$price = get_field('price');
$rentprice = get_field('rent_price');
$area_count = get_field('area');
$floors_count = get_field('floors');
$rooms_count = get_field('rooms');
$thumb = get_the_post_thumbnail_url(get_the_ID(),'map_thumb');
$marker_icon = "".get_bloginfo( 'stylesheet_directory' )."/app/assets/img/map-marker.png";
if( has_term( array('2'), 'property' ) ):
$floors = "<li>". __('Stāvi','easyhome') .": <strong>".$floors_count."</strong></li>";
else:
$floors = "<li>". __('Stāvs','easyhome') .": <strong>".$floors_count."</strong></li>";
endif;
$area = "<li>". __('Platība','easyhome') .": <strong>".$area_count."</strong></li>";
$rooms = "<li>". __('Istabu skaits','easyhome') .": <strong>".$rooms_count."</strong></li>";
$storeData[] = [
'title' => apply_filters('the_title', $post->post_title),
'iconImage' => $marker_icon,
'coords' => array('lat' => floatval($location['lat']), 'lng' => floatval($location['lng'])),
'content' => "<div class='marker-pop-object'><div class='thumb'><img src='".$thumb."'>
<div class='bottom-info'>
<div class='price d-flex align-items-center justify-content-between'>
<ul>
<li class='total'>".$price." EUR</li>
<li class='meter'>".$area_count." m²</li>
</ul>
</div>
</div>
</div>
<h4 class='object-location'>".apply_filters('the_title', $post->post_title)."</span></h4>
<ul class='details d-flex justify-content-center flex-wrap'>
".$rooms."
".$floors."
".$area."
</ul>
</div>"
];
?>
<div class="col-lg-6 search_item">
<div class="object">
<div class="thumb">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('project_thumb', ['class' => 'project_thumb', 'title' => get_the_title()]);?>
</a>
</div>
<h3 class="object-location">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<ul class="details d-flex justify-content-center">
<li><?php _e('Istabu skaits','easyhome');?>: <strong><?php the_field( 'rooms' ); ?></strong></li>
<?php
if( has_term( array('2'), 'property' ) ): ?>
<li><?php _e('Stāvi','easyhome');?>: <strong><?php the_field( 'floors' ); ?></strong></li>
<?php else: ?>
<li><?php _e('Stāvs','easyhome');?>: <strong><?php the_field( 'floors' ); ?></strong></li>
<?php endif; ?>
<li><?php _e('Platība','easyhome');?>: <strong><?php the_field( 'area' ); ?> m<sup>2</sup></strong></li>
</ul>
<div class="bottom d-flex justify-content-between align-items-center">
<?php
$price = get_field('price');
$rentprice = get_field('rent_price');
$area = get_field('area');
$total = $price / $area;
$totalrent = $rentprice / $area;
?>
<?php
if( has_term( array('7', '6'), 'tips' ) ): ?>
<div class="price">
<ul>
<li class="total"><?php echo number_format($price, 2); ?> EUR</li>
<li class="meter"><?php echo number_format($total, 2); ?> EUR / m²</li>
</ul>
</div>
<?php else: ?>
<div class="price">
<ul>
<li class="total"><?php echo number_format($rentprice, 2); ?> EUR <?php _e('mēnesī','easyhome');?></li>
<li class="meter"><?php echo number_format($totalrent, 2); ?> EUR / m²</li>
</ul>
</div>
<?php endif; ?>
<a href="<?php the_permalink(); ?>" class="open-object"><?php _e('Atvērt','easyhome');?></a>
</div>
</div>
</div>
<?php
endwhile;
?>
</div></div></div></div>
</div>
</div>
</div>
<div class="map">
<div id="google-map"></div>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('google-map'), {
zoom: 11,
center: {lat: 56.9715833, lng: 23.9890814},
styles:[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
]
});
// Loop through markers
for(var i = 0;i < storeData.length;i++){
// Add marker
addMarker(storeData[i]);
console.log(storeData[i]);
}
// Add Marker Function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
});
// Check for customicon
if(props.iconImage){
// Set icon image
marker.setIcon(props.iconImage);
}
// Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content,
maxWidth: 215
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
$(this).closest('div').addClass('test');
});
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1Jr1HTNuJabgm7KSBykcHUdQYj5ZdOJk&callback=initMap">
</script>
</div>
</div>
</div>
</main>
<?php get_footer(); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment