Nesthub Widget Styles
Upgraded Nesthub Widget (Customers Paying for APP) Last Updated 11/8/2023
View ExampleInstructions
Remove any .container or .container-fluid from the Rentals Template. Older sites may need root variables to be set for colors and header-height.
Files to add to Rentals Template
<link rel="stylesheet" href="https://resources.nesthub.com/css/fancybox.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css" />
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css">
<link rel="stylesheet" href="https://resources.nesthub.com/css/nhw.css">
<script defer src="https://kit.fontawesome.com/9e4e3329f0.js" crossorigin="anonymous"></script>
<script src="https://resources.nesthub.com/js/fancybox.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
<script src="https://static.addtoany.com/menu/page.js"></script>
<!-- make sure to add id="rentals" and class nhw to the content container -->
<section id="rentals" class="body-container nhw">
{% content %}
</section>
List
<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">Apply Online</a>
<a href="/tenants" class="btn btn--secondary">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 %}
Beds: {{ listing.beds }}
{% endif %}
</li>
<li class="nhw-icon-list-item">
Baths: {{ 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-kit fa-pmi-arrow-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=large" 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: 0 }}</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">Beds</span>
</div>
<div class="key-detail bathrooms">
<span class="value">{{ listing.baths | number: 1 }}</span>
<span class="label">Baths</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: 0 }}</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: 0 }}</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--primary">Apply Online</a>
{% endif %}
<!-- <a href="/tenants" target="_blank" class="btn btn--light">Rental Qualifications</a> -->
{% if listing.scheduleViewingUrl %}
<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="btn btn--secondary">Schedule Viewing</a>
{% endif %}
</div>
</div>
{% endif %}
<div class="nhw-form-header text-center">
<h3>Questions? Contact Us!</h3>
{% if listing.phone %}
<ul class="list-unstyled">
<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | listing_phone }}</a></li>
</ul>
{% endif %}
</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>
Filters
Example for searching by Keyword in description/title/etc:
{ "filters": { "search": "comingsoon"} }
Example for Adding Multiple for a Lat/Long Radius:
{ “filters”: { “locationLat”: “38.01932702077288”, “locationLng”: “122.13658260308127”, “locationRadius”: “20”} }
Example for Assigning a Specific Feed to a Page (Feed ID is in URL on feed page)
{ “filters”: { “feedID”: 1 } }
Example for Filtering by State (ex. Alabama)
{ “filters”: { “stateID”: AL } }
Other Filters:
- ‘search’,
- ‘rentMin’,
- ‘rentMax’,
- ‘bedsMin’,
- ‘bathsMin’,
- ‘propertyTypeID’,
- ‘petFilterOptionID’,
- ‘feedTypeID’,
- ‘feedID’,
- ‘sort’,
- ‘latitudeMin’,
- ‘latitudeMax’,
- ‘longitudeMin’,
- ‘longitudeMax’
- locationLng
- locationLat
- locationRadius
If you're doing a center out radius, radius is in miles by default
Property Type Filters
- SingleFamilyHome = 1
- Apartment = 2
- Condo = 3
- Townhouse = 4
- Duplex = 5
- Multiplex = 6
- Loft = 7
- MobileHome = 8
- Commercial = 9
- Garage = 10
- Other = 11
Exclusion Filters
If trying to use exclusion filters
- notPropertyTypeIDs
If needing to use multiple filters, use the following
&propertyTypeIDs[]=1&propertyTypeID[]=3
If hiding ShowMojo Link in Nesthub Listings Widget
Replace {{ listing.description }} with the following:
{{ listing.description | split: '----' | last }}
Standard Nesthub Widget (non-APP)
View ExampleFiles to add to Homes for Rent Page (or update Rentals Template if it's a newer site)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css" />
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css">
<link rel="stylesheet" href="https://resources.nesthub.com/css/nhw-standard.css">
<script defer src="https://kit.fontawesome.com/9e4e3329f0.js" crossorigin="anonymous"></script>
<script src="https://resources.nesthub.com/js/fancybox.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
<script src="https://static.addtoany.com/menu/page.js"></script>
Code to Add to Homes for Rent Page -- Replace old FRS code
<div id="nh-props" data-ion="listing-widget"></div>
Code to Add to styles.css file for older sites
/* Set Design Standards & Colors Here -- Replace with customer's colors */
:root {
--primary: #29abe2;
--dark: #000000;
--gray: #f6f6f6;
--primary-font: inherit;
}
Adding generic URL to all properties
data-default-application-url=""
Filters
data-hard-filters="feedID=23"
Other Filters:
- 'stateID'
- ‘search’,
- ‘rentMin’,
- ‘rentMax’,
- ‘bedsMin’,
- ‘bathsMin’,
- ‘propertyTypeID’,
- ‘petFilterOptionID’,
- ‘feedTypeID’,
- ‘feedID’,
- ‘sort’,
- ‘latitudeMin’,
- ‘latitudeMax’,
- ‘longitudeMin’,
- ‘longitudeMax’
- locationLng
- locationLat
- locationRadius
If you're doing a center out radius, radius is in miles by default
Property Type Filters
- SingleFamilyHome = 1
- Apartment = 2
- Condo = 3
- Townhouse = 4
- Duplex = 5
- Multiplex = 6
- Loft = 7
- MobileHome = 8
- Commercial = 9
- Garage = 10
- Other = 11
Exclusion Filters
If trying to use exclusion filters
- notPropertyTypeIDs
If needing to use multiple filters, use the following
&propertyTypeIDs[]=1&propertyTypeID[]=3
The Map Last Updated 11/8/2023
View ExampleInstructions
Remove any .container, .container-fluid, or .no-hero classes from the Rentals Template. Older sites may need root variables to be set for colors and header-height.
Files to add to Rentals Template
<link rel="stylesheet" href="https://resources.nesthub.com/css/nhw-map.css">
<link rel="stylesheet" href="https://resources.nesthub.com/css/fancybox.css" />
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
<script defer src="https://kit.fontawesome.com/9e4e3329f0.js" crossorigin="anonymous"></script>
<script defer src="https://resources.nesthub.com/js/fancybox.umd.js"></script>
<script defer src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<script defer id="search-js" src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js" type="text/javascript"></script>
<script defer src="https://static.addtoany.com/menu/page.js"></script>
<script defer src="https://resources.nesthub.com/js/nhw-map.js"></script>
List
<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-bar">
<div class="prop-search-form__container">
<div class="prop-search-form__item prop-search-form__item--search">
<div class="prop-search-form__field">
<label for="search">Search by Location</label>
<div id="geocoder" class="geocoder"></div>
</div>
</div>
<div class="prop-search-form__item prop-search-form__item--prop-type">
<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__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__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>
<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' }}
<label id="keywordSearch" for="search">Keyword Search</label>
<input type="text" name="search" value="" class="nhw-form-control">
</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 id="resetSearch" class="prop-search-options__item">
<div class="prop-search-options__icon">
<div class="icon"><i class="fa-regular fa-arrow-rotate-right"></i></div>
</div>
<div class="prop-search-options__label">
Reset Search
</div>
</div>
<div id="hideMap" class="prop-search-options__item">
<div class="prop-search-options__icon">
<div class="icon"><i class="fa-regular fa-circle-xmark"></i></div>
</div>
<div class="prop-search-options__label">
Hide Map
</div>
</div>
<div id="showMap" class="prop-search-options__item">
<div class="prop-search-options__icon">
<div class="icon"><i class="fa-regular fa-circle-plus"></i></div>
</div>
<div class="prop-search-options__label">
Show Map
</div>
</div>
</div>
</form>
<div id="nesthub-properties-list-view" class="nesthub-widget nesthub-property-locator">
<div class="property-locator-content loading-spinner">
<div class="loading-bar"></div>
<!-- Mobile Map -->
<div id="map-mobile" class="locator-map locator-map--mobile d-lg-none"></div>
<!-- List -->
<div id="nhwList" class="property-locator-list"></div>
</div>
<!-- Desktop Map -->
<div id="map" class="locator-map locator-map--desktop d-none d-lg-block"></div>
</div>
</div>
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">
<a href="#map" class="nhw-details__address" data-fancybox data-src="#map">
<h1>{{ listing.address }} <small>{{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}</small></h1>
</a>
</header>
<div class="nhw-back-btn">
<a id="back-btn" href="#"><i class="fa-regular fa-circle-chevron-left"></i> Back to search</a>
</div>
</section>
<section class="nhw-details__body">
{% 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=large" 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" 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 }}" data-type="iframe{% 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: 0 }}</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">Beds</span>
</div>
<div class="key-detail bathrooms">
<span class="value">{{ listing.baths | number: 1 }}</span>
<span class="label">Baths</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: 0 }}</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: 0 }}</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">Apply Online</a>
{% endif %}
<!-- <a href="/tenants" target="_blank" class="btn btn--accent">Rental Qualifications</a> -->
{% if listing.scheduleViewingUrl %}
<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="btn btn--secondary">Schedule Viewing</a>
{% endif %}
</div>
</div>
{% endif %}
<div class="nhw-form-header text-center">
<h3>Questions? Contact Us!</h3>
{% if listing.phone %}
<ul class="list-unstyled">
<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | listing_phone }}</a></li>
</ul>
{% endif %}
</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>
</section>
</div>