Nesthub Widget Styles & Setup
To create Nesthub listings, you will first need to set up the feed for the client. Please reference the flow chart here to determine which widget you will need to set up based on the client's software and package.
Add a Feed Last Updated 9/3/2024
- Go to: Listing —> Feeds —> Add Feed
- Feed name:
- Propertyware, Tenant Turner, Buildium, Showmojo
- If Propertyware:
- Username: WID
- Password: SID
- Account Name: Grab from Portal URL: https://app.propertyware.com/pw/index.html#/login/owner/pmigreaterphiladelphia_pminc_template (ex: pmigreaterphiladelphia_pminc_template)
- If Tenant Turner:
- Put the tenant turner customerID (https://app.tenantturner.com/listings/customer/2178 = 2178) in the the necessary fields
- If Buildium:
- Put the Buildium customerID (if url: https://floridarentalandleasingpmgn.managebuilding.com/Manager/public...., customerID = floridarentalandleasingpmgn) in the the necessary fields
- If Showmojo:
- Get XML link and use the series of letters and numbers at the end of the URL to plug into Nesthub for Username, Password, & Account Name. (example of URL: https://showmojo.com/syndication/trulia/3acab83041.xml)
- Reach out to support@showmojo.freshdesk.com Ask for the Trulia XML Feed Data
- Since ShowMojo doesn’t provide the application URL, we either can set a generic application URL (doesn't work if using Appfolio because they don't have a generic app URL) in the properties template or add it manually to each listing in Nesthub
- **Note: You can use the link provided in their iframe, which will be the same as their Trulia XML feed, but without Showmojo generating the XML feed link, it will not work and will not pull in any properties.
- Propertyware, Tenant Turner, Buildium, Showmojo
SEO Property Widget (Customers Paying for SPP) Last Updated 9/3/2024
View ExampleNESTHUB PROPERTY SETUP ON BACKEND (different if they have Rentvine)
Add a Page
- Go to: Listings —> Pages —> Add Page
- Title Tag:
- Atlanta Homes for Rent, Houses for Rent in Atlanta, GA, Atlanta, Georgia Rental Homes.
- Meta Tag:
- Find Atlanta, GA homes for rent with our borderless search. Search by any criteria!
- Go to Settings —> View Template —> Rentals —> Save Changes
Instructions
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', '' }}{% if listing.isMultiUnit == "1" and listing.rentMax > 0 %} - {{ listing.rentMax | money | replace: '.00', '' }}{% endif %}/mo.
</div>
<div class="nhw-list__details">
<ul>
<li>
Beds:
{% if listing.isMultiUnit == "1" and listing.bedsMax > 0 %}
{% if listing.beds == 0 %}
Studio - {{ listing.bedsMax }}
{% else %}
{{ listing.beds }} - {{ listing.bedsMax }}
{% endif %}
{% else %}
{% if listing.beds == 0 %}
Studio
{% else %}
{{ listing.beds }}
{% endif %}
{% endif %}
</li>
<li class="nhw-icon-list-item">
Baths: {{ listing.baths | replace: '.00', '' }}{% if listing.isMultiUnit == "1" and listing.bathsMax > 0 %} - {{ listing.bathsMax | replace: '.00', '' }}{% endif %}
</li>
{% if listing.size %}
<li class="nhw-icon-list-item">
sqft: {{ listing.size }}{% if listing.isMultiUnit == "1" and listing.sizeMax > 0 %} - {{ listing.sizeMax }}{% endif %}
</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 %}
{% if listing.isActive == false %}
<p>This Property Is Not Available</p>
{% else %}
{% 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 }}{% if listing.isMultiUnit == "1" and listing.rentMax > 0 %} - {{ listing.rentMax | money: 0 }}{% endif %}</span>
<span class="label">Per Month</span>
</div>
<div class="key-detail bedrooms">
<span class="value">
{% if listing.isMultiUnit == "1" and listing.bedsMax > 0 %}
{% if listing.beds == 0 %}
Studio - {{ listing.bedsMax }}
{% else %}
{{ listing.beds }} - {{ listing.bedsMax }}
{% endif %}
{% else %}
{% if listing.beds == 0 %}
Studio
{% else %}
{{ listing.beds }}
{% endif %}
{% endif %}
</span>
<span class="label">Beds</span>
</div>
<div class="key-detail bathrooms">
<span class="value">{{ listing.baths | number: 1 }}{% if listing.isMultiUnit == "1" and listing.bathsMax > 0 %} - {{ listing.bathsMax | number: 1 }}{% endif %}</span>
<span class="label">Baths</span>
</div>
{% if listing.size %}
<div class="key-detail sqft">
<span class="value">
{{ listing.size }}{% if listing.isMultiUnit == "1" and listing.sizeMax > 0 %} - {{ listing.sizeMax }}{% endif %}
</span>
<span class="label">sqft</span>
</div>
{% endif %}
<div class="key-detail rent">
<span class="value">•</span>
<span class="label">
{% if listing.isActive == 0 %}
This Property Is Not Available
{% else %}
For Rent
{% endif %}
</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 }}{% if listing.isMultiUnit == "1" and listing.depositMax > 0 %} - {{ listing.depositMax | money: 0 }}{% endif %}</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 %}
{% if listing.isActive == 1 %}
<div class="sub-detail">
<span class="sub-detail__label">Date Available:</span>
<span class="sub-detail__value">
{{ listing.dateAvailable | listing_availabilityDate }}
</span>
</div>
{% endif %}
{% 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">
{% if listing.isActive == 1 %}
<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>
{% endif %}
<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>
{% endif %}
<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>
Settings
Change Page Size:
{ "pageSize": "24" }
Change Page Size & add Filters:
{ "pageSize": "24", "filters": { "search": "Newly Renovated"} }
Tags
You can create a page using the Nesthub 'Listings' module and apply Tags created within the module to apply to properties to filter. (Ex. Instead of filtering by a keyword or using lat/long, they can set a tag on a specific property to display on a similar setup to the SPP.)
{
"filters": {
"tags": [
"listing tag 1",
"listing tag 3"
]
}
}
Filters
Search by Keyword in description/title/etc:
{ "filters": { "search": "comingsoon"} }
Adding Multiple for a Lat/Long Radius:
Note: Must have 14 decimal places
{ "filters": { "locationLat": "38.01932702077288", "locationLng": "122.13658260308127", "locationRadius": "20"} }
Assign a Specific Feed to a Page (Feed ID is in URL on feed page)
{ "filters": { "feedID": 1 } }
{ "filters": { "feedIDs": [ 3, 4 ] } }
Filter by State (ex. Alabama)
{ "filters": { "stateID": "AL" } }
Other Filters:
- isActive
- 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
{"filters": {"notPropertyTypeIDs": ["9"]}}
If needing to use multiple filters, use the following
{"filters": {"notPropertyTypeIDs": ["9","10"]}}
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[]=9
If needing to use multiple filters, use the following
&propertyTypeIDs[]=1&propertyTypeID[]=3
The Map Last Updated 1/10/2024
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-v2.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-v2.js"></script>
List
<div id="nesthub-property-list-view" class="nesthub-widget property-list" data-ion="listing-list" data-lat="{{map.latitude}}" data-lng="{{map.longitude}}">
{% 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' | replace: 'nhw-form-control', 'nhw-form-control selectNative js-selectNative' }}
<div class="selectCustom js-selectCustom" aria-hidden="true">
<div class="selectCustom-trigger">Any</div>
<div class="selectCustom-options">
<div class="selectCustom-option" data-value="">Any</div>
<div class="selectCustom-option" data-value="1">Single Family Home</div>
<div class="selectCustom-option" data-value="2">Apartment</div>
<div class="selectCustom-option" data-value="3">Condo</div>
<div class="selectCustom-option" data-value="4">Townhouse</div>
<div class="selectCustom-option" data-value="5">Duplex</div>
<div class="selectCustom-option" data-value="6">Multiplex</div>
<div class="selectCustom-option" data-value="7">Loft</div>
<div class="selectCustom-option" data-value="8">Mobile Home</div>
<div class="selectCustom-option" data-value="9">Commercial</div>
<div class="selectCustom-option" data-value="10">Garage</div>
<div class="selectCustom-option" data-value="11">Other</div>
</div>
</div>
</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">
<select id="nesthub-listing-prop-search-sort" name="sort" class="nhw-form-control">
<option value="distance">Distance from Map Center</option>
<optgroup label="Date Posted">
<option value="advertisedDate|desc">Date Posted (new -old)</option>
<option value="advertisedDate">Date Posted (old - new)</option>
</optgroup>
<optgroup label="Price">
<option value="rent">Price (low - high)</option>
<option value="rent|desc">Price (high - low)</option>
</optgroup>
<optgroup label="Beds">
<option value="beds">Beds (low - high)</option>
<option value="beds|desc">Beds (high - low)</option>
</optgroup>
<optgroup label="Baths">
<option value="baths">Baths (low - high)</option>
<option value="baths|desc">Baths (high - low)</option>
</optgroup>
<optgroup label="Area (Sq.Ft.)">
<option value="size">SqFt (low - high)</option>
<option value="size|desc">SqFt (high - low)</option>
</optgroup>
<optgroup label="Availability Date">
<option value="dateAvailable">Availability (sooner - later)</option>
<option value="dateAvailable|desc">Availability (later - sooner)</option>
</optgroup>
</select>
</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>
<script defer src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js" type="text/javascript"></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 type="text/javascript" src="https://resources.nesthub.com/js/nhw.js?v1"></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 }}",
"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">
<div class="nhw-back-btn">
<a id="back-btn" href="#" data-market="{% snippet name='areas' market='1' toUrl='true' %}"><i class="fa-regular fa-circle-chevron-left"></i> Back to search</a>
</div>
<div class="nhw-details__property-contact">
<header class="nhw-details__address" data-fancybox-trigger="map">
<h1>{{ listing.address }}</h1>
<h2>{{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}</h2>
</header>
<div class="nhw-details__links">
<div class="btn-list">
{% if listing.applicationUrl %}
<a href="{{ listing.applicationUrl }}" target="_blank" class="nhw-btn">Apply<span> Online</span></a>
{% endif %}
{% if listing.scheduleViewingUrl %}
<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="nhw-btn nhw-btn--dark">Schedule Viewing</a>
{% endif %}
<a href="#contact" class="nhw-btn nhw-btn--secondary smooth-scroll">Contact<span> Us</span></a>
</div>
</div>
</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="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 images.size > 5 %}
<div class="nhw-listing-detail-view-gallery">
<i class="fa-regular fa-square-plus"></i> Full Gallery
</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 }}{% endif %}" data-type="iframe" data-height="80vh">
<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 | remove: ';amp;amp' }}
</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 %}
<h3 class="nhw-details__sub-heading">Restrictions</h3>
<dl>
{% if listing.petDescription %}
<dt>Pet Details</dt>
<dd>{{ listing.petDescription }}</dd>
{% endif %}
{% if listing.acceptSmoking %}
<dt>Smoking</dt>
<dd>
{% case listing.acceptSmoking %}
{% when '0' %}
Not Allowed
{% when '1' %}
Allowed
{% endcase %}
</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 %}
{% comment %}
<dt>Schools</dt>
<dd>
{% capture schoolAddress %}{{ listing.address }}, {{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}{% endcapture %}
<iframe className="greatschools" src="//www.greatschools.org/widget/map?textColor=0066B8&borderColor=CCCCC&lat={{ listing.latitude }}&lon={{ listing.longitude }}&cityName={{ listing.city }}&state={{ listing.stateID }}&normalizedAddress={{ schoolAddress | urlencode }}&width=640&height=500&zoom=13" width="640" height="500" marginHeight="0" marginWidth="0" frameBorder="0" scrolling="no"></iframe>
<script type="text/javascript">
var _gsreq = new XMLHttpRequest();
payload = {
event: "Widget loaded",
properties: {
distinct_id: window.location.href,
token: '6d6fd523-5b70-406d-bfb9-4a78438ab98d',
user_agent: navigator.userAgent,
time: Date.now(),
parent_location: window.location
},
};
fetch("https://api.perfalytics.com/track", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(payload),
});
</script>
</dd>
{% endcomment %}
{% 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 id="contact" class="nhw-details__form-container">
<div class="nhw-details__links d-none">
<div class="btn-list">
{% if listing.applicationUrl %}
<a href="{{ listing.applicationUrl }}" target="_blank" class="nhw-btn nhw-btn--secondary">Apply Online</a>
{% endif %}
<a href="/tenants" target="_blank" class="nhw-btn nhw-btn--primary">Rental Qualifications</a>
{% if listing.scheduleViewingUrl %}
<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="nhw-btn nhw-btn--accent">Schedule Viewing</a>
{% endif %}
</div>
</div>
<div class="nhw-form-header text-center">
<h3>Questions? Contact Us!</h3>
<ul class="list-unstyled">
<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | listing_phone }}</a></li>
</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>
<section class="nhw-nearby-listings" data-current-prop="{{ listing.listingID }}" data-radius="3">
<h3 class="nhw-details__heading">Nearby Homes</h3>
<div class="nhw-nearby-listings__list">
</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')
)
});
// Leasing Specials
function checkSpecials(propertyDescription) {
let reEx = /([^<br>])*?LEASING SPECIAL[\s\S]*?(?=<br>)/i;
let reExAlt = /([^<br>])*?SPECIAL:[\s\S]*?(?=<br>)/i;
let specialText = propertyDescription.match(reEx) != null ? propertyDescription.match(reEx)[0].split('<br>')[0] : 'null';
if (specialText == 'null') {
specialText = propertyDescription.match(reExAlt) != null ? propertyDescription.match(reExAlt)[0].split('<br>')[0] : 'null';
}
if (specialText.length > 0 && specialText != 'null') {
$('.nhw-details__property-info .headline').prepend(`<div class="special-offer">${specialText}</div>`);
let newText = $('.nhw-details__property-info .description').html().replace(specialText, "").replace('<br><br>','');
$('.nhw-details__property-info .description').html(newText);
}
}
checkSpecials($('.nhw-details__property-info .description').html())
// Back btn
function goBack(){
let prevLocation = localStorage.getItem("url");
let rentalsMarket = $('#back-btn').data('market');
if (prevLocation !== null ) {
if (prevLocation.length > 0 ) {
window.location = prevLocation;
} else {
window.location = `${window.location.origin}/${rentalsMarket}-homes-for-rent`;
}
} else {
window.location = `${window.location.origin}/${rentalsMarket}-homes-for-rent`;
}
}
$('#back-btn').click(function(e){
e.preventDefault();
goBack();
return false;
})
$(document).ready(function () {
// Contact Button Affix
$('.nhw-details__property-contact').affix({
offset: {
top: ($('.nhw-details__property-contact').offset().top + $('.nhw-details__property-contact').outerHeight()) - 50
}
});
// Listing Details Map
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>
<script src="https://resources.nesthub.com/js/nhw-nearby-homes.js?v1" type="text/javascript"></script>
The Map Last Updated 2/6/2024
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-v2.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-v2.js"></script>
List
<div id="nesthub-property-list-view" class="nesthub-widget property-list" data-ion="listing-list" data-lat="{{map.latitude}}" data-lng="{{map.longitude}}" data-zoom="10" data-location-zoom="11">
{% 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' | replace: 'nhw-form-control', 'nhw-form-control selectNative js-selectNative' }}
<div class="selectCustom js-selectCustom" aria-hidden="true">
<div class="selectCustom-trigger">Any</div>
<div class="selectCustom-options">
<div class="selectCustom-option" data-value="">Any</div>
<div class="selectCustom-option" data-value="1">Single Family Home</div>
<div class="selectCustom-option" data-value="2">Apartment</div>
<div class="selectCustom-option" data-value="3">Condo</div>
<div class="selectCustom-option" data-value="4">Townhouse</div>
<div class="selectCustom-option" data-value="5">Duplex</div>
<div class="selectCustom-option" data-value="6">Multiplex</div>
<div class="selectCustom-option" data-value="7">Loft</div>
<div class="selectCustom-option" data-value="8">Mobile Home</div>
<div class="selectCustom-option" data-value="9">Commercial</div>
<div class="selectCustom-option" data-value="10">Garage</div>
<div class="selectCustom-option" data-value="11">Other</div>
</div>
</div>
</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">
<select id="nesthub-listing-prop-search-sort" name="sort" class="nhw-form-control">
<option value="distance">Distance from Map Center</option>
<optgroup label="Date Posted">
<option value="advertisedDate|desc">Date Posted (new -old)</option>
<option value="advertisedDate">Date Posted (old - new)</option>
</optgroup>
<optgroup label="Price">
<option value="rent">Price (low - high)</option>
<option value="rent|desc">Price (high - low)</option>
</optgroup>
<optgroup label="Beds">
<option value="beds">Beds (low - high)</option>
<option value="beds|desc">Beds (high - low)</option>
</optgroup>
<optgroup label="Baths">
<option value="baths">Baths (low - high)</option>
<option value="baths|desc">Baths (high - low)</option>
</optgroup>
<optgroup label="Area (Sq.Ft.)">
<option value="size">SqFt (low - high)</option>
<option value="size|desc">SqFt (high - low)</option>
</optgroup>
<optgroup label="Availability Date">
<option value="dateAvailable">Availability (sooner - later)</option>
<option value="dateAvailable|desc">Availability (later - sooner)</option>
</optgroup>
</select>
</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>
<script defer src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js" type="text/javascript"></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 type="text/javascript" src="https://resources.nesthub.com/js/nhw.js?v2"></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 }}",
"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">
<div class="nhw-back-btn">
<a id="back-btn" href="#" data-market="{% snippet name='areas' market='1' toUrl='true' %}"><i class="fa-regular fa-circle-chevron-left"></i> Back to search</a>
</div>
<div class="nhw-details__property-contact">
<header class="nhw-details__address" data-fancybox-trigger="map">
<h1>{{ listing.address }}</h1>
<h2>{{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}</h2>
</header>
<div class="nhw-details__links">
<div class="btn-list">
{% if listing.applicationUrl %}
<a href="{{ listing.applicationUrl }}" target="_blank" class="nhw-btn">Apply<span> Online</span></a>
{% endif %}
{% if listing.scheduleViewingUrl %}
<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="nhw-btn nhw-btn--dark">Schedule Viewing</a>
{% endif %}
<a href="#contact" class="nhw-btn nhw-btn--secondary smooth-scroll">Contact<span> Us</span></a>
</div>
</div>
</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="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 images.size > 5 %}
<div class="nhw-listing-detail-view-gallery">
<i class="fa-regular fa-square-plus"></i> Full Gallery
</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 }}{% endif %}" data-type="iframe" data-height="80vh">
<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 | remove: ';amp;amp' }}
</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 %}
<h3 class="nhw-details__sub-heading">Restrictions</h3>
<dl>
{% if listing.petDescription %}
<dt>Pet Details</dt>
<dd>{{ listing.petDescription }}</dd>
{% endif %}
{% if listing.acceptSmoking %}
<dt>Smoking</dt>
<dd>
{% case listing.acceptSmoking %}
{% when '0' %}
Not Allowed
{% when '1' %}
Allowed
{% endcase %}
</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 %}
{% comment %}
<dt>Schools</dt>
<dd>
{% capture schoolAddress %}{{ listing.address }}, {{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}{% endcapture %}
<iframe className="greatschools" src="//www.greatschools.org/widget/map?textColor=0066B8&borderColor=CCCCC&lat={{ listing.latitude }}&lon={{ listing.longitude }}&cityName={{ listing.city }}&state={{ listing.stateID }}&normalizedAddress={{ schoolAddress | urlencode }}&width=640&height=500&zoom=13" width="640" height="500" marginHeight="0" marginWidth="0" frameBorder="0" scrolling="no"></iframe>
<script type="text/javascript">
var _gsreq = new XMLHttpRequest();
payload = {
event: "Widget loaded",
properties: {
distinct_id: window.location.href,
token: '6d6fd523-5b70-406d-bfb9-4a78438ab98d',
user_agent: navigator.userAgent,
time: Date.now(),
parent_location: window.location
},
};
fetch("https://api.perfalytics.com/track", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(payload),
});
</script>
</dd>
{% endcomment %}
{% 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 id="contact" class="nhw-details__form-container">
<div class="nhw-details__links d-none">
<div class="btn-list">
{% if listing.applicationUrl %}
<a href="{{ listing.applicationUrl }}" target="_blank" class="nhw-btn nhw-btn--secondary">Apply Online</a>
{% endif %}
<a href="/tenants" target="_blank" class="nhw-btn nhw-btn--primary">Rental Qualifications</a>
{% if listing.scheduleViewingUrl %}
<a href="{{ listing.scheduleViewingUrl }}" target="_blank" class="nhw-btn nhw-btn--accent">Schedule Viewing</a>
{% endif %}
</div>
</div>
<div class="nhw-form-header text-center">
<h3>Questions? Contact Us!</h3>
<ul class="list-unstyled">
<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | listing_phone }}</a></li>
</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>
<section class="nhw-nearby-listings" data-current-prop="{{ listing.listingID }}" data-lat="{{ listing.latitude }}" data-lng="{{ listing.longitude }}">
<h3 class="nhw-details__heading">Nearby Homes</h3>
<div class="nhw-nearby-listings__list">
</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')
)
});
// Leasing Specials
function checkSpecials(propertyDescription) {
let reEx = /([^<br>])*?LEASING SPECIAL[\s\S]*?(?=<br>)/i;
let reExAlt = /([^<br>])*?SPECIAL:[\s\S]*?(?=<br>)/i;
let specialText = propertyDescription.match(reEx) != null ? propertyDescription.match(reEx)[0].split('<br>')[0] : 'null';
if (specialText == 'null') {
specialText = propertyDescription.match(reExAlt) != null ? propertyDescription.match(reExAlt)[0].split('<br>')[0] : 'null';
}
if (specialText.length > 0 && specialText != 'null') {
$('.nhw-details__property-info .headline').prepend(`<div class="special-offer">${specialText}</div>`);
let newText = $('.nhw-details__property-info .description').html().replace(specialText, "").replace('<br><br>','');
$('.nhw-details__property-info .description').html(newText);
}
}
checkSpecials($('.nhw-details__property-info .description').html())
// Back btn
function goBack(){
let prevLocation = localStorage.getItem("url");
let rentalsMarket = $('#back-btn').data('market');
if (prevLocation !== null ) {
if (prevLocation.length > 0 ) {
window.location = prevLocation;
} else {
window.location = `${window.location.origin}/${rentalsMarket}-homes-for-rent`;
}
} else {
window.location = `${window.location.origin}/${rentalsMarket}-homes-for-rent`;
}
}
$('#back-btn').click(function(e){
e.preventDefault();
goBack();
return false;
})
$(document).ready(function () {
// Contact Button Affix
$('.nhw-details__property-contact').affix({
offset: {
top: ($('.nhw-details__property-contact').offset().top + $('.nhw-details__property-contact').outerHeight()) - 50
}
});
// Listing Details Map
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>
<script src="https://resources.nesthub.com/js/nhw-nearby-homes.js?v1" type="text/javascript"></script>
Nearby Homes Widget Last Updated 2/6/2024
![nearby homes example](/images/nearby-homes.png)
HTML
Add the following code to the bottom of the Nesthub Listing Widget View Template
<section class="nhw-nearby-listings lazyload" data-current-prop="{{ listing.listingID }}" data-lat="{{ listing.latitude }}" data-lng="{{ listing.longitude }}" data-script="https://resources.nesthub.com/js/nhw-nearby-homes.js?v1" data-style="https://resources.nesthub.com/css/nhw-nearby-homes.css?v1">
<h3 class="nhw-details__heading">Nearby Homes</h3>
<div class="nhw-nearby-listings__list"></div>
</section>