Nesthub Widget Styles

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

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 %}
              		{% 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>


              <script type="text/javascript">
              	// Floating Form Labels
              	$('.nhw-form-control').on('change keydown paste input', function(){
              		if ($(this).val().length > 0) {
              			$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').addClass('float-label')
              		} else (
              			$(this).parent('.nhw-form-group:not(.nhw-form-group-checkbox):not(.nhw-form-group-radio):not(.nhw-form-group-textarea)').children('label').removeClass('float-label')
              		)
              	});

              	$(document).ready(function () {
              		mapboxgl.accessToken =
              			"pk.eyJ1Ijoia29odmEiLCJhIjoiY2prbDlsNXhuMXl6YzNxbnhtY2w0NzB3bSJ9.jpQllFfzX4I6lT3VF6ZByQ";

              		const container = $("#nhw-listing-detail-map-container");

              		const lat = container.data("latitude") || 0.0;
              		const lng = container.data("longitude") || 0.0;
              		const zoom = container.data("zoom") || 8;

              		const map = new mapboxgl.Map({
              			container: "nhw-listing-detail-map-container",
              			style: "mapbox://styles/mapbox/streets-v12", // style URL
              			center: [lng, lat], // starting position [lng, lat]
              			zoom: zoom, // starting zoom
              		});

              		const marker = new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);

              		Fancybox.bind('[data-fancybox="gallery"]', {});

              		Fancybox.bind('[data-fancybox="map"]', {});

              		$(".nhw-listing-detail-view-gallery").on("click", function () {
              			Fancybox.fromSelector('[data-fancybox="gallery"]');
              		});

              	});
              </script>

Filters

Example for searching by Keyword in description/title/etc:

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

Example for Adding Multiple for a Lat/Long Radius:

{ “filters”: { “locationLat”: “38.01932702077288”, “locationLng”: “122.13658260308127”, “locationRadius”: “20”} }

Example for Assigning a Specific Feed to a Page (Feed ID is in URL on feed page)

{ “filters”: { “feedID”: 1 } }

Example for Filtering by State (ex. Alabama)

{ “filters”: { “stateID”: AL } }

Other Filters:

‘search’,
‘rentMin’,
‘rentMax’,
‘bedsMin’,
‘bathsMin’,
‘propertyTypeID’,
‘petFilterOptionID’,
‘feedTypeID’,
‘feedID’,
‘sort’,
‘latitudeMin’,
‘latitudeMax’,
‘longitudeMin’,
‘longitudeMax’
locationLng
locationLat
locationRadius

If you're doing a center out radius, radius is in miles by default

Property Type Filters

SingleFamilyHome = 1
Apartment = 2
Condo = 3
Townhouse = 4
Duplex = 5
Multiplex = 6
Loft = 7
MobileHome = 8
Commercial = 9
Garage = 10
Other = 11

Exclusion Filters

If trying to use exclusion filters

notPropertyTypeIDs

If needing to use multiple filters, use the following

&propertyTypeIDs[]=1&propertyTypeID[]=3

If hiding ShowMojo Link in Nesthub Listings Widget

Replace {{ listing.description }} with the following:

      

        

        
          
          {{ listing.description  | split: '----' | last }}

Standard Nesthub Widget (non-APP)

View 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=""