File: /var/www/html/israel-rentals/wp-content/themes/israel-rentals/listing-page.php
<?php
/* Template Name: Listing Page */
get_header();
?>
<section class="banner listing-bnr">
<div class="container">
<div class="bnr-cont">
<div class="breadcrumb-wrp">
<!-- <nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item" aria-current="page"><a href="#">Home</a></li>
<li class="breadcrumb-item" aria-current="page"><a href="#">Search</a></li>
<li class="breadcrumb-item active" aria-current="page">Fulton St, Brooklyn, NY, USA</li>
</ol>
</nav> -->
</div>
<div class="bnr-big-txt">PROPERTY LISTING</div>
</div>
</div>
<div class="bnr-btm"></div>
</section>
<section class="listing-sec">
<div class="container">
<div class="listing-wrp">
<div class="sidebar">
<div class="side-filter-top">
<div class="filter-title">FILTERS</div>
<span class="btn clr-btn">Clear Filter</span>
</div>
<div class="filter-cat-collapse">
<!-- Filter by Property Type -->
<div class="side-blks">
<a class="filter-title" data-bs-toggle="collapse" href="#propertyType" role="button" aria-expanded="false" aria-controls="propertyType">
Type of Residence
</a>
<div class="collapse show" id="propertyType">
<div class="card card-body">
<ul class="fltr-chk">
<?php
// Fetch property types (taxonomy)
$args1 = array(
'post_type' => 'property', // Custom post type 'property'
'posts_per_page' => -1, // Fetch all properties
);
$property_query1 = new WP_Query($args1);
// Initialize array to hold unique property types
$property_types = array();
if ($property_query1->have_posts()) {
while ($property_query1->have_posts()) {
$property_query1->the_post();
$post_id = get_the_ID();
// Fetch property type from post meta
$type = get_post_meta($post_id, '_property_residence_type', true);
if (!empty($type) && !in_array($type, $property_types)) {
$property_types[] = $type;
?>
<li>
<label class="custom-chkbox"><?php echo esc_html($type); ?>
<input type="checkbox" name="property_type[]" value="<?php echo esc_attr($type); ?>">
<span class="checkmark"></span>
</label>
</li>
<?php
}
}
wp_reset_postdata();
} else {
echo '<p>No property types found.</p>';
}
?>
</ul>
</div>
</div>
</div>
<!-- Filter by Rental Period -->
<div class="side-blks">
<a class="filter-title" data-bs-toggle="collapse" href="#rentalPeriod" role="button" aria-expanded="false" aria-controls="rentalPeriod">
Rental Period
</a>
<div class="collapse show" id="rentalPeriod">
<div class="card card-body">
<ul class="fltr-chk">
<li>
<label class="custom-chkbox">Long Term
<input type="checkbox" name="rental_period[]" value="Long Term">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="custom-chkbox">Short Term
<input type="checkbox" name="rental_period[]" value="Short Term">
<span class="checkmark"></span>
</label>
</li>
</ul>
</div>
</div>
</div>
<!-- Filter by Utilities -->
<div class="side-blks">
<a class="filter-title" data-bs-toggle="collapse" href="#utilities" role="button" aria-expanded="false" aria-controls="utilities">
Utilities
</a>
<div class="collapse show" id="utilities">
<div class="card card-body">
<ul class="fltr-chk">
<li>
<label class="custom-chkbox">Included
<input type="checkbox" name="utilities[]" value="Included">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="custom-chkbox">Not Included
<input type="checkbox" name="utilities[]" value="Not Included">
<span class="checkmark"></span>
</label>
</li>
</ul>
</div>
</div>
</div>
<!-- Filter by Property Condition -->
<div class="side-blks">
<a class="filter-title" data-bs-toggle="collapse" href="#propertyCondition" role="button" aria-expanded="false" aria-controls="propertyCondition">
Property Condition
</a>
<div class="collapse show" id="propertyCondition">
<div class="card card-body">
<ul class="fltr-chk">
<li>
<label class="custom-chkbox">Furnished
<input type="checkbox" name="property_condition[]" value="Furnished">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="custom-chkbox">Non-Furnished
<input type="checkbox" name="property_condition[]" value="Non-Furnished">
<span class="checkmark"></span>
</label>
</li>
<li>
<label class="custom-chkbox">Semi-Furnished
<input type="checkbox" name="property_condition[]" value="Semi-Furnished">
<span class="checkmark"></span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Apply Filters Button -->
<button class="btn btn-primary" id="filter">Apply Filters</button>
</div>
<div class="listing">
<!-- <div class="search-box-list">
<input type="text" class="form-control" placeholder="Search" value="Fulton St, Brooklyn, NY, USA"/>
<button class="btn-search">
<img src="<?php echo get_template_directory_uri(); ?>/img/search-icon.svg" alt="" />
</button>
</div> -->
<form class="search-box-list" id="searchForm">
<input type="text" class="form-control" id="searchInput" placeholder="Search" />
<input type="hidden" id="searchListPro" value="1" />
<input type="hidden" name="post_type" value="property" /> <!-- Specify the post type -->
<button type="submit" class="btn-search">
<img src="<?php echo get_template_directory_uri(); ?>/img/search-icon.svg" alt="Search" />
</button>
</form>
<div class="filter-result-wrp">
<div class="result-title">
<?php
$args = array(
'post_type' => 'property', // Custom post type 'property'
'posts_per_page' => -1, // Number of properties to display (-1 for all)
);
$property_query = new WP_Query($args);
// Get the total count of posts
$total_properties = $property_query->found_posts;
?>
<!-- <div class="sec-title-sub">Fulton St, Brooklyn, NY, USA Home</div> -->
<div class="match-result"><?php echo $total_properties; ?> Properties is available</div>
</div>
<div class="filter-select-wrp">
<span class="sort-title">Sort :</span>
<select class="form-select" name="sort_by" id="sort_by">
<option value="date_desc">New Listing</option>
<option value="year_desc">Current Year</option>
</select>
</div>
</div>
<div class="row searchProperty">
<?php
// Custom query to fetch property posts
$args = array(
'post_type' => 'property', // Custom post type 'property'
'posts_per_page' => -1, // Number of properties to display (-1 for all)
);
$property_query = new WP_Query($args);
// Loop through each property post
if ($property_query->have_posts()) :
while ($property_query->have_posts()) : $property_query->the_post();
$post_id = get_the_ID();
// Get post meta (property data)
$location = get_post_meta(get_the_ID(), '_property_location', true);
$type = get_post_meta(get_the_ID(), '_property_residence_type', true);
$bedrooms = get_post_meta(get_the_ID(), '_property_bedrooms', true);
$bathrooms = get_post_meta(get_the_ID(), '_property_bathrooms', true);
$term = get_post_meta(get_the_ID(), '_property_term', true);
$price = get_post_meta(get_the_ID(), '_property_price', true);
$price = is_numeric($price) ? (float)$price : 0;
$utilities = get_post_meta(get_the_ID(), '_property_utilities', true);
$contact_info = get_post_meta(get_the_ID(), '_property_contact_info', true);
$additional_info = get_post_meta(get_the_ID(), '_property_additional_info', true);
$images = get_post_meta(get_the_ID(), '_property_images', true);
?>
<div class="col-md-6 box">
<div class="property-box">
<div class="image-slider slick-slider">
<?php
// Loop through images if they exist (example handling of multiple image uploads)
if (!empty($images)) {
foreach ($images as $image_id) {?>
<div class="images-buttn-text">
<a class="img" href="<?= get_permalink($post_id); ?>">
<img src="<?=esc_url($image_id)?>" alt="House 1" />
</a>
<div class="btn-text">
<span><img src="<?php echo get_template_directory_uri(); ?>/img/loaction.png" /></span>
<span class="loc"><?php echo esc_html($location); ?></span>
</div>
</div>
<?php }
}
?>
</div>
<div class="property-description">
<div class="top-sec">
<div class="lt-sec"><?php echo esc_html($type); ?></div>
<div class="rt-sec"><?php echo esc_html($term); ?></div>
</div>
<div class="subtext"><?php the_title(); // Display property title ?></div>
<div class="texts"><?php echo esc_html($additional_info); ?></div>
<div class="prperty-detils">
<div class="money">
<span><?php echo '$' . number_format(esc_html($price)) . '/mo'; ?></span>
<!-- <span class="squre-ft">- $6.000.00/sq ft</span> -->
</div>
</div>
</div>
<div class="overlay">
<a href="<?= get_permalink($post_id); ?>" class="overlay-link-wrp">
<div class="details">
<div class="property-description1">
<div class="btn-text">
<span><img src="<?php echo get_template_directory_uri(); ?>/img/loaction.png" /></span>
<span class="loc"><?php echo esc_html($location); ?></span>
</div>
<div class="top-sec-btns tags">
<div class="tag1"><?php echo esc_html($type); ?></div>
<div class="tag1"><?php echo esc_html($term); ?></div>
</div>
<div class="subtext"><?php the_title(); // Display property title ?></div>
<div class="texts"><?php echo esc_html($additional_info); ?></div>
<div class="prperty-detils">
<div class="money">
<span><?php echo '$' . number_format(esc_html($price)) . '/mo'; ?></span>
<!-- <span class="squre-ft">- $6.000.00/sq ft</span> -->
</div>
</div>
</div>
<div class="room-details">
<!-- <div class="area">
<div class="head">Area</div>
<div class="sq-fts">2100 m2</div>
</div> -->
<div class="area">
<div class="head">Beds</div>
<div class="sq-fts"><?=esc_html($bedrooms)?></div>
</div>
<div class="area">
<div class="head">Baths</div>
<div class="sq-fts"><?=esc_html($bathrooms)?></div>
</div>
<div class="area">
<div class="head">Garages</div>
<div class="sq-fts">1</div>
</div>
</div>
</div>
<div class="last-sec">
<div class="rtt-secs">
<span class="img-sec"><img src="<?php echo get_template_directory_uri(); ?>/img/calendar.png" /></span>
<?php
// Get the date when the post was published
$post_date = get_the_date('U');
$current_time = current_time('U');
$time_diff = human_time_diff($post_date, $current_time);
?>
<span><?php echo 'Listed ' . $time_diff . ' ago' ?></span>
</div>
<div class="lt-secs">
<span><img src="<?php echo get_template_directory_uri(); ?>/img/swimming-pool.png" /></span>
<span><img src="<?php echo get_template_directory_uri(); ?>/img/restaurant.png" /></span>
<span><img src="<?php echo get_template_directory_uri(); ?>/img/last-ico.png" /></span>
</div>
</div>
</a>
<div class="enquire-btn">
<a href="#" class="btn-enquire"
data-title="<?php echo the_title(); ?>"
data-post-id="<?php echo $post_id; ?>"
data-location="<?php echo esc_attr($location); ?>"
data-type="<?php echo esc_attr($type); ?>"
data-additionalinfo="<?php echo esc_attr($additional_info); ?>">Inquire Now</a>
</div>
</div>
</div>
</div>
<?php
endwhile;
else :
echo '<p class="text-center">No properties found</p>';
endif;
// Reset Post Data
wp_reset_postdata();
?>
</div>
<div class="view-more">
<a href="" class="view"><span>Show more</span></a>
</div>
</div>
</div>
</div>
</section>
<section class="news-sec">
<div class="container">
<div class="newsletter-section">
<h2 class="newsletter-heading">SUBSCRIBE TO OUR NEWSLETTER</h2>
<p class="newsletter-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br />
Lorem Ipsum has been.
</p>
<form class="newsletter-form" id="newsletter-form">
<input type="email" id="newsletter-email" class="newsletter-input" placeholder="Enter Your Email Here" />
<button type="submit" class="newsletter-button">Subscribe</button>
</form>
<div id="newsletter-message" style="display:none;"></div>
</div>
</div>
</section>
<?php get_footer(); ?>
<!-- <script>
jQuery(document).ready(function($) {
$('#searchForm').on('submit', function(e) {
e.preventDefault(); // Prevent the default form submission
var searchQuery = $('#searchInput').val(); // Get the search input value
const showMoreButton = document.querySelector('.view-more');
$.ajax({
url: '<?php echo admin_url("admin-ajax.php"); ?>',
type: 'POST',
data: {
action: 'fetch_properties', // Custom action name
search: searchQuery, // Send the search query
},
success: function(response) {
$('.row').html(response); // Update the properties listing with the new response
showMoreButton.style.display = 'none';
},
error: function() {
alert('An error occurred while searching for properties.');
}
});
});
});
</script> -->
<script>
jQuery(document).ready(function($) {
// Handle Apply Filters button click
$('#filter').on('click', function(e) {
e.preventDefault(); // Prevent default button behavior
// Gather selected filter values
const propertyTypes = $('input[name="property_type[]"]:checked').map(function() {
return $(this).val();
}).get();
const rentalPeriods = $('input[name="rental_period[]"]:checked').map(function() {
return $(this).val();
}).get();
const utilities = $('input[name="utilities[]"]:checked').map(function() {
return $(this).val();
}).get();
const propertyConditions = $('input[name="property_condition[]"]:checked').map(function() {
return $(this).val();
}).get();
const showMoreButton = document.querySelector('.view-more');
// AJAX request to filter properties
$.ajax({
url: ajaxurl, // Use WordPress admin-ajax.php
type: 'POST',
data: {
action: 'filter_properties', // Custom action name in WordPress
property_types: propertyTypes,
rental_periods: rentalPeriods,
utilities: utilities,
property_conditions: propertyConditions
},
success: function(response) {
$('.searchProperty').html(response.data.html);
// Update the total property count
$('.match-result').html(response.data.total_properties + ' Properties is available');
showMoreButton.style.display = 'none';
const propertyDescriptions = document.querySelectorAll('.property-description');
propertyDescriptions.forEach(propertyDescription => {
const overlay = propertyDescription.nextElementSibling;
if (overlay && overlay.classList.contains('overlay')) {
propertyDescription.addEventListener('mouseenter', () => {
overlay.classList.add('overlay-visible');
propertyDescription.classList.add('hide');
});
propertyDescription.addEventListener('mouseleave', () => {
if (!overlay.matches(':hover')) {
overlay.classList.remove('overlay-visible');
propertyDescription.classList.remove('hide');
}
});
overlay.addEventListener('mouseenter', () => {
overlay.classList.add('overlay-visible');
propertyDescription.classList.add('hide');
});
overlay.addEventListener('mouseleave', () => {
overlay.classList.remove('overlay-visible');
propertyDescription.classList.remove('hide');
});
}
});
$('.image-slider').slick({
dots: true,
arrows: true,
fade: true,
prevArrow: '<button type="button" class="slick-prev"><img src="' + slickPrevArrowURL + '"></button>',
nextArrow: '<button type="button" class="slick-next"><img src="' + slickNextArrowURL + '"></button>',
});
},
error: function() {
alert('An error occurred while fetching the properties.');
}
});
});
// Clear filters functionality
$('.btn.clr-btn').on('click', function() {
$('input[type="checkbox"]').prop('checked', false); // Uncheck all checkboxes
const showMoreButton = document.querySelector('.view-more');
$.ajax({
url: ajaxurl, // Use WordPress admin-ajax.php
type: 'POST',
data: {
action: 'filter_properties', // Custom action name in WordPress
property_types: '',
rental_periods: '',
utilities: '',
property_conditions: ''
},
success: function(response) {
$('.searchProperty').html(response.data.html);
// Update the total property count
$('.match-result').html(response.data.total_properties + ' Properties is available');
showMoreButton.style.display = 'none';
const propertyDescriptions = document.querySelectorAll('.property-description');
propertyDescriptions.forEach(propertyDescription => {
const overlay = propertyDescription.nextElementSibling;
if (overlay && overlay.classList.contains('overlay')) {
propertyDescription.addEventListener('mouseenter', () => {
overlay.classList.add('overlay-visible');
propertyDescription.classList.add('hide');
});
propertyDescription.addEventListener('mouseleave', () => {
if (!overlay.matches(':hover')) {
overlay.classList.remove('overlay-visible');
propertyDescription.classList.remove('hide');
}
});
overlay.addEventListener('mouseenter', () => {
overlay.classList.add('overlay-visible');
propertyDescription.classList.add('hide');
});
overlay.addEventListener('mouseleave', () => {
overlay.classList.remove('overlay-visible');
propertyDescription.classList.remove('hide');
});
}
});
$('.image-slider').slick({
dots: true,
arrows: true,
fade: true,
prevArrow: '<button type="button" class="slick-prev"><img src="' + slickPrevArrowURL + '"></button>',
nextArrow: '<button type="button" class="slick-next"><img src="' + slickNextArrowURL + '"></button>',
});
},
error: function() {
alert('An error occurred while fetching the properties.');
}
});
});
});
//----------------------Sort--------------------------------
jQuery(document).ready(function($) {
$('#sort_by').on('change', function() {
var sortBy = $(this).val();
const showMoreButton = document.querySelector('.view-more');
$.ajax({
url: ajaxurl, // WordPress AJAX handler
type: 'POST',
data: {
action: 'filter_properties_by_sort', // Custom action name
sort_by: sortBy
},
success: function(response) {
$('.searchProperty').html(response.data.html);
// Update the total property count
$('.match-result').html(response.data.total_properties + ' Properties is available');
showMoreButton.style.display = 'none';
const propertyDescriptions = document.querySelectorAll('.property-description');
propertyDescriptions.forEach(propertyDescription => {
const overlay = propertyDescription.nextElementSibling;
if (overlay && overlay.classList.contains('overlay')) {
propertyDescription.addEventListener('mouseenter', () => {
overlay.classList.add('overlay-visible');
propertyDescription.classList.add('hide');
});
propertyDescription.addEventListener('mouseleave', () => {
if (!overlay.matches(':hover')) {
overlay.classList.remove('overlay-visible');
propertyDescription.classList.remove('hide');
}
});
overlay.addEventListener('mouseenter', () => {
overlay.classList.add('overlay-visible');
propertyDescription.classList.add('hide');
});
overlay.addEventListener('mouseleave', () => {
overlay.classList.remove('overlay-visible');
propertyDescription.classList.remove('hide');
});
}
});
$('.image-slider').slick({
dots: true,
arrows: true,
fade: true,
prevArrow: '<button type="button" class="slick-prev"><img src="' + slickPrevArrowURL + '"></button>',
nextArrow: '<button type="button" class="slick-next"><img src="' + slickNextArrowURL + '"></button>',
});
}
});
});
});
</script>