PMI Property Widget Templates
Long Term Rentals (last updated 11/8/2023)
Update the template code in Modules > Listing >
View ExampleList
<header class="nhw-header">
<h1 class="display-1">{% snippet name='areas' market='1' %} Homes For Rent</h1>
<div class="btn-list">
<a href="{% snippet name='portal' type='app' %}" target="_blank" title='opens in new tab' class="btn btn--accent">Apply Online</a>
<!-- <a href="/tenants" class="btn btn--primary">Rental Qualifications</a> -->
</div>
</header>
<p class="mw-950 text-center">
Whether you're relocating,
planning a long-term stay, or simply prefer the flexibility of renting, our extensive listings offer a diverse range of quality homes available
for extended periods. We understand that finding the right long-term rental is a significant decision, and that's why our search page provides
a user-friendly interface, advanced filtering options, and comprehensive property details to streamline your search process. Take your time,
explore our listings, and discover a place where comfort, convenience, and long-lasting memories await you. Start your journey towards finding
the ideal {% snippet name='areas' market='1' %} rental property today!
</p>
<div id="nesthub-property-list-view" class="nesthub-widget property-list" data-ion="listing-list">
{% listing_page %}
<form id="nesthub-search-form" class="prop-search-form" _lpchecked="1">
<div class="prop-search-form__container">
<div class="prop-search-form__item prop-search-form__item--search">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-location"></i></div>
</div>
<div class="prop-search-form__field">
{% capture searchInput %}{% listingSearchKeyword %}{% endcapture %}
{{ searchInput | replace: 'Search', 'Search by Location' | replace: 'name="search"', 'name="search" placeholder="Address, city, state, or zip"' }}
</div>
</div>
<div class="prop-search-form__item">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhw-property"></i></div>
</div>
<div class="prop-search-form__field">
{% capture propTypeInput %}{% listingSearchPropertyTypes %}{% endcapture %}
{{ propTypeInput | replace: 'Property Type', 'Type of Place' }}
</div>
</div>
<div class="prop-search-form__item prop-search-form__item--beds">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-king-bed"></i></div>
</div>
<div class="prop-search-form__field" data-target="dropdown">
<div class="prop-search-form__label">Beds & Baths</div>
<div class="prop-search-form__value">Choose amounts</div>
</div>
<div class="prop-search__dropdown">
{% listingSearchBeds %}
{% listingSearchBaths %}
</div>
</div>
<div class="prop-search-form__item prop-search-form__item--price">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhw-price"></i></div>
</div>
<div class="prop-search-form__field" data-target="dropdown">
<div class="prop-search-form__label">Price Range</div>
<div class="prop-search-form__value">Choose amounts</div>
</div>
<div class="prop-search__dropdown">
{% capture searchMinRent %}{% listingSearchMinRent %}{% endcapture %}
{{ searchMinRent | replace: 'Minimum Rent', 'Min Rent' }}
{% capture searchMaxRent %}{% listingSearchMaxRent %}{% endcapture %}
{{ searchMaxRent | replace: 'Maximum Rent', 'Max Rent' }}
</div>
</div>
<div class="prop-search-form__btn">
<label for="nesthub-search-btn"><span class="sr-only">Submit</span></label>
<button id="nesthub-search-btn">
<div class="icon"><span class="sr-only">Submit</span><i aria-hidden="true" class="fa-kit fa-nhvl-search"></i></div>
</button>
</div>
</div>
<div class="prop-search-options">
<div class="prop-search-options__item">
<div class="prop-search-options__icon">
<div class="icon"><i class="fa-light fa-sliders"></i></div>
</div>
<div class="prop-search-options__label" data-target="dropdown">
Optional Filters
</div>
<div class="prop-search__dropdown">
{% capture pet_dropdown %}{% listingSearchPets %}{% endcapture %}
{{ pet_dropdown | replace: 'DogsAllowed', 'Dogs Allowed' | replace: 'CatsAllowed', 'Cats Allowed' | replace: 'DogsAndCats', 'Dogs and Cats' | replace: 'NoPetsAllowed', 'No Pets Allowed' }}
</div>
</div>
<div class="prop-search-options__item">
<div class="prop-search-options__icon">
<div class="icon"><i class="fa-regular fa-arrow-up-arrow-down"></i></div>
</div>
<div class="prop-search-options__label" data-target="dropdown">
Sort
</div>
<div class="prop-search__dropdown">
{% listingSearchSort %}
</div>
</div>
</div>
</form>
{% assign listing_count = listings | size %}
{% if listing_count <= 0 %}
<div class="nhw__no-listings">
<h4>No Listings Found!</h4>
</div>
{% else %}
<ul class="nhw-nav nhw-nav-pills nhw-mb-3" id="nesthub-property-list-tab-list" role="tablist">
<li class="nhw-nav-item">
<a class="nhw-nav-link nhw-show nhw-active" id="nesthub-property-list-tab" href="#nesthub-property-list" role="tab" aria-controls="nesthub-property-list" aria-selected="true">List</a>
</li>
<li class="nhw-nav-item">
<a class="nhw-nav-link" id="nesthub-property-map-tab" href="#nesthub-property-map" role="tab" aria-controls="nesthub-property-map" aria-selected="false">Map</a>
</li>
</ul>
<div class="nhw-tab-content" id="nesthub-property-list-tab-content">
<div class="nhw-tab-pane nhw-fade nhw-active" id="nesthub-property-list" role="tabpanel" aria-labelledby="nesthub-property-list-tab">
<div class="nhw-list">
{% for listing in listings %}
{% assign imageCount = listing.images %}
<div class="nhw-list__item">
<a href="{{listing.systemUrl}}" data-id="{{ listing.listingID }}">
{% assign imageCount = listing.images | size %}
{% assign images = listing.images %}
<div class="nhw-list__image">
{% if imageCount > 0 %}
<div class="f-carousel" id="carousel{{ forloop.index }}">
{% for image in images %}
<div class="f-carousel__slide">
<img data-src="{{ image.url }}?size=small" alt="{{ listing.headline }} property image" class="lazyload" />
</div>
{% endfor %}
</div>
{% else %}
<img data-src="https://pmi-resources.nesthub.com/images/photo-gallery-placeholder.jpg" alt="{{ listing.headline }}" class="lazyload" />
{% endif %}
</div>
<div class="nhw-list__price">
{{ listing.rent | money | replace: '.00', '' }}/mo.
</div>
<div class="nhw-list__details">
<ul>
<li>
{% if listing.beds == 0 %}
Studio
{% else %}
{% if listing.beds == 1 %}Bed{%else%}Beds{%endif%}: {{ listing.beds }}
{% endif %}
</li>
<li class="nhw-icon-list-item">
{% if listing.baths == 1 %}Bath{%else%}Baths{%endif%}: {{ listing.baths | replace: '.00', '' }}
</li>
{% if listing.listing.size %}
<li class="nhw-icon-list-item">
sqft: {{ listing.size }}
</li>
{% endif %}
</ul>
</div>
<div class="nhw-list__location">
{{ listing.address }}{% if listing.address2 %}, {{ listing.address2 }}{% endif %}, {{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}
</div>
<div class="nhw-list__prop-type">
{{ listing.propertyTypeName }}
</div>
<div class="nhw-list__availability">
Available: {{ listing.dateAvailable | listing_availabilityDate }}
</div>
</a>
</div>
{% endfor %}
</div>
<div class="nhw-pagination">
{% listing_pagination %}
</div>
</div>
<div class="nhw-tab-pane nhw-fade" id="nesthub-property-map" role="tabpanel" aria-labelledby="nesthub-property-map-tab">
<div id="nesthub-property-map-panel" style="height:700px;" data-lat="{{map.latitude}}" data-lng="{{map.longitude}}"></div>
</div>
</div>
{% endif %}
</div>
<script type="text/javascript">
function closeDropdown(item) {
item.slideUp().removeClass('open');
}
function openDropdown(item) {
item.slideDown().addClass('open');
}
$('[data-target="dropdown"]').click(function(e) {
e.preventDefault();
var dropdown = $(this).siblings('.prop-search__dropdown');
if (dropdown.hasClass('open') == true) {
closeDropdown(dropdown)
} else {
$('.prop-search__dropdown.open').slideUp().removeClass('open');
openDropdown(dropdown)
}
});
$('.prop-search-form__item, .prop-search-option__item').mouseleave(function() {
setTimeout(() => {
closeDropdown($('.prop-search__dropdown.open'));
}, 300);
});
function updateFields() {
var bedValue = beds > 0 ? beds + ' bed, ' : '';
var bathValue = baths > 0 ? baths + ' bath' : '';
$('.prop-search-form__item--beds .prop-search-form__value').text(bedValue + bathValue)
$('.prop-search-form__item--price .prop-search-form__value').text(rentMin + ' - ' + rentMax)
}
// Update Search Placeholders on Page Load
if ( location.search.length > 0 ) {
var beds = location.search.split('&bedsMin=')[1].split('&')[0];
var baths = location.search.split('&bathsMin=')[1].split('&')[0];
var rentMin = '$' + location.search.split('&rentMin=')[1].split('&')[0];
var rentMax = '$' + location.search.split('&rentMax=')[1].split('&')[0];
updateFields();
}
// Update Search Placeholer Text on Input Change
$('.prop-search-form__item input, .prop-search-form__item select').on('change keydown paste input', function(){
beds = $('#nesthub-listing-prop-search-beds').val();
baths = $('#nesthub-listing-prop-search-baths').val();
rentMin = '$' + $('#nesthub-listing-prop-search-min-rent').val();
rentMax = '$' + $('#nesthub-listing-prop-search-max-rent').val();
updateFields(beds, baths, rentMin, rentMax);
if ($(this).parent('.prop-search-form__item').children('.prop-search-form__value').text().length == 0) {
$(this).parent('.prop-search-form__item').children('.prop-search-form__value').text('Choose amounts')
}
});
// Init Filters on Input Change
$('#nesthub-listing-prop-search-pets, #nesthub-listing-prop-search-sort').on('change keydown paste input', function(){
$('#nesthub-search-form').submit();
});
$( document ).ready(function() {
// Init Image Carousel
$('.f-carousel').each(function(){
const container = document.getElementById($(this).attr('id'));
const options = {
Navigation: {
nextTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"/></svg>',
prevTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"/></svg>',
},
Dots: false,
};
new Carousel(container, options);
})
});
</script>
View
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "RealEstateListing",
"name": "{{ listing.headline }}",
"image": {
"@type": "ImageObject",
"url": "{{ listing.url }}"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "{{ listing.city }}",
"addressRegion": "{{ listing.stateID }}",
"postalCode": "{{ listing.postalCode }}",
"streetAddress": "{{ listing.address }} {{ listing.address2 }}"
},
"petsAllowed": "{{ listing.petDescription }}",
"tourapplicationPage": "",
"smokingAllowed": "{{ listing.acceptSmoking | boolean }}",
"description": "{{ listing.description | strip_html }}",
"url": "{{ listing.url }}"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Accommodation",
"numberOfBedrooms": "{{ listing.beds }}",
"numberOfBathroomsTotal": "{{ listing.baths }}",
"leaseLength": "{{ listing.leaseDescription }}",
"accommodationCategory": "{{ listing.propertyTypeName }}"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "RentAction",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "{{ listing.rent | money }}",
"priceCurrency": "USD",
"name": "Monthly Rent",
"referenceQuantity": {
"@type": "QuantitativeValue",
"value": "1",
"unitCode": "MON"
}
}
}
</script>
<div class="nesthub-widget">
<div id="nesthub-property-detail-view" class="nhw-details">
{% listing_plugin %}
{% listing_page %}
{% if leadSent %}
<div class="nhw-alert nhw-alert-success" role="alert">
Message has been sent!
</div>
{% endif %}
<section class="nhw-details__header">
<header class="text-center">
<h1 data-fancybox-trigger="map">{{ listing.address }}</h1>
<h2>{{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}</h2>
</header>
<div class="nhw-back-btn">
<a href="/{% snippet name='areas' market='1' toUrl='true' %}-homes-for-rent"><i class="fa-regular fa-circle-chevron-left"></i> Back to search</a>
</div>
</section>
{% assign imageCount = images | size %}
{% if imageCount > 0 %}
<section class="nhw-details__gallery">
<div class="image-container image-container--primary">
{% for image in images limit: 1 %}
<div class="image-preview">
<a id="nhw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ images[0].imageUrl }}?size=large" data-caption="{{ image.caption }}">
<img class="lazyload" data-src="{{ images[0].imageUrl }}?size=large" alt="property image" />
</a>
</div>
{% endfor %}
</div>
{% if images.size > 1 %}
<div class="image-container image-container--secondary">
{% for image in images offset: 1 limit: 4 %}
<div class="image-preview">
<a id="nhw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ image.imageUrl }}?size=large" data-caption="{{ image.caption }}">
<img class="lazyload" data-src="{{ image.imageUrl }}?size=small" alt="property image" />
</a>
</div>
{% endfor %}
</div>
{% endif %}
{% if images.size > 5 %}
<div class="nhw-listing-detail-view-gallery">
<i class="fa-regular fa-square-plus"></i> Full Gallery
</div>
{% endif %}
{% if images.size > 5 %}
<div class="additional-images">
{% assign imageCount = images.size | minus: 1 %}
{% for i in (5..imageCount) %}
<a data-fancybox="gallery" href="{{ images[i].imageUrl }}?size=large" data-caption="{{ images[i].caption }}">
<img data-src="{{ images[i].imageUrl }}?size=large" alt="property image" class="lazyload" />
</a>
{% endfor %}
</div>
{% endif %}
{% if listing.virtualTour %}
<a class="nhw-listing-detail-view-video" data-fancybox="gallery" data-type="iframe" href="{% if listing.virtualTourType == 'youtube' %}https://www.youtube.com/embed/{{ listing.virtualTourVideoID }}{% elsif listing.virtualTourType == 'vimeo' %}https://vimeo.com/{{ listing.virtualTourVideoID }}?title=0&byline=0&portrait=0'{% else %}{{ listing.virtualTour }}{% endif %}">
<i class="fa-sharp fa-regular fa-video-plus"></i> Video Tour
</a>
{% endif %}
</section>
{% endif %}
<section class="nhw-details__share">
<div class="social-icons">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a title="opens in new window" class="a2a_dd" href="https://www.addtoany.com/share"><i class="fa-regular fa-arrow-up-from-bracket"></i> Share</a>
</div>
</div>
</section>
<section class="nhw-details__content">
<div class="nhw-details__property-info">
<h3 class="nhw-details__heading mt-0">Property Details</h3>
<div class="key-details">
<div class="key-detail price">
<span class="value">{{ listing.rent | money | replace: '.00', '' }}</span>
<span class="label">Per Month</span>
</div>
<div class="key-detail bedrooms">
<span class="value">
{% if listing.beds == 0 %}
Studio
{% else %}
{{ listing.beds }}
{% endif %}
</span>
<span class="label">{% if listing.beds == 1 %}Bed{%else%}Beds{%endif%}</span>
</div>
<div class="key-detail bathrooms">
<span class="value">{{ listing.baths | replace: '.00', '' }}</span>
<span class="label">{% if listing.baths == 1 %}Bath{%else%}Baths{%endif%}</span>
</div>
{% if listing.size %}
<div class="key-detail sqft">
<span class="value">
{{ listing.size }}
</span>
<span class="label">sqft</span>
</div>
{% endif %}
<div class="key-detail rent">
<span class="value">•</span>
<span class="label">For Rent</span>
</div>
</div>
<hr>
<div class="sub-details">
<div class="sub-detail">
<span class="sub-detail__label">Building Type:</span>
<span class="sub-detail__value">{{ listing.propertyTypeName | replace: ' Home', '' }}</span>
</div>
{% if listing.deposit != blank %}
<div class="sub-detail">
<span class="sub-detail__label">Deposit:</span>
<span class="sub-detail__value">{{ listing.deposit | money | replace: '.00', '' }}</span>
</div>
{% endif %}
{% if listing.petDescription != blank or listing.acceptDogs != blank or listing.acceptCats != blank %}
<div class="sub-detail">
<span class="sub-detail__label">Pets:</span>
<span class="sub-detail__value">
{% if listing.acceptDogs == 1 or listing.acceptCats == 1 %}
Yes
{% elsif listing.acceptDogs == 0 and listing.acceptCats == 0 %}
No
{% endif %}
</span>
</div>
{% endif %}
<div class="sub-detail">
<span class="sub-detail__label">Date Available:</span>
<span class="sub-detail__value">
{{ listing.dateAvailable | listing_availabilityDate }}
</span>
</div>
{% if listing.applicationFee != blank %}
<div class="sub-detail">
<span class="sub-detail__label">App Fee:</span>
<span class="sub-detail__value">{{ listing.applicationFee | money | replace: '.00', '' }}</span>
</div>
{% endif %}
{% if listing.acceptDogs == blank and listing.acceptCats == blank %}{% elsif listing.acceptDogs == 0 and listing.acceptCats == 0 %}
{% else %}
<div class="sub-detail">
<span class="sub-detail__label">Pet Type:</span>
<span class="sub-detail__value">
{% capture petsAllowed %}
{% if listing.acceptDogs == 1 %}
Dogs
{% endif %}
{% if listing.acceptDogs == 1 and listing.acceptCats == 1 %},{% endif %}
{% if listing.acceptCats == 1 %}
Cats
{% endif %}
{% endcapture %}
{{ petsAllowed | strip_newlines | replace: ' ', '' | replace: ',', ', ' }}
</span>
</div>
{% endif %}
</div>
<div class="headline">
{{ listing.headline }}
</div>
<div class="description">
{{ listing.description | newline_to_br }}
</div>
<div class="nhw-details__property-details mt-4">
<dl>
{% if listing.lotSize %}
<dt>Lot Size</dt>
<dd>{{ listing.lotSize }}</dd>
{% endif %}
{% if listing.includedUtilityDescription %}
<dt>Included Utilities</dt>
<dd>{{ listing.includedUtilityDescription.slice(0, -2) }}</dd>
{% endif %}
{% if listing.isGasIncluded == '1' or listing.isElectricIncluded == '1' or listing.isWaterIncluded == '1' or listing.isSewageIncluded == '1' or listing.isGarbageIncluded == '1' or listing.isLandscapingIncluded == '1' or listing.isCableIncluded == '1' or listing.isInternetIncluded == '1' or listing.isSnowRemovalIncluded == '1' or listing.isPoolServiceIncluded == '1' %}
<dt>Included Utilities</dt>
<ul class="commas">
{% if listing.isGasIncluded == '1' %}
<li>Gas</li>
{% endif %}
{% if listing.isElectricIncluded == '1' %}
<li>Electric</li>
{% endif %}
{% if listing.isWaterIncluded == '1' %}
<li>Water</li>
{% endif %}
{% if listing.isSewageIncluded == '1' %}
<li>Sewage</li>
{% endif %}
{% if listing.isGarbageIncluded == '1' %}
<li>Garbage</li>
{% endif %}
{% if listing.isLandscapingIncluded == '1' %}
<li>Landscaping</li>
{% endif %}
{% if listing.isCableIncluded == '1' %}
<li>Cable</li>
{% endif %}
{% if listing.isInternetIncluded == '1' %}
<li>Internet</li>
{% endif %}
{% if listing.isSnowRemovalIncluded == '1' %}
<li>Snow Removal</li>
{% endif %}
{% if listing.isPoolServiceIncluded == '1' %}
<li>Pool Service</li>
{% endif %}
</ul>
{% endif %}
{% if listing.heatType %}
<dt>Heat Type</dt>
<dd>{{ listing.heatType }}</dd>
{% endif %}
{% if listing.yearBuilt %}
<dt>Year Built</dt>
<dd>{{ listing.yearBuilt }}</dd>
{% endif %}
</dl>
{% if listing.petDescription or listing.acceptSmoking == 0 %}
<h3 class="nhw-details__sub-heading">Restrictions</h3>
<dl>
{% if listing.acceptSmoking == 0 %}
<dt class="mb-2">Smoking Not Allowed</dt>
{% endif %}
{% if listing.petDescription %}
<dt>Pet Details</dt>
<dd>{{ listing.petDescription }}</dd>
{% endif %}
</dl>
{% endif %}
{% if listing.depositDescription or listing.leaseDescription or listing.acceptAssistance %}
<h3 class="nhw-details__sub-heading">Lease Details</h3>
<dl>
{% if listing.depositDescription %}
<dt>Deposit Details</dt>
<dd>{{ listing.depositDescription }}</dd>
{% endif %}
{% if listing.leaseDescription %}
<dt>Lease Description</dt>
<dd>{{ listing.leaseDescription }}</dd>
{% endif %}
{% if listing.acceptAssistance %}
<dt>Housing Assistance</dt>
<dd>
{% if listing.acceptAssistance == '1' %}
Available
{% elsif listing.acceptAssistance == '0' %}
Not available
{% endif %}
</dd>
{% endif %}
</dl>
{% endif %}
{% if listing.areaInformation or listing.schools %}
<h3 class="nhw-details__sub-heading">Area Information</h3>
<dl>
{% if listing.areaInformation %}
<dt>Area Information</dt>
<dd>{{ listing.areaInformation }}</dd>
{% endif %}
{% if listing.schools %}
<dt>Schools</dt>
<dd>{{ listing.schools }}</dd>
{% endif %}
</dl>
{% endif %}
{% if listing.parkingTypeID or listing.parkingSpaces %}
<h3 class="nhw-details__sub-heading">Parking</h3>
<dl>
{% if listing.parkingTypeID > 0 %}
<dt>Parking Type</dt>
<dd>
{% case listing.parkingTypeID %}
{% when '1' %}
Attached Garage
{% when '2' %}
Carport
{% when '3' %}
Street
{% when '4' %}
Offstreet
{% when '5' %}
Other
{% when '6' %}
Detatched Garage
{% endcase %}
</dd>
{% endif %}
{% if listing.parkingSpaces %}
<dt>Spaces Available</dt>
<dd>{{ listing.parkingSpaces }}</dd>
{% endif %}
</dl>
{% endif %}
</div>
{% if listing.features.size > 0 %}
<h3 class="nhw-details__heading">Features and Amenities</h3>
<div class="features">
<ul class="dots">
{% for feature in listing.features %}
<li>{{ feature }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div class="nhw-details__contact-info">
<div class="nhw-details__form-container">
{% if listing.applicationUrl or listing.scheduleViewingUrl %}
<div class="nhw-details__links">
<div class="btn-list">
{% if listing.applicationUrl %}
<a href="{{ listing.applicationUrl }}" target="_blank" class="btn btn--accent">Apply Online</a>
{% endif %}
<!-- <a href="/tenants" target="_blank" class="btn btn--primary">Rental Qualifications</a> -->
{% if listing.scheduleViewingUrl %}
<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="btn btn--dark">Schedule Viewing</a>
{% endif %}
</div>
</div>
{% endif %}
<div class="nhw-form-header text-center">
<h3>Questions? Contact Us!</h3>
<ul class="list-unstyled">
{% if listing.phone %}<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | listing_phone }}</a></li>{% endif %}
{% if listing.email %}<li>email: <a href="mailto:{{ listing.email }}">{{ listing.email | listing_email }}</a></li>{% endif %}
</ul>
</div>
<div class="nhw-details__form">
<form id="nesthub-property-lead-form" class="nhw-form" method="POST">
<div class="nhw-form-group">
{% listing_leadName %}
</div>
<div class="nhw-form-group">
{% listing_leadEmail %}
</div>
<div class="nhw-form-group">
{% listing_leadPhone %}
</div>
<div class="nhw-form-group nhw-form-group-textarea">
{% listing_leadMessage %}
</div>
{% listing_nonce %}
{% listing_honeypot %}
<button type="submit" class="nhw-btn nhw-btn-primary nhw-btn-block">Submit</button>
</form>
</div>
</div>
<div class="nhw-details__location">
<h3 class="nhw-details__heading">Location</h3>
{% capture mapAddress %}{{ listing.address }},+{{ listing.city }},+{{ listing.stateID }}+{{ listing.postalCode | split: '-' | first }}{% endcapture %}
<div class="nhw-details__map-container">
<div data-fancybox="map" data-src="https://www.google.com/maps/search/{{ mapAddress | replace: ' ', '+' | replace: '#', '' | replace: '.', '' | urlencode }}/@{{ listing.latitude }},{{ listing.longitude }},14z"
id="nhw-listing-detail-map-container" data-latitude="{{ listing.latitude }}" data-longitude="{{ listing.longitude }}"></div>
</div>
</div>
</div>
</section>
</div>
</div>
<script type="text/javascript">
// Floating Form Labels
$('.nhw-form-control').on('change keydown paste input', function() {
if ($(this).val().length > 0) {
$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').addClass('float-label')
} else(
$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').removeClass('float-label')
)
});
$(document).ready(function() {
mapboxgl.accessToken =
"pk.eyJ1Ijoia29odmEiLCJhIjoiY2prbDlsNXhuMXl6YzNxbnhtY2w0NzB3bSJ9.jpQllFfzX4I6lT3VF6ZByQ";
const container = $("#nhw-listing-detail-map-container");
const lat = container.data("latitude") || 0.0;
const lng = container.data("longitude") || 0.0;
const zoom = container.data("zoom") || 8;
const map = new mapboxgl.Map({
container: "nhw-listing-detail-map-container",
style: "mapbox://styles/mapbox/streets-v12", // style URL
center: [lng, lat], // starting position [lng, lat]
zoom: zoom, // starting zoom
});
const marker = new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);
Fancybox.bind('[data-fancybox="gallery"]', {});
Fancybox.bind('[data-fancybox="map"]', {});
$(".nhw-listing-detail-view-gallery").on("click", function() {
Fancybox.fromSelector('[data-fancybox="gallery"]');
});
});
</script>
Short Term Rentals (last updated 7/12/2023)
Update the template code in Plugins > Nesthub Vacation Listings >
View ExampleList
<header class="text-center mb-5">
<h1 class="display-1">{% snippet name='company-name' %} Vacation Rentals</h1>
<h2 class="display-2">Your Favorite Getaway Starts Here</h2>
</header>
<p class="mw-950 text-center">
Whether you're planning a vacation, a business trip, or need a temporary residence, our extensive listings offer a wide range of short-term rental options to suit your needs. From cozy apartments in bustling city centers to charming vacation homes nestled in scenic destinations, we have the perfect accommodation for your short-term stay. With our user-friendly search page, advanced filters, and detailed property descriptions, finding your ideal temporary home has never been easier. Start exploring our listings now and make your short-term stay a truly memorable experience.
</p>
<div>
<div id="nhvl-virutal-search" class="nhvl-virtual-search-container">
<div id="nhvl-virtual-where-filter" class="nhvl-virtual-search-item nhvl-virtual-search-item--location bordered" data-field="cityState" data-default-value="Choose Location">
<div class="nhvl-virtual-search-icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-location"></i></div>
</div>
<div class="nhvl-vritual-search-field">
<div class="nhvl-virtual-search-label">Where To?</div>
<div class="nhvl-virtual-search-value">
Loading...
</div>
</div>
</div>
<div id="nhvl-virtual-check-in-filter" class="nhvl-virtual-search-item bordered nhvl-virtual-search-item--calendar" data-field="checkInDate" data-default-value="Choose dates">
<div class="nhvl-virtual-search-icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-calendar"></i></div>
</div>
<div class="nhvl-vritual-search-field">
<div class="nhvl-virtual-search-label">Check in</div>
<div class="nhvl-virtual-search-value">
Loading...
</div>
</div>
</div>
<div id="nhvl-virtual-check-out-filter" class="nhvl-virtual-search-item bordered nhvl-virtual-search-item--calendar" data-field="checkOutDate" data-default-value="Choose Dates">
<div class="nhvl-virtual-search-icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-calendar"></i></div>
</div>
<div class="nhvl-vritual-search-field">
<div class="nhvl-virtual-search-label">Check out</div>
<div class="nhvl-virtual-search-value">
Loading...
</div>
</div>
</div>
<div id="nhvl-virtual-number-of-guests-filter" class="nhvl-virtual-search-item nhvl-virtual-search-item--guests" data-field="numberOfGuests" data-default-value="Select Amount">
<div class="nhvl-virtual-search-icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-user"></i></div>
</div>
<div class="nhvl-vritual-search-field">
<div class="nhvl-virtual-search-label">Guests</div>
<div class="nhvl-virtual-search-value">
Loading...
</div>
</div>
</div>
<div class="nhvl-virtual-search-item last">
<div class="nhvl-virtual-search-btn">
<i aria-hidden="true" class="fa-kit fa-nhvl-search"></i>
</div>
</div>
</div>
<form id="nhvl-search-form">
<div>
{% nhvl_cities_input %}
</div>
<div>
{% nhvl_checkIn_input %}
</div>
<div>
{% nhvl_checkOut_input %}
</div>
<div>
{% nhvl_numberOfGuests_input %}
</div>
<div>
</div>
<div id="nhvl-search-form-features">
{% nhvl_features_input %}
</div>
</form>
<div class="nhvl-listing-list">
{% if listings.size == 0 %}
<div class="nhvl-listing-list-item-no-results">
No Rentals matching your search
</div>
{% else %}
{% for item in listings %}
<div class="nhvl-listing-list-item">
<a href="{{ item.url }}">
<div class="image">
{% if item.images.size > 0 %}
<div class="f-carousel" id="carousel{{ forloop.index }}">
{% assign imageCount = item.images.size | minus: 1 %}
{% for i in (0..imageCount) %}
<div class="f-carousel__slide">
<img data-src="{{ item.images[i].url.small }}" alt="property image" class="lazyload" />
</div>
{% endfor %}
</div>
{% else %}
<img data-src="https://pmi-resources.nesthub.com/images/photo-gallery-placeholder.jpg" alt="property image" class="lazyload" />
{% endif %}
</div>
<div class="header">
<div class="title">
{{ item.listing.headline }}
</div>
<div class="rating">
<span class="icon"><i class="fa-sharp fa-star checked"></i></span>
<span class="value">{% if item.listing.rating != _blank %}{{ item.listing.rating | round: 2}}{% else %}New{% endif %}</span>
</div>
</div>
<div class="location">{{item.listing.city}}, {{item.listing.stateID}}</div>
<div class="details">
<ul>
{% if item.listing.beds != _blank %}
<li>
Beds: {{item.listing.beds}}
</li>
{% endif %}
{% if item.listing.bathrooms != _blank %}
<li>
Baths: {{item.listing.bathrooms}}
</li>
{% endif %}
{% if item.listing.maxGuests != _blank %}
<li>
Sleeps: {{item.listing.maxGuests}}
</li>
{% endif %}
</div>
<div class="price">
<strong>{{ item.listing.nightlyPrice | money, 0 }}</strong> per night
</div>
</a>
</div>
{% endfor %}
{% endif %}
</div>
<div class="nhvl-pagination">
{% nhvl_pagination %}
</div>
</div>
<div id="nhvl-search-modal" class="nhvl-modal">
<div class="nhvl-modal__content">
<div class="nhvl-search-modal-close nhvl-modal__close"><span>×</span></div>
<div class="nhvl-modal__body">
<div class="nhvl-modal__section">
<div id="nhvl-checkin-checkout-field">
<div class="nhvl-dates-tabs">
<div class="nhvl-dates-tab nhvl-dates-tab--location">
<div class="nhvl-dates-tab-icon">
<div class="icon"><img aria-hidden="true" data-src="https://pmi-resources.nesthub.com/images/nhvl-location-icon.svg" alt="location icon" class="lazyload"></div>
</div>
<div class="nhvl-dates-tab-content">
<label for="nhvl-search-modal-where" class="nhvl-dates-tab-content-label">
Where To?
</label>
<div class="nhvl-copy-input nhvl-dates-tab-content-value"></div>
</div>
</div>
<div class="nhvl-dates-tab nhvl-dates-tab--calendar nhvl-dates-tab--check-in">
<div class="nhvl-dates-tab-icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-calendar"></i></div>
</div>
<div class="nhvl-dates-tab-content">
<div class="nhvl-dates-tab-content-label">
Check in
</div>
<div class="nhvl-dates-tab-content-value" data-tag="checkInDate" data-default="Choose Dates">
{% if nhvl_search_display.checkInDate != blank %}
{{nhvl_search_display.checkInDate}}
{% else %}
Choose Dates
{% endif %}
</div>
</div>
</div>
<div class="nhvl-dates-tab nhvl-dates-tab--calendar">
<div class="nhvl-dates-tab-icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-calendar"></i></div>
</div>
<div class="nhvl-dates-tab-content">
<div class="nhvl-dates-tab-content-label">
Check out
</div>
<div class="nhvl-dates-tab-content-value" data-tag="checkOutDate" data-default="Choose Dates">
{% if nhvl_search_display.checkOutDate != blank %}
{{nhvl_search_display.checkOutDate}}
{% else %}
Choose Dates
{% endif %}
</div>
</div>
</div>
</div>
<input type="text" id="nhvl-checkin-checkout-dates" class="nhvl-dates-input" placeholder="Select Check In and Check Out Dates" style="display:none"/>
</div>
</div>
<div class="nhvl-modal__row">
<div class="nhvl-modal__section">
<label class="nhvl-modal__section-label">Number of Guests</label>
<div class="nhvl-counter-input">
<button class="nhvl-counter-btn nhvl-counter-decrement" type="button">−</button>
<div class="nhvl-counter-value">0</div>
<button class="nhvl-counter-btn nhvl-counter-increment" type="button">+</button>
</div>
</div>
<div class="nhvl-modal__section">
<label class="nhvl-modal__section-label">Features</label>
<div class="nhvl-search-modal-checkbox-list">
<div class="nhvl-search-modal-checkbox-list-item">
<label>
Air Conditioning
<input type="checkbox" value="Air Conditioning"/>
<span></span>
</label>
</div>
<div class="nhvl-search-modal-checkbox-list-item">
<label>
Beach
<input type="checkbox" value="Beach"/>
<span></span>
</label>
</div>
<div class="nhvl-search-modal-checkbox-list-item">
<label>
Golf
<input type="checkbox" value="Golf"/>
<span></span>
</label>
</div>
<div class="nhvl-search-modal-checkbox-list-item">
<label>
Pool
<input type="checkbox" value="Beach"/>
<span></span>
</label>
</div>
<div class="nhvl-search-modal-checkbox-list-item">
<label>
Baseball
<input type="checkbox" value="Golf"/>
<span></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="nhvl-modal__btn-list">
<button class="nhvl-virtual-clear nhvl-modal__btn nhvl-search-clear" type="button">Clear</button>
<button class="nhvl-virtual-submit nhvl-modal__btn" type="submit">Submit</button>
</div>
</div>
</div>
<script defer type="text/javascript" src="https://pmi-resources.nesthub.com/js/nhvl-list.js"></script>
Detail
<div class="nhvl-details">
<section class="nhvl-details__header">
<header class="text-center">
<h1>{{ listing.headline }}</h1>
</header>
<div class="nhvl-back-btn">
<a href="/{{ plugin.url }}"><i class="fa-regular fa-circle-chevron-left"></i> Back to search</a>
</div>
</section>
{% if images.size > 0 %}
<section class="nhvl-details__gallery">
<div class="image-container image-container--primary">
{% for image in images limit: 1 %}
<div class="image-preview">
<a id="nhlv-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ image.url.large }}" data-caption="{{ image.caption }}">
<img class="lazyload" data-src="{{ image.url.large }}" alt="property image" />
</a>
</div>
{% endfor %}
</div>
{% if images.size > 1 %}
<div class="image-container image-container--secondary">
{% for image in images offset: 1 limit: 4 %}
<div class="image-preview">
<a id="nhlv-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ image.url.large }}" data-caption="{{ image.caption }}">
<img class="lazyload" data-src="{{ image.url.large }}" alt="property image" />
</a>
</div>
{% endfor %}
</div>
{% endif %}
{% if images.size > 5 %}
<div class="nhvl-listing-detail-view-gallery">
<i class="fa-regular fa-square-plus"></i> Full Gallery
</div>
{% endif %}
{% if images.size > 5 %}
<div class="additional-images">
{% assign imageCount = images.size | minus: 1 %}
{% for i in (5..imageCount) %}
<a data-fancybox="gallery" href="{{ images[i].url.large }}" data-caption="{{ images[i].caption }}">
<img data-src="{{ images[i].url.large }}" alt="property image" class="lazyload" />
</a>
{% endfor %}
</div>
{% endif %}
</section>
{% endif %}
<section class="nhvl-details__share">
<div class="social-icons">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a title="opens in new window" class="a2a_dd" href="https://www.addtoany.com/share"><i class="fa-regular fa-arrow-up-from-bracket"></i> Share</a>
</div>
</div>
</section>
<section class="nhvl-details__content">
<div class="nhvl-details__property-info">
<h3 class="nhvl-details__heading mt-0">Property Details</h3>
<div class="key-details">
<div class="key-detail bedrooms">
<span class="icon"><img data-src="https://pmi-resources.nesthub.com/images/nhvl-king-bed-icon.svg" alt="icon" class="lazyload"></span>
<span class="label">Bedrooms</span>
<span class="value">{{ listing.bedrooms }}</span>
</div>
<div class="key-detail bathrooms">
<span class="icon"><img data-src="https://pmi-resources.nesthub.com/images/nhvl-toilet-icon.svg" alt="icon" class="lazyload"></span>
<span class="label">Bathrooms</span>
<span class="value">{{ listing.bathrooms }}</span>
</div>
<div class="key-detail sleeps">
<span class="icon"><img data-src="https://pmi-resources.nesthub.com/images/nhvl-user-icon.svg" alt="icon" class="lazyload"></span>
<span class="label">Sleeps</span>
<span class="value">{{ listing.maxGuests }}</span>
</div>
<div class="clr"></div>
</div>
<div class="headline">
{{ listing.headline }}
</div>
<div class="description">
{{ listing.description }}
</div>
<h3 class="nhvl-details__heading">Features and Amenities</h3>
<div class="features">
<ul class="dots">
{% for feature in features %}
<li>{{ feature.name }}</li>
{% endfor %}
</ul>
<div class="clr"></div>
</div>
<h3 class="nhvl-details__heading">The Space</h3>
<div class="sleeping-areas">
{% for sleepingArea in sleepingAreas %}
<div class="sleeping-area-container">
<div class="title">
{{ sleepingArea.title }}
</div>
<div class="description">
{% for bed in sleepingArea.beds %}
<span>{{ bed.title }}</span>
{% endfor %}
</div>
<div class="icons">
{% for bed in sleepingArea.beds %}
{% for i in (1..bed.count) %}
<span class="icon">
{% if bed.type == "king" or bed.type == "queen" %}
<img data-src="https://pmi-resources.nesthub.com/images/nhvl-king-bed-icon.svg" class="lazyload" alt="icon" />
{% elsif bed.type == "single" or bed.type == "twin" %}
<img data-src="https://pmi-resources.nesthub.com/images/nhvl-twin-bed-icon.svg" class="lazyload" alt="icon" />
{% else %}
<img data-src="https://pmi-resources.nesthub.com/images/nhvl-sofa-icon.svg" class="lazyload" alt="icon" />
{% endif %}
</span>
{% endfor %}
{% endfor %}
</div>
</div>
{% endfor %}
<div class="clr"></div>
</div>
<h3 class="nhvl-details__heading">Location</h3>
<div class="nhvl-details__map-container">
{% capture mapAddress %}{{ listing.city }},+{{ listing.stateID }}+{{ listing.postalCode | split: '-' | first }}{% endcapture %}
<div data-fancybox="map" data-src="https://www.google.com/maps/search/{{ mapAddress | replace: ' ', '+' | replace: '#', '' | replace: '.', '' }}/@{{ listing.latitude }},{{ listing.longitude }},14z" id="nhvl-listing-detail-map-container" data-latitude="{{ listing.latitude }}" data-longitude="{{ listing.longitude }}"></div>
</div>
<p class="m-0"><strong>{{ listing.city }}, {{ listing.stateID }}</strong></p>
{% if listing.areaInformation %}
<p>{{ listing.areaInformation }}</p>
{% endif %}
<h3 class="nhvl-details__heading">Things to Note</h3>
<p>{{ listing.type }}</p>
<p>{{ current_tags }}</p>
<p><i aria-hidden="true" class="fa-kit fa-nhvl-pet fa-lg text-primary pe-1"></i> {{ listing.petDescription }}</p>
</div>
<div class="nhvl-details__booking-info">
<div class="nhvl-details__booking-container">
<div class="heading">
<div class="title">Book This Property</div>
<div class="price-per-night">
{% if pricing.nightlyPrice != "none" %}
<span id="nhvl-avg-price-per-night" class="price">{{pricing.nightlyPrice | money, 0}}</span> per night
{% else %}
Choose Dates for Pricing
{% endif %}
</div>
<div class="rating">
{% if rating.ratingCount != 0 %}
<a href="#" class="nhvl-review-link">
<span class="icon"><i class="fa-sharp fa-star checked"></i></span>
<span class="value">{{ rating.ratingAverage | round: 2}}</span>
<span class="count">{{ rating.ratingCount }} reviews</span>
</a>
{% else %}
<span class="icon"><i class="fa-sharp fa-star checked"></i></span>
<span class="value">New</span>
{% endif %}
</div>
{% if minimumMet == false and numberOfDays > 0 %}
<div class="nhvl-details__stay-notice">
Minimum Stay is {{minimumStay}} days for your check-in date. You are currently only booking for {% if numberOfDays != 1 %} {{numberOfDays}} days {% else %} 1 day{% endif %}.
</div>
{% endif %}
{% if overMax == true %}
<div class="nhvl-details__stay-notice">
Maximum Stay is {{maximumStay}} days for your check-in date. You are currently booking for {% if numberOfDays != 1 %} {{numberOfDays}} days {% else %} 1 day{% endif %}.
</div>
{% endif %}
</div>
<div id="nhvl-listing-detail-booking-form-container" class="form">
<div class="nhvl-details__booking-details">
<div class="booking-details__item nhvl-book-form-open">
<div class="booking-details__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-calendar"></i></div>
</div>
<div class="booking-details__content">
<div class="booking-details__label">
Check in
</div>
<div class="booking-details__value">
{{nhvl_search_display.checkInDate}}
</div>
</div>
</div>
<div class="booking-details__item nhvl-book-form-open">
<div class="booking-details__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-calendar"></i></div>
</div>
<div class="booking-details__content">
<div class="booking-details__label">
Check Out
</div>
<div class="booking-details__value">
{{nhvl_search_display.checkOutDate}}
</div>
</div>
</div>
<div class="booking-details__item nhvl-book-form-open">
<div class="booking-details__icon">
<span class="icon"><img data-src="https://pmi-resources.nesthub.com/images/nhvl-user-icon.svg" alt="icon" class="lazyload"></span>
</div>
<div class="booking-details__content">
<div class="booking-details__label">
Guests
</div>
<div class="booking-details__value">
{{nhvl_search_display.numberOfGuests}}
</div>
</div>
</div>
<!-- <div class="booking-details__item nhvl-book-form-open">
<div class="booking-details__icon">
<span class="icon"><img data-src="https://pmi-resources.nesthub.com/images/nhvl-pet-icon.svg" alt="icon" class="lazyload"></span>
</div>
<div class="booking-details__content">
<div class="booking-details__label">
Pets
</div>
<div class="booking-details__value">
No
</div>
</div>
</div> -->
</div>
{% if pricing.totalPrice != "none" %}
<div class="total">
<div class="message">Total <span class="muted">(excluding all fees and taxes):</span></div>
<div class="price">
{{pricing.totalPrice | money, 0 }}
</div>
</div>
{% endif %}
<div class="booking-button">
<a href="{{bookingUrl}}" target="_blank" class="book">Book Now</a>
</div>
<div class="disclaimer">
You won't be charged yet.
</div>
</div>
</div>
<div class="nhvl-details__booking-contact">
<h4>Questions? Contact Us!</h4>
<ul>
<li>phone: {% snippet name='contact' type='phone' %}</li>
<li>email: {% snippet name='contact' type='email' %}</li>
</ul>
</div>
{% if rating.ratingCount != 0 %}
<div class="nhvl-details__reviews">
<h3 class="nhvl-details__heading nhvl-details__heading--reviews">
<i aria-hidden="true" class="fa-sharp fa-star"></i>
<span class="value">{{ rating.ratingAverage | round: 2}}</span>
<span class="count">{{ rating.ratingCount }} Reviews</span>
</h3>
{% for review in reviews limit: 4 %}
<div class="nhvl-review">
<div class="nhvl-review__rating">
<span class="nhvl-review__stars">
{% assign starCount = review.rating %}
{% assign starCountEmpty = 5 | minus: starCount %}
{% for i in (1..review.rating) %}
<i aria-hidden="true" class="fa-sharp fa-star"></i>
{% endfor %}
{% if starCount < 5 %}
{% for i in (1..starCountEmpty) %}
<i class="fa-sharp fa-regular fa-star"></i>
{% endfor %}
{% endif %}
</span>
<!-- {{review.rating}} -->
</div>
<div class="nhvl-review__comments">“{{review.comments}}”</div>
<div class="nhvl-review__name">{{review.reviewerName}}, <span class="nhvl-review__date">{{review.checkInDate | date}}</span></div>
</div>
{% endfor %}
{% if rating.ratingCount > 4 %}
<div class="collapse nhvl-review__collapse" id="collapseReviews">
{% for review in reviews offset: 4 %}
<div class="nhvl-review">
<div class="nhvl-review__rating">
<span class="nhvl-review__stars">
{% assign starCount = review.rating %}
{% assign starCountEmpty = 5 | minus: starCount %}
{% for i in (1..review.rating) %}
<i aria-hidden="true" class="fa-sharp fa-star"></i>
{% endfor %}
{% if starCount < 5 %}
{% for i in (1..starCountEmpty) %}
<i class="fa-sharp fa-regular fa-star"></i>
{% endfor %}
{% endif %}
</span>
<!-- {{review.rating}} -->
</div>
<div class="nhvl-review__comments">“{{review.comments}}”</div>
<div class="nhvl-review__name">{{review.reviewerName}}, <span class="nhvl-review__date">{{review.checkInDate | date}}</span></div>
</div>
{% endfor %}
</div>
<a class="nhvl-review__collapse-toggle collapsed" data-bs-toggle="collapse" href="#collapseReviews" role="button" aria-expanded="false" aria-controls="collapseReviews">
<i class="fa-regular fa-circle-chevron-down"></i> Show All {{ rating.ratingCount }} Reviews
</a>
</div>
{% endif %}
{% endif %}
</div>
</section>
<div id="nhvl-book-modal" class="nhvl-modal nhvl-modal--book">
<div class="nhvl-modal__content">
<div class="nhvl-book-modal-close nhvl-modal__close">×</div>
<div class="nhvl-modal__body">
<div class="nhvl-modal__section">
<div class="nhvl-dates-tabs">
<div class="nhvl-dates-tab">
<div class="nhvl-dates-tab-icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-calendar"></i></div>
</div>
<div class="nhvl-dates-tab-content">
<div class="nhvl-dates-tab-content-label">
Check in
</div>
<div class="nhvl-dates-tab-content-value" data-tag="checkInDate" data-default="Choose Dates">
{% if nhvl_search_display.checkInDate != blank %}
{{nhvl_search_display.checkInDate}}
{% else %}
Choose Dates
{% endif %}
</div>
</div>
</div>
<div class="nhvl-dates-tab">
<div class="nhvl-dates-tab-icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-calendar"></i></div>
</div>
<div class="nhvl-dates-tab-content">
<div class="nhvl-dates-tab-content-label">
Check out
</div>
<div class="nhvl-dates-tab-content-value" data-tag="checkOutDate" data-default="Choose Dates">
{% if nhvl_search_display.checkOutDate != blank %}
{{nhvl_search_display.checkOutDate}}
{% else %}
Choose Dates
{% endif %}
</div>
</div>
</div>
</div>
<input id="datepicker" style="display:none;" />
</div>
<div id="nhvl-number-of-guests" class="nhvl-modal__section">
<label class="nhvl-modal__section-title">Number of Guests</label>
<div class="nhvl-counter-input">
<button class="nhvl-counter-btn nhvl-counter-decrement" type="button">−</button>
<div class="nhvl-counter-value">0</div>
<button class="nhvl-counter-btn nhvl-counter-increment" type="button">+</button>
</div>
</div>
</div>
<div class="nhvl-modal__btn-list">
<button id="nhvl-book-modal-submit" class="nhvl-modal__btn" type="button">Submit</button>
</div>
</div>
</div>
<form id="nhvl-detail-form" style="display:none;">
<div>
{% nhvl_checkIn_input %}
</div>
<div>
{% nhvl_checkOut_input %}
</div>
<div>
{% nhvl_numberOfGuests_input %}
</div>
</form>
<div id="nhvl-review-modal" class="nhvl-modal nhvl-modal--review">
<div class="nhvl-modal__content">
<div class="nhvl-modal-close nhvl-modal__close">×</div>
<div class="nhvl-modal__header nhvl-details__heading nhvl-details__heading--reviews">
<i aria-hidden="true" class="fa-sharp fa-star"></i>
<span class="value">{{ rating.ratingAverage | round: 2}}</span>
<span class="count">{{ rating.ratingCount }} Reviews</span>
</div>
<div class="nhvl-modal__body">
{% if review.size == 0 %}
No Reviews
{% else %}
{% for review in reviews limit: 4 %}
<div class="nhvl-review">
<div class="nhvl-review__rating">
<span class="nhvl-review__stars">
{% assign starCount = review.rating %}
{% assign starCountEmpty = 5 | minus: starCount %}
{% for i in (1..review.rating) %}
<i aria-hidden="true" class="fa-sharp fa-star"></i>
{% endfor %}
{% if starCount < 5 %}
{% for i in (1..starCountEmpty) %}
<i class="fa-sharp fa-regular fa-star"></i>
{% endfor %}
{% endif %}
</span>
<!-- {{review.rating}} -->
</div>
<div class="nhvl-review__comments">“{{review.comments}}”</div>
<div class="nhvl-review__name">{{review.reviewerName}}, <span class="nhvl-review__date">{{review.checkInDate | date}}</span></div>
</div>
{% endfor %}
{% if rating.ratingCount > 4 %}
<div class="collapse nhvl-review__collapse" id="collapseReviews">
{% for review in reviews offset: 4 %}
<div class="nhvl-review">
<div class="nhvl-review__rating">
<span class="nhvl-review__stars">
{% assign starCount = review.rating %}
{% assign starCountEmpty = 5 | minus: starCount %}
{% for i in (1..review.rating) %}
<i aria-hidden="true" class="fa-sharp fa-star"></i>
{% endfor %}
{% if starCount < 5 %}
{% for i in (1..starCountEmpty) %}
<i class="fa-sharp fa-regular fa-star"></i>
{% endfor %}
{% endif %}
</span>
<!-- {{review.rating}} -->
</div>
<div class="nhvl-review__comments">“{{review.comments}}”</div>
<div class="nhvl-review__name">{{review.reviewerName}}, <span class="nhvl-review__date">{{review.checkInDate | date}}</span></div>
</div>
{% endfor %}
</div>
<a class="nhvl-review__collapse-toggle collapsed" data-bs-toggle="collapse" href="#collapseReviews" role="button" aria-expanded="false" aria-controls="collapseReviews">
<i class="fa-regular fa-circle-chevron-down"></i> Show All {{ rating.ratingCount }} Reviews
</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
<script id="date-info" type="application/json">
{{ datesJson }}
</script>
<script defer src="https://pmi-resources.nesthub.com/js/nhvl-view.js"></script>
<script defer src="https://static.addtoany.com/menu/page.js"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "RealEstateListing",
"name": "{{ listing.headline }}",
"image": {
"@type": "ImageObject",
"url": "{{ images[0].url.large }}"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "{{ listing.city }}",
"addressRegion": "{{ listing.stateID }}",
"postalCode": "{{ listing.postalCode }}",
},
"smokingAllowed": "{{ listing.smokingDescription }}",
"description": "{{ listing.description | strip_html }}",
"map": "https://www.google.com/maps/@{{ listing.latitude }},{{ listing.longitude }},14z",
"geo": "{{ listing.latitude }},{{ listing.longitude }}",
"url": "{% snippet name='website-url' %}{{ listing.url }}"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Accommodation",
"name": "{{ listing.headline }}",
"numberOfBedrooms": "{{ listing.bedrooms }}",
"numberOfBathroomsTotal": "{{ listing.bathrooms }}",
"accommodationCategory": "{{ listing.propertyType }}",
"petsAllowed": "{{ listing.petDescription }}",
"tourBookingPage": "{{ bookingUrl }}",
"description": "{{ listing.description | strip_html }}",
"occupancy": {
"@type": "QuantitativeValue",
"minValue" : "1",
"maxValue" : "{{ listing.maxGuests }}"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue" : "{{ rating.ratingAverage | round: 2}}",
"ratingCount" : "{{ rating.ratingCount }}",
"reviewCount" : "{{ rating.ratingCount }}"
},
"address": {
"@type": "PostalAddress",
"addressLocality": "{{ listing.city }}",
"addressRegion": "{{ listing.stateID }}",
"postalCode": "{{ listing.postalCode }}",
},
"longitude": "{{ listing.longitude }}",
"latitude": "{{ listing.latitude }}"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "RentAction",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "{{pricing.nightlyPrice}}",
"priceCurrency": "USD",
"name": "Daily Rent",
"referenceQuantity": {
"@type": "QuantitativeValue",
"value": "1",
"unitCode": "MON"
}
}
}
</script>
Rentvine Rentals (last updated 1/11/24)
Make sure this is added within the head tag within the rentals-rentvine template:
<link rel="stylesheet" href="https://pmi-resources.nesthub.com/css/rvw.css?v2">
Update the template code in Plugins > Rentvine >
View ExampleList
<header class="rvw-header">
<h1 class="display-1">{% snippet name='areas' market='1' %} Homes For Rent</h1>
<div class="btn-list">
<a href="{% snippet name='portal' type='app' %}" target="_blank" title='opens in new tab' class="btn btn--accent">Apply Online</a>
<a href="/tenants" class="btn btn--primary">Rental Qualifications</a>
</div>
</header>
<p class="mw-950 text-center">
Whether you're relocating,
planning a long-term stay, or simply prefer the flexibility of renting, our extensive listings offer a diverse range of quality homes available
for extended periods. We understand that finding the right long-term rental is a significant decision, and that's why our search page provides
a user-friendly interface, advanced filtering options, and comprehensive property details to streamline your search process. Take your time,
explore our listings, and discover a place where comfort, convenience, and long-lasting memories await you. Start your journey towards finding
the ideal {% snippet name='areas' market='1' %} rental property today!
</p>
<div id="rentvine-property-list-view" class="rentvine-widget property-list">
{% rentvine_plugin %}
<form id="rentvine-search-form" class="prop-search-form" _lpchecked="1">
<div class="prop-search-form__container">
<div class="prop-search-form__item prop-search-form__item--search">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-location"></i></div>
</div>
<div class="prop-search-form__field">
{% capture searchInput %}{% rentvine_searchKeyword %}{% endcapture %}
{{ searchInput | replace: 'Search', 'Search by Location' | replace: 'name="search"', 'name="search" placeholder="Address, city, state, or zip"' }}
</div>
</div>
<div class="prop-search-form__item">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhw-property"></i></div>
</div>
<div class="prop-search-form__field">
{% capture propTypeInput %}{% rentvine_searchPropertyTypes %}{% endcapture %}
{{ propTypeInput | replace: 'Property Type', 'Type of Place' }}
</div>
</div>
<div class="prop-search-form__item prop-search-form__item--beds">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-king-bed"></i></div>
</div>
<div class="prop-search-form__field" data-target="dropdown">
<div class="prop-search-form__label">Beds & Baths</div>
<div class="prop-search-form__value">Choose amounts</div>
</div>
<div class="prop-search__dropdown">
{% rentvine_searchBeds %}
{% rentvine_searchBaths %}
</div>
</div>
<div class="prop-search-form__item prop-search-form__item--price">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhw-price"></i></div>
</div>
<div class="prop-search-form__field" data-target="dropdown">
<div class="prop-search-form__label">Price Range</div>
<div class="prop-search-form__value">Choose amounts</div>
</div>
<div class="prop-search__dropdown">
{% capture searchMinRent %}{% rentvine_searchMinRent %}{% endcapture %}
{{ searchMinRent | replace: 'Minimum Rent', 'Min Rent' }}
{% capture searchMaxRent %}{% rentvine_searchMaxRent %}{% endcapture %}
{{ searchMaxRent | replace: 'Maximum Rent', 'Max Rent' }}
</div>
</div>
<div class="prop-search-form__btn">
<label for="nesthub-search-btn"><span class="sr-only">Submit</span></label>
<button id="nesthub-search-btn">
<div class="icon"><span class="sr-only">Submit</span><i aria-hidden="true" class="fa-kit fa-nhvl-search"></i></div>
</button>
</div>
</div>
<div class="prop-search-options">
<div class="prop-search-options__item">
<div class="prop-search-options__icon">
<div class="icon"><i class="fa-light fa-sliders"></i></div>
</div>
<div class="prop-search-options__label" data-target="dropdown">
Optional Filters
</div>
<div class="prop-search__dropdown">
{% rentvine_searchPets %}
</div>
</div>
<div class="prop-search-options__item">
<div class="prop-search-options__icon">
<div class="icon"><i class="fa-regular fa-arrow-up-arrow-down"></i></div>
</div>
<div class="prop-search-options__label" data-target="dropdown">
Sort
</div>
<div class="prop-search__dropdown">
{% rentvine_searchSort %}
</div>
</div>
</div>
</form>
{% assign listing_count = listings | size %}
{% if listing_count <= 0 %}
<div class="rvw__no-listings">
<h4>No Listings Found!</h4>
</div>
{% else %}
<ul class="rvw-nav rvw-nav-pills rvw-mb-3" id="nesthub-property-list-tab-list" role="tablist">
<li class="rvw-nav-item">
<a class="rvw-nav-link rvw-show rvw-active" id="rentvine-property-list-tab" href="#rentvine-property-list" role="tab" aria-controls="rentvine-property-list" aria-selected="true">List</a>
</li>
<li class="rvw-nav-item">
<a class="rvw-nav-link" id="rentvine-property-map-tab" href="#rentvine-property-map" role="tab" aria-controls="rentvine-property-map" aria-selected="false">Map</a>
</li>
</ul>
<div class="rvw-tab-content" id="rentvine-property-list-tab-content">
<div class="rvw-tab-pane rvw-fade rvw-active" id="rentvine-property-list" role="tabpanel" aria-labelledby="rentvine-property-list-tab">
<div class="rvw-list">
{% for listing in listings %}
<div class="rvw-list__item">
<a href="{% rentvine_listingUrl %}" data-id="{{ listing.listing.propertyListingID }}">
<div class="rvw-list__image">
{% if listing.image != blank %}
<img data-src="{{ listing.image | getListingImageUrl: 'small' }}" alt="{{ listing.unit.address }} {{ listing.unit.address2 }}, {{ listing.unit.city }}, {{ listing.unit.state }} {{ listing.unit.postalCode }}" class="lazyload" />
{% if listing.listing.virtualTour %}
<div class="rvw-card-video-tour"><img src="{% rentvine_videoTourIconUrl %}" alt="Virtual Tour" /></div>
{% endif %}
{% else %}
<img data-src="https://pmi-resources.nesthub.com/images/photo-gallery-placeholder.jpg" alt="{{ listing.headline }}" class="lazyload" />
{% endif %}
</div>
<div class="rvw-list__price">
{{ listing.unit.rent | money | replace: '.00', '' }}/mo.
</div>
<div class="rvw-list__details">
<ul>
<li>
{% if listing.unit.beds == 0 %}
Studio
{% else %}
{% if listing.unit.beds == 1 %}Bed{%else%}Beds{%endif%}: {{ listing.unit.beds }}
{% endif %}
</li>
{% if listing.unit.halfBaths > 0 %}
<li class="rvw-icon-list-item">
Full Baths: {{ listing.unit.fullBaths | replace: '.00', '' }}
</li>
<li class="rvw-icon-list-item">
Half Baths: {{ listing.unit.halfBaths | replace: '.00', '' }}
</li>
{% else %}
<li class="rvw-icon-list-item">
{% if listing.unit.baths == 1 %}Bath{%else%}Baths{%endif%}: {{ listing.unit.baths | replace: '.00', '' }}
</li>
{% endif %}
{% if listing.listing.size %}
<li class="rvw-icon-list-item">
sqft: {{ listing.listing.size }}
</li>
{% endif %}
</ul>
</div>
<div class="rvw-list__location">
{{ listing.unit.address }}{% if listing.unit.address2 %}, {{ listing.unit.address2 }}{% endif %}, {{ listing.unit.city }}, {{ listing.unit.state }} {{ listing.unit.postalCode | split: '-' | first }}
</div>
<div class="rvw-list__prop-type">
{{ listing.property.propertyTypeID | propertyType }}
</div>
<div class="rvw-list__availability">
Available: {{ listing.listing.availabilityDate | availabilityDate }}
</div>
</a>
</div>
{% endfor %}
</div>
<div class="rvw-pagination">
{% rentvine_pagination %}
</div>
</div>
<div class="rvw-tab-pane rvw-fade" id="rentvine-property-map" role="tabpanel" aria-labelledby="rentvine-property-map-tab">
<div id="rentvine-property-map-panel" style="height:700px;" data-lat="{{map.latitude}}" data-lng="{{map.longitude}}"></div>
</div>
</div>
{% endif %}
</div>
<script type="text/javascript">
function closeDropdown(item) {
item.slideUp().removeClass('open');
}
function openDropdown(item) {
item.slideDown().addClass('open');
}
$('[data-target="dropdown"]').click(function(e) {
e.preventDefault();
var dropdown = $(this).siblings('.prop-search__dropdown');
if (dropdown.hasClass('open') == true) {
closeDropdown(dropdown)
} else {
$('.prop-search__dropdown.open').slideUp().removeClass('open');
openDropdown(dropdown)
}
});
$('.prop-search-form__item, .prop-search-option__item').mouseleave(function() {
setTimeout(() => {
closeDropdown($('.prop-search__dropdown.open'));
}, 300);
});
function updateFields() {
var bedValue = beds > 0 ? beds + ' bed, ' : '';
var bathValue = baths > 0 ? baths + ' bath' : '';
$('.prop-search-form__item--beds .prop-search-form__value').text(bedValue + bathValue)
$('.prop-search-form__item--price .prop-search-form__value').text(rentMin + ' - ' + rentMax)
}
// Update Search Placeholders on Page Load
if ( location.search.length > 0 ) {
var beds = location.search.split('&bedsMin=')[1].split('&')[0];
var baths = location.search.split('&bathsMin=')[1].split('&')[0];
var rentMin = '$' + location.search.split('&rentMin=')[1].split('&')[0];
var rentMax = '$' + location.search.split('&rentMax=')[1].split('&')[0];
updateFields();
}
// Update Search Placeholer Text on Input Change
$('.prop-search-form__item input, .prop-search-form__item select').on('change keydown paste input', function(){
beds = $('#rentvine-prop-search-beds').val();
baths = $('#rentvine-prop-search-baths').val();
rentMin = '$' + $('#rentvine-prop-search-min-rent').val();
rentMax = '$' + $('#rentvine-prop-search-max-rent').val();
updateFields(beds, baths, rentMin, rentMax);
if ($(this).parent('.prop-search-form__item').children('.prop-search-form__value').text().length == 0) {
$(this).parent('.prop-search-form__item').children('.prop-search-form__value').text('Choose amounts')
}
});
$( document ).ready(function() {
// Init Image Carousel
$('.f-carousel').each(function(){
const container = document.getElementById($(this).attr('id'));
const options = {
Navigation: {
nextTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"/></svg>',
prevTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"/></svg>',
},
Dots: false,
};
new Carousel(container, options);
})
});
</script>
Detail
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "RealEstateListing",
"name": "{{ listing.headline }}",
"image": {
"@type": "ImageObject",
"url": "{{ images[0].large }}"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "{{ unit.city }}",
"addressRegion": "{{ unit.stateID }}",
"postalCode": "{{ unit.postalCode }}",
"streetAddress": "{{ unit.address }} {{ unit.address2 }}"
},
"petsAllowed":"{{ listing.petDescription }}",
"tourBookingPage": "",
"smokingAllowed": "{{ listing.acceptSmoking }}",
"description": "{{ listing.description | strip_html }}",
"url": "{{ plugin.url }}"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Accommodation",
"numberOfBedrooms": "{{ unit.beds }}",
"numberOfBathroomsTotal": "{{ unit.fullBaths }} full baths, {{ unit.halfBaths }} half baths",
"leaseLength": "{{ listing.leaseDescription }}",
"accommodationCategory": "{{ property.propertyTypeID | propertyType }}"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "RentAction",
"priceSpecification":
{
"@type": "UnitPriceSpecification",
"price": "{{ unit.rent | money }}",
"priceCurrency": "USD",
"name": "Monthly Rent",
"referenceQuantity": {
"@type": "QuantitativeValue",
"value": "1",
"unitCode": "MON"
}
}
}
</script>
<div class="rentvine-widget">
<div id="nesthub-property-detail-view" class="rvw-details">
{% rentvine_plugin %}
{% assign virtualTourType = listing | getVirtualTourType %}
{% if leadSent %}
<div class="rvw-alert rvw-alert-success" role="alert">
Message has been sent!
</div>
{% endif %}
<section class="rvw-details__header">
<header class="text-center">
<h1>{{ unit.address }}</h1>
<h2>{{ unit.city }}, {{ unit.stateID }} {{ unit.postalCode | split: '-' | first }}</h2>
</header>
<div class="rvw-back-btn">
<a href="/{{plugin.url}}"><i class="fa-regular fa-circle-chevron-left"></i> Back to search</a>
</div>
</section>
{% assign imageCount = images | size %}
{% if imageCount > 0 %}
<section class="rvw-details__gallery">
<div class="image-container image-container--primary">
{% for image in images limit: 1 %}
<div class="image-preview">
<a id="rvw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ images[0].large }}">
<img class="lazyload" data-src="{{ images[0].large }}" alt="View Full Image"/>
</a>
</div>
{% endfor %}
</div>
{% if images.size > 1 %}
<div class="image-container image-container--secondary">
{% for image in images offset: 1 limit: 4 %}
<div class="image-preview">
<a id="rvw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ image.imageUrl.large }}">
<img class="lazyload" data-src="{{ image.imageUrl.small }}" alt="View Full Image" />
</a>
</div>
{% endfor %}
</div>
{% endif %}
{% if images.size > 5 %}
<div class="rvw-listing-detail-view-gallery">
<i class="fa-regular fa-square-plus"></i> Full Gallery
</div>
{% endif %}
{% if images.size > 5 %}
<div class="additional-images">
{% assign imageCount = images.size | minus: 1 %}
{% for i in (5..imageCount) %}
<a data-fancybox="gallery" href="{{ images[i].imageUrl.large }}">
<img data-src="{{ images[i].imageUrl.large }}" alt="View Full Size" class="lazyload" />
</a>
{% endfor %}
</div>
{% endif %}
{% if listing.virtualTour %}
<a class="rvw-listing-detail-view-video" data-fancybox="gallery" href="{% if virtualTourType == 'youtube' %}https://www.youtube.com/embed/{{ listing | getVirtualTourVideoID }}{% elsif virtualTourType == 'vimeo' and listing.virtualTour contains 'vimeo' %}https://player.vimeo.com/video/{{ listing | getVirtualTourVideoID }}?title=0&byline=0&portrait=0{% else %}{{ listing.virtualTour }}" data-type="iframe{% endif %}">
<i class="fa-sharp fa-regular fa-video-plus"></i> Video Tour
</a>
{% endif %}
</section>
{% endif %}
<section class="rvw-details__share">
<div class="social-icons">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a title="opens in new window" class="a2a_dd" href="https://www.addtoany.com/share"><i class="fa-regular fa-arrow-up-from-bracket"></i> Share</a>
</div>
</div>
</section>
<section class="rvw-details__content">
<div class="rvw-details__property-info">
<h3 class="rvw-details__heading mt-0">Property Details</h3>
<div class="key-details">
<div class="key-detail price">
<span class="value">{{ unit.rent | money }}</span>
<span class="label">USD / Month</span>
</div>
<div class="key-detail bedrooms">
<span class="value">
{% if unit.beds == 0 %}
Studio
{% else %}
{{ unit.beds }}
{% endif %}
</span>
<span class="label">{% if unit.beds == 1 %}Bed{%else%}Beds{%endif%}</span>
</div>
{% if unit.halfBaths > 0 %}
<div class="key-detail bathrooms">
<span class="value">
{{ unit.fullBaths }}
</span>
<span class="label">Full Baths</span>
</div>
<div class="key-detail bathrooms">
<span class="value">
{{ unit.halfBaths }}
</span>
<span class="label">Half Baths</span>
</div>
{% else %}
<div class="key-detail bathrooms">
<span class="value">
{{ unit.baths }}
</span>
<span class="label">{% if unit.baths == 1 %}Bath{%else%}Baths{%endif%}</span>
</div>
{% endif %}
{% if unit.size %}
<div class="key-detail sqft">
<span class="value">
{{ unit.size }}
</span>
<span class="label">sqft</span>
</div>
{% endif %}
<div class="key-detail rent">
<span class="value">•</span>
<span class="label">For Rent</span>
</div>
</div>
<hr/>
<div class="sub-details">
<div class="sub-detail">
<span class="sub-detail__label">Building Type:</span>
<span class="sub-detail__value">{{ property.propertyTypeID | propertyType | replace: ' Home', '' }}</span>
</div>
{% if unit.deposit %}
<div class="sub-detail">
<span class="sub-detail__label">Deposit:</span>
<span class="sub-detail__value">{{ unit.deposit | money }}</span>
</div>
{% endif %}
{% if listing.petDescription or listing.acceptDogs or listing.acceptCats %}
<div class="sub-detail">
<span class="sub-detail__label">Pets:</span>
<span class="sub-detail__value">
{% if listing.acceptDogs == 1 or listing.acceptCats == 1 %}
Yes
{% else %}
No
{% endif %}
</span>
</div>
{% endif %}
<div class="sub-detail">
<span class="sub-detail__label">Date Available:</span>
<span class="sub-detail__value">
{{ listing.availabilityDate | availabilityDate }}
</span>
</div>
{% if listing.applicationFee %}
<div class="sub-detail">
<span class="sub-detail__label">App Fee:</span>
<span class="sub-detail__value">{{ listing.applicationFee | money | replace: '.00', '' }}</span>
</div>
{% endif %}
{% if listing.acceptDogs == 1 or listing.acceptCats == 1 %}
<div class="sub-detail">
<span class="sub-detail__label">Pet Type:</span>
<span class="sub-detail__value">
{% capture petsAllowed %}
{% if listing.acceptDogs == 1 %}
Dogs
{% endif %}
{% if listing.acceptDogs == 1 and listing.acceptCats == 1 %},{% endif %}
{% if listing.acceptCats == 1 %}
Cats
{% endif %}
{% endcapture %}
{{ petsAllowed | strip_newlines | replace: ' ', '' | replace: ',', ', ' }}
</span>
</div>
{% endif %}
</div>
<div class="headline">
{{ listing.headline }}
</div>
<div class="description">
{{ listing.description | newline_to_br }}
</div>
<div class="property-details mt-4">
<dl>
{% if listing.lotSize != "" %}
<dt>Lot Size</dt>
<dd>{{ listing.lotSize }} acres</dd>
{% endif %}
{% assign includedUtilities = listing | getIncludedUtilities %}
{% if includedUtilities %}
<dt>Included Utilities</dt>
<dd>{{ includedUtilities }}</dd>
{% endif %}
{% if listing.heatType %}
<dt>Heat Type</dt>
<dd>{{ listing.heatType }}</dd>
{% endif %}
{% if property.yearBuilt %}
<dt>Year Built</dt>
<dd>{{ property.yearBuilt }}</dd>
{% endif %}
</dl>
{% if listing.acceptDogs != "" or listing.acceptCats != "" or listing.petDescription != "" or listing.acceptSmoking != "" %}
<h3 class="rvw-details__sub-heading">Restrictions</h3>
<dl>
{% if listing.petDescription %}
<dt>Pet Details</dt>
<dd>{{ listing.petDescription }}</dd>
{% endif %}
{% if listing.acceptSmoking != "" %}
<dt>Smoking Allowed</dt>
<dd>{{ listing.acceptSmoking | boolean }}</dd>
{% endif %}
</dl>
{% endif %}
<h3 class="rvw-details__sub-heading">Lease Details</h3>
<dl>
{% if unit.securityDeposit %}
<dt>Security Deposit</dt>
<dd>{{ unit.securityDeposit }}</dd>
{% endif %}
{% if listing.depositDescription %}
<dt>Deposit Details</dt>
<dd>{{ listing.depositDescription }}</dd>
{% endif %}
{% if listing.leaseDescription %}
<dt>Lease Details</dt>
<dd>{{ listing.leaseDescription }}</dd>
{% endif %}
{% if listing.acceptAssistance != "" %}
<dt>Housing Assistance</dt>
<dd>{{ listing.acceptAssistance | boolean: "Available", "Not Available" }}</dd>
{% endif %}
</dl>
{% if listing.areaInformation or listing.schools %}
<h3 class="rvw-details__sub-heading">Area Information</h3>
<dl>
{% if listing.areaInformation %}
<dt>Area Information</dt>
<dd>{{ listing.areaInformation }}</dd>
{% endif %}
{% if listing.schools %}
<dt>Schools</dt>
<dd>{{ listing.schools }}</dd>
{% endif %}
</dl>
{% endif %}
{% if listing.parkingTypeID and listing.parkingSpaces %}
<h3 class="rvw-details__sub-heading">Parking</h3>
<dl>
<dt>Parking Type</dt>
<dd>{{ listing.parkingTypeID | parkingType }}</dd>
<dt>Spaces Available</dt>
<dd>{{ listing.parkingSpaces }}</dd>
</dl>
{% endif %}
</div>
{% if features.size > 0 %}
<h3 class="rvw-details__heading">Features and Amenities</h3>
<div class="features">
{% for featureCategory in features %}
<h5 class="mt-4 mb-3">{{ featureCategory.categoryName }}</h5>
<ul class="dots">
{% for feature in featureCategory.features %}
<li>{{ feature }}</li>
{% endfor %}
</ul>
{% endfor %}
</div>
{% endif %}
</div>
<div class="rvw-details__contact-info">
<div class="rvw-details__form-container">
<div class="rvw-details__links">
<div class="btn-list">
{% if listing.applicationUrl %}
<a href="{{ listing.applicationUrl }}" target="_blank" class="btn btn--accent">Apply Online</a>
{% endif %}
<a href="/tenants" target="_blank" class="btn btn--primary">Rental Qualifications</a>
{% if listing.showingUrl %}
<a href="{{ listing.showingUrl }}" target="_blank" class="btn btn--dark">Schedule Viewing</a>
{% endif %}
</div>
</div>
<div class="rvw-form-header text-center">
<h3>Questions? Contact Us!</h3>
<ul class="list-unstyled">
<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | phone }}</a></li>
</ul>
</div>
<div class="rvw-details__form">
<form id="nesthub-property-lead-form" class="rvw-form" method="POST">
<div class="rvw-form-group">
{% listing_leadName %}
</div>
<div class="rvw-form-group">
{% listing_leadEmail %}
</div>
<div class="rvw-form-group">
{% listing_leadPhone %}
</div>
<div class="rvw-form-group rvw-form-group-textarea">
{% listing_leadMessage %}
</div>
{% listing_nonce %}
{% listing_honeypot %}
<button type="submit" class="rvw-btn rvw-btn-primary rvw-btn-block">Submit</button>
</form>
</div>
</div>
<div class="rvw-details__location">
<h3 class="rvw-details__heading">Location</h3>
{% capture mapAddress %}{{ unit.address }},+{{ unit.city }},+{{ unit.stateID }}+{{ unit.postalCode | split: '-' | first }}{% endcapture %}
<div class="rvw-details__map-container">
<div data-fancybox="map" data-src="https://www.google.com/maps/search/{{ mapAddress | replace: ' ', '+' | replace: '#', '' | replace: '.', '' | urlencode }}/@{{ unit.latitude }},{{ unit.longitude }},14z" id="rvw-listing-detail-map-container" data-latitude="{{ unit.latitude }}" data-longitude="{{ unit.longitude }}"></div>
</div>
</div>
</div>
</section>
</div>
</div>
<script type="text/javascript">
// Floating Form Labels
$('.rvw-form-control').on('change keydown paste input', function(){
if ($(this).val().length > 0) {
$(this).parent('.rvw-form-group:not(.rvw-form-group-checkbox):not(.rvw-form-group-radio):not(.rvw-form-group-textarea)').children('label').addClass('float-label')
} else (
$(this).parent('.rvw-form-group:not(.rvw-form-group-checkbox):not(.rvw-form-group-radio):not(.rvw-form-group-textarea)').children('label').removeClass('float-label')
)
});
$(document).ready(function () {
mapboxgl.accessToken =
"pk.eyJ1Ijoia29odmEiLCJhIjoiY2prbDlsNXhuMXl6YzNxbnhtY2w0NzB3bSJ9.jpQllFfzX4I6lT3VF6ZByQ";
const container = $("#rvw-listing-detail-map-container");
const lat = container.data("latitude") || 0.0;
const lng = container.data("longitude") || 0.0;
const zoom = container.data("zoom") || 8;
const map = new mapboxgl.Map({
container: "rvw-listing-detail-map-container",
style: "mapbox://styles/mapbox/streets-v12", // style URL
center: [lng, lat], // starting position [lng, lat]
zoom: zoom, // starting zoom
});
const marker = new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);
Fancybox.bind('[data-fancybox="gallery"]', {});
Fancybox.bind('[data-fancybox="map"]', {});
$(".rvw-listing-detail-view-gallery").on("click", function () {
Fancybox.fromSelector('[data-fancybox="gallery"]');
});
});
</script>