Nesthub Widget Styles


Upgraded Nesthub Widget (Customers Paying for APP) Last Updated 11/8/2023

View Example

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', '' }}/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 %}
									{% 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&amp;byline=0&amp;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>
							{% 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"} }

Filters

Search by Keyword in description/title/etc:

{ "filters": { "search": "comingsoon"} }

Adding Multiple for a Lat/Long Radius:

{ "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:

  • 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 Example

Files 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 2/6/2024

View Example

Instructions

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&amp;byline=0&amp;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

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>