Skip to content

Instantly share code, notes, and snippets.

@janisdonis

janisdonis/Page catalog

Created May 20, 2018 08:08
Show Gist options
  • Save janisdonis/95b843dd8ab392fe63776ed6c386e579 to your computer and use it in GitHub Desktop.
Save janisdonis/95b843dd8ab392fe63776ed6c386e579 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Page catalog
<?php
$storeData = [];
$args = array('post_type' => 'property');
$loop = new WP_Query($args);
foreach ( $loop->posts as $post ) {
$location = get_field('location');
$storeData[] = [
'title' => apply_filters('the_title', $post->post_title),
'lat' => $location['lat'],
'long' => $location['lng']
];
}
wp_localize_script('jquery-core', 'storeData', $storeData);
wp_enqueue_script( 'jquery-core' );
?>
<?php
/*
Template Name: Catalog
*/
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">
<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 class="owl-carousel">
<?php
$args = array(
'post_type' => 'property',
'posts_per_page' => -1
);
query_posts($args);
while (have_posts()) : the_post();
$i = $wp_query->current_post;
echo ( 0 == $i % 6 ) ? '<div><div class="objects-list"><div class="container"><div class="row">' : '';
?>
<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
echo ( $wp_query->post_count == $i || 5 == $i % 6 ) ? '</div></div></div></div>' : '';
endwhile;
?>
</div></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"
}
]
}
]
});
// Array of markers
// Array of markers
var markers = [
{
coords:{lat: 56.9715833, lng: 23.9890814},
iconImage:'assets/img/map-marker.png',
content:'<div class="marker-pop-object">'+
'<div class="thumb">'+
'<img src="assets/img/marker-pop-thumb.png">'+
'<div class="bottom-info">'+
'<div class="price d-flex align-items-center justify-content-between">'+
'<ul>'+
'<li class="total">256 381 EUR'+
'</li>'+
'<li class="meter">5 207 EUR / m²'+
'</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
'<ul class="details d-flex justify-content-center flex-wrap">'+
'<li>Istabu skaits: <strong>3</strong></li>'+
'<li>Stāvs: <strong>7 / 8</strong></li>'+
'<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
'</ul>'+
'</div>'
},
{
coords:{lat:56.9600128, lng:24.0403903},
iconImage:'assets/img/map-marker.png',
content:'<div class="marker-pop-object">'+
'<div class="thumb">'+
'<img src="assets/img/marker-pop-thumb.png">'+
'<div class="bottom-info">'+
'<div class="price d-flex align-items-center justify-content-between">'+
'<ul>'+
'<li class="total">256 381 EUR'+
'</li>'+
'<li class="meter">5 207 EUR / m²'+
'</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
'<ul class="details d-flex justify-content-center flex-wrap">'+
'<li>Istabu skaits: <strong>3</strong></li>'+
'<li>Stāvs: <strong>7 / 8</strong></li>'+
'<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
'</ul>'+
'</div>'
},
{
coords:{lat:56.9572007, lng:24.1064851},
iconImage:'assets/img/map-marker.png',
content:'<div class="marker-pop-object">'+
'<div class="thumb">'+
'<img src="assets/img/marker-pop-thumb.png">'+
'<div class="bottom-info">'+
'<div class="price d-flex align-items-center justify-content-between">'+
'<ul>'+
'<li class="total">256 381 EUR'+
'</li>'+
'<li class="meter">5 207 EUR / m²'+
'</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
'<ul class="details d-flex justify-content-center flex-wrap">'+
'<li>Istabu skaits: <strong>3</strong></li>'+
'<li>Stāvs: <strong>7 / 8</strong></li>'+
'<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
'</ul>'+
'</div>'
},
{
coords:{lat:56.8934427, lng:24.1238537},
iconImage:'assets/img/map-marker.png',
content:'<div class="marker-pop-object">'+
'<div class="thumb">'+
'<img src="assets/img/marker-pop-thumb.png">'+
'<div class="bottom-info">'+
'<div class="price d-flex align-items-center justify-content-between">'+
'<ul>'+
'<li class="total">256 381 EUR'+
'</li>'+
'<li class="meter">5 207 EUR / m²'+
'</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
'<ul class="details d-flex justify-content-center flex-wrap">'+
'<li>Istabu skaits: <strong>3</strong></li>'+
'<li>Stāvs: <strong>7 / 8</strong></li>'+
'<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
'</ul>'+
'</div>'
},
{
coords:{lat:56.9313837, lng:24.1232994},
iconImage:'assets/img/map-marker.png',
content:'<div class="marker-pop-object">'+
'<div class="thumb">'+
'<img src="assets/img/marker-pop-thumb.png">'+
'<div class="bottom-info">'+
'<div class="price d-flex align-items-center justify-content-between">'+
'<ul>'+
'<li class="total">256 381 EUR'+
'</li>'+
'<li class="meter">5 207 EUR / m²'+
'</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
'<ul class="details d-flex justify-content-center flex-wrap">'+
'<li>Istabu skaits: <strong>3</strong></li>'+
'<li>Stāvs: <strong>7 / 8</strong></li>'+
'<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
'</ul>'+
'</div>'
}
];
// Loop through markers
for(var i = 0;i < markers.length;i++){
// Add marker
addMarker(markers[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