Go through town facets and build a comma-separated areas list:
{{#each facets_town}}
<a href="{{compose_url this @root.website.url_format_town}}">{{town}} ({{count}})</a>,
{{/each}}
Get listings, then filter for status = for sale listings, sort it by price descending order and limit to the first 6 listings:
{{set 'listings_for_sale' (filter listings 'propertyStatus' 'For Sale')}}
{{set 'listings_for_sale' (sort listings_for_sale 'price' 'desc')}}
{{set 'listings_for_sale' (limit listings_for_sale 6)}}
{{#each listings_for_sale}}
<div class="listing">
<div class="listing__image" style="background-image: url('{{mainphoto}}')"></div>
<div class="listing__suburb">
{{suburb}}
</div>
<div class="listing__params">
{{format_camelcase town}} / {{propertyType}} / {{propertyStatus}}
</div>
<div class="listing__price">
{{format_currencysymbol currency}} {{format_numbersep price}}
</div>
</div>
{{/each}}
The idea of paging implementation is to save all listings to the javascript array via json
helper and render required listings based on query parameters after page load. You can implement rendering with any framework/library you want: React, Angular, Ember, jQuery or even without any external dependencies. Good idea is to use React if you already embed any of flex components to your template with paging. This is because flex components based on React+Redux, so your page with embedded components will load this libraries anyway. Here we provide an basic example of paging implementation using jQuery.
index.html
<div class="container section featured">
<h2 class="section__title">
Featured Properties In Your Area
</h2>
<div class="section__splitter"></div>
<div class="row listings" id="featured-listings"></div>
</div>
<script>
{{set 'listings_for_sale' (filter listings 'propertyStatus' 'For Sale')}}
{{set 'listings_for_sale' (sort listings_for_sale 'price' 'desc')}}
var LISTINGS = {{json listings_for_sale}};
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="scripts/paging.js"></script>
scripts/paging.js
$(function () {
var page = parseInt(getParameterByName('page')) || 1;
var perPage = 6;
var pages = Math.ceil(listings.length / perPage);
var begin = (page - 1) * perPage;
var end = begin + perPage;
var listingsNode = $('#featured-listings');
var featured = listings.slice(begin, end);
featured.forEach(function (listing) {
var cell = $('<div class="col-xs-12 col-sm-4">');
var container = $('<div class="listing">');
var image = $('<div class="listing__image">')
.css('background-image', 'url(' + listing.mainphoto + ')');
var title = $('<div class="listing__title">')
.text(listing.suburb);
var params = $('<div class="listing__params">')
.text(listing.town + ' / ' + listing.propertyType + ' / ' + listing.propertyStatus);
var splitter = $('<div class="listing__splitter">');
var price = $('<div class="listing__price">')
.text(currencySymbol(listing.currency) + ' ' + numberSep(listing.price));
container
.append(image)
.append(title)
.append(params)
.append(splitter)
.append(price);
cell.append(container);
listingsNode.append(cell);
});
});
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
var results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function currencySymbol(value) {
const symbols = {
'ZAR': 'R',
'USD': '$',
'GBP': '£'
};
return symbols[value] ? symbols[value] : value;
}
function numberSep(value) {
return parseInt(value)
.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
If you want to see test this sample you will also need styling.
index.html
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/paging.css">
...
styles/paging.css
* {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
}
.section__title {
text-align: center;
}
.section__splitter {
position: relative;
width: 200px;
height: 1px;
background: #d6d6d6;
margin: 24px auto;
}
.section__splitter:after {
position: absolute;
top: -1px;
left: 75px;
content: '';
width: 50px;
height: 3px;
background: #f51c99;
}
.listing {
max-width: 290px;
margin: 0 auto 32px;
}
.listing__image {
width: 100%;
height: 180px;
background-size: cover;
background-position: center center;
}
.listing__title {
font-size: 18px;
margin: 8px 0 2px;
}
.listing__params {
font-size: 12px;
color: #cecece;
}
.listing__price {
color: #f51c99;
font-weight: bold;
}
.listing__splitter {
width: 100%;
height: 1px;
border-bottom: 1px dotted #cecece;
margin: 8px 0;
}
@media (min-width: 380px) {
.listing {
max-width: 350px;
}
.listing__image {
height: 190px;
}
}
@media (min-width: 420px) {
.listing {
max-width: 390px;
}
.listing__image {
height: 210px;
}
}
@media (min-width: 450px) {
.listing {
max-width: 420px;
}
.listing__image {
height: 240px;
}
}
@media (min-width: 768px) {
.listing {
max-width: none;
}
.listing__image {
height: 150px;
}
}
@media (min-width: 992px) {
.listing__image {
height: 180px;
}
}
@media (min-width: 1200px) {
.listing__image {
height: 220px;
}
}