Featured Inline Listings
Add Nesthub Listings to ANY page. Filter for Featured, Rented, and more!
** Please Note: this module is meant for clients who pay for APP. For clients with the non-paid version, the listing url can only go to the main homes for rent page, it will not open the listing popup.
How to Use
-
Add the following code anywhere on a site:
{% listings %} -
Add Listing Module Layout:
On the client's site in Atom, go to Modules > Listing if there is no file named "inline", please create that file and add the code below. This will be the default layout for your inline listings. You may create as many custom versions as you'd like and each instance can use a different custom layout if you'd like.
Custom Options
You may combine as many options below as needed:
Show Featured Listings
{% listings isFeatured='1' %}
Show Rented Listings
{% listings isActive='0' %}
Show MultiUnit Listings
{% listings isMultiUnit='1' %}
Search Listings
{% listings search='Keywords or phrases can go here' %}
Select a Custom Layout
The default template layout is 'inline' but you may create any number of custom layouts similar to the inline blog. Simply create a new file in the Listings Module folder and add the layout name to the snippet:
{% listings layout='custom-layout' %}
Change the Number of Properties Shown
The default is 3 properties but you can show however many you want
**Please Note: If you need to show more than 50 rented properties, please create a new Listings > Page with the JSON filter set as { "filters": { "isActive": "0" } }
{% listings count='10' %}
Show Listings within an Area (Bounding Box)
Use the link below to draw a box on the map to easily get the coordinates for an area:
Bounding Box Finder
{% listings latitudeMin='-124.7844079' latitudeMax='-66.9513812' longitudeMin='24.7433195' longitudeMax='49.3457868' %}
Other Filter Options:
- feedID
- propertyTypeID
- propertyTypeIDs
- notPropertyTypeIDs
- stateID
- isFurnished
Default Inline Template HTML
The default CSS file is hosted on the Resources and is lazyloaded inside the template. If you wish to create your own custom CSS and host on the client's site, you may update the CSS file inside the template.
<div class="nhw-inline">
{% if listing_count <= 0 %}
<div class="nhw-inline__no-listings">
<h4 class="text-center p-5">No Listings Found!</h4>
</div>
{% else %}
<!-- You may change the CSS file here if you want to use your own custom CSS -->
<div class="nhw-inline__list lazyload" data-link="https://resources.nesthub.com/css/nhw-widget.css">
{% for listing in listings %}
{% assign imageCount = listing.images %}
<div class="nhw-inline__item">
<a href="{{ listing.systemUrl }}" data-id="{{ listing.listingID }}">
<div class="nhw-inline__image">
{% assign imageCount = listing.images | size %}
{% assign images = listing.images %}
{% if imageCount > 0 %}
<div class="f-carousel" id="carousel{{ forloop.index }}">
<!-- Remove limit: 1 and add fancybox carousel script & CSS if you would like to use the Carousel -->
{% for image in images limit: 1 %}
<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-inline__content">
<div class="nhw-inline__price">
{{ listing.rent | money | replace: '.00', '' }}{% if listing.isMultiUnit == "1" and listing.rentMax > 0 %} - {{ listing.rentMax | money | replace: '.00', '' }}{% endif %}/mo.
</div>
<div class="nhw-inline__details">
<ul>
<li>
{% if listing.beds == 0 and listing.isMultiUnit == "0" %}
Studio
{% else %}
Beds: {{ listing.beds | replace: '0', 'Studio' }}{% if listing.isMultiUnit == "1" and listing.bedsMax > 0 %} - {{ listing.bedsMax }}{% endif %}
{% endif %}
</li>
<li>
Baths: {{ listing.baths | number: 1 | replace: '.0', '' }}{% if listing.isMultiUnit == "1" and listing.bathsMax > 0 %} - {{ listing.bathsMax | number: 1 | replace: '.0', '' }}{% endif %}
</li>
{% if listing.size %}
<li>
sqft: {{ listing.size }}{% if listing.isMultiUnit == "1" and listing.sizeMax > 0 %} - {{ listing.sizeMax }}{% endif %}
</li>
{% endif %}
</ul>
</div>
<div class="nhw-inline__location">
{{ listing.address }}{% if listing.address2 %}, {{ listing.address2 }}{% endif %}, {{ listing.city }}, {{ listing.stateID }} {{ listing.postalCode | split: '-' | first }}
</div>
<div class="nhw-inline__prop-type">
{{ listing.propertyTypeName }}
</div>
{% if listing.isMultiUnit == 0 %}
<div class="nhw-inline__availability">
{% if listing.isActive == 0 %}
RENTED
{% else %}
Available: {{ listing.dateAvailable | listing_availabilityDate }}
{% endif %}
</div>
{% endif %}
</div>
</a>
</div>
{% endfor %}
</div>
{% endif %}
</div>