Many of the concepts we have used on the results partial, property small and elsewhere in the documentation get used on the property show page as well. The goal of the show page is to show all of the property’s photos, videos, its full description, floor plans, brochures, Energy Performance Certificates (EPC) and its location on a map (including a Street view), then channel all of this into a telephone or email lead to the agency.
Many developers employ the tabbing system so the user can toggle through the different tabs that contain a full description, floor plans, EPC graphs and so on. Active and hidden classes are applied via the core app.
<li><a href="#tabs/home" id="tab_home" class="selected">Photos</a></li>
<li><a href="#tabs/details" id="tab_details">Full details</a></li>
<li><a href="#tabs/map" id="tab_map">Map</a></li>
<li><a href="#tabs/satellite" id="tab_satellite">Satellite</a></li><div id="togglable_home" class="togglable_area">
</div>
<div id="togglable_details" class="togglable_area hidden">
</div>
<div id="togglable_map" class="togglable_area hidden">
</div>
<div id="togglable_satellite" class="togglable_area hidden">
</div>Your first requirement is likely to be an output of the property’s address, or at least part of it, and its price in a title:
<h1>{{property.display_address}}</h1>
<h2>{{property.price}}</h2>Next you will probably want to output the photos of the property. Many developers use jQuery type photo sliders for displaying and navigating through the photos. Thankfully, by using the photos loop, this is relatively easy to achieve:
{% for photo in property.photos %}
<img src="{{ photo | url_for_property_photo : "410x308"}}" height="308" width="410" />
{% endfor %}And if you just wanted the property’s main photo:
<img src="{{property.main_photo | url_for_property_photo : "410x308"}}" height="308" width="410" />Next we might want to output the short description for the property:
{{property.short_description | truncate: 900}}Then, to get the property’s status (Sold, Let, etc), we can use:
<h4>{{property.status}}</h4>Email type leads are submitted to Homeflow and then on to the agent by ubiquitous web forms. Here’s a simplified version:
<form action="/properties/{{property.property_id}}/{{property.primary_channel}}/leads" method="post">
<div id='form_error'></div>
<label class="text" for="firstname">First name</label>
<input id="firstname" name="lead_client[first_name]" type="text">
<label class="text" for="surname">Last name</label>
<input id="surname" name="lead_client[last_name]" type="text">
<label class="text" for="email">Email</label>
<input id="email" name="lead_client[email]" type="email">
<label class="text" for="telephone">Telephone</label>
<input id="telephone" name="lead_client[tel_home]" type="text">
<label class="text" for="message">Message</label>
<textarea id="message" name="lead[message]" rows="3"></textarea>
<button type="submit">Send enquiry</button>
</form>The form error div near the top is reserved for any lead sending errors. Once a lead is sent, a flash message can be displayed. We have a whole array of flash notices that are used depending on the response back from the server and to display the notices, all you need to do is and the alert location div to your application.liquid or on the subject page itself:
<div id='alert_location'></div>Homeflow supports video across all themes and we provide handy helpers to extract and embed property videos into your show page without too much fuss. Note that the video URL needs to be in an incoming property feed for this to operate.
If you just want the video URL that’s supplied in the feed, you can simply use:
{{ property.video_url }}As it stands this will fish out a YouTube or Vimeo like URL for you. This output can be wrapped in an if statement should you want to check it’s there before outputting.
Going a step further, if you would like to embed the video into the page, you can make use of one of our helper methods. These methods have an added benefit in that they can take non typical embed URLs like a YouTube ‘watch’ link or similar Vimeo link and turn it to an embed type link. The method below will create the iframe code for you and insert the video embed link:
{{ property.video_url | video_embed : 640, 390, 'iframe' }}If you would rather just the link, but you’d like it to be the embed style for a lightbox, use this:
{{ property.video_url | video_embed : 640, 390, 'lightbox' }}The method always expects some dimensions, even though they’re not actually used for the lightbox style URL output - just add some arbitrary dimensions.
At the time of writing the similar properties function is generally used on a property show page. It takes the current property as an argument and calls a helper method called similar properties which fetches nearby properties that are in a similar price bracket. It is a useful function to pique the user’s interest and achieve more property hits in a given session.
{% assign similar_properties = property | similar_properties %}
{% if similar_properties.first %}
<h2>Similar properties</h2>
{% for property in similar_properties limit: 2 %}
{% include 'properties/property_small' %}
{% endfor %}
{% endif %}Similar to the featured properties seen before, if you would like to utilise the shortlist function on the similar properties output, we need to add a snippet of JavaScript to the page:
$(document).ready(function(){
Ctesius.appendConfig('properties', {% include_as_json properties/properties_list
data: similar_properties target: properties %}.properties);
Ctesius.bootPropertiesCollection(Ctesius.getConfig('properties'));
});Properties can be shared on the Homeflow platform. All you have to do is include the following snippet:
{% include 'user/send_to_friend' %}This will include the default send to friend colorbox modal code. This will work out of the box if you have included the Homeflow application.js in your layout. Alternatively if you want to override or customize this form, add a partial of is your user folder called _send_to_a_friend.liquid and add:
<div class="modal" id="send_to_friend_modal" style="display:none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Share '{{ property.road_name }}' with a friend</h3>
</div>
<div class="modal-body">
<form action="/user/send_to_friend" method="post">
<div class="control-group">
<label class="text" for="mailer[from_name]">Your name</label>
<input id="mailer[from_name]" name="mailer[from_name]" type="text">
<label class="text" for="mailer[recipient_name]">Your friend's name</label>
<input id="mailer[recipient_name]" name="mailer[recipient_name]" type="text">
</div>
<div class="control-group">
<label class="text" for="mailer[from_email]">Your email</label>
<input id="mailer[from_email]" name="mailer[from_email]" type="email">
<label class="text" for="mailer[recipient_email]">Your friend's email</label>
<input id="mailer[recipient_email]" name="mailer[recipient_email]" type="text">
</div>
<div class="control-group">
<label class="text" for="mailer[message]">Message</label>
<textarea id="mailer[message]" name="mailer[message]" rows="3"></textarea>
</div>
<input type="hidden" name="mailer[property_id]" value="{{ property.property_id }}">
<input type="hidden" name="mailer[channel]" value="{{ current_channel }}">
<div id="additionals">
<input type="text" name="mailer[body]" value="" />
</div>
<div class="submit">
<input name="submit" type="submit" value="SEND">
</div>
</form>
</div>
</div>Here is an example using Bootstrap’s built-in CSS modal and form classes:
<div id="send_to_friend_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2>Share '{{ property.road_name }}' with a friend</h2>
</div>
<div class="modal-body">
<form action="/user/send_to_friend" method="post">
<fieldset>
<label for="mailer[from_name]">Your name</label>
<div class="form-control-container">
<input id="mailer[from_name]" name="mailer[from_name]" type="text" class="form-control">
</div>
</fieldset>
<fieldset>
<label for="mailer[recipient_name]">Your friend's name</label>
<div class="form-control-container">
<input id="mailer[recipient_name]" name="mailer[recipient_name]" type="text" class="form-control">
</div>
</fieldset>
<fieldset>
<label for="mailer[from_email]">Your email</label>
<div class="form-control-container">
<input id="mailer[from_email]" name="mailer[from_email]" type="email" class="form-control">
</div>
</fieldset>
<fieldset>
<label for="mailer[recipient_email]">Your friend's email</label>
<div class="form-control-container">
<input id="mailer[recipient_email]" name="mailer[recipient_email]" type="text" class="form-control">
</div>
</fieldset>
<fieldset>
<label for="mailer[message]">Message</label>
<div class="form-control-container">
<textarea id="mailer[message]" name="mailer[message]" rows="3" class="form-control"></textarea>
</div>
</fieldset>
<input type="hidden" name="mailer[property_id]" value="{{ property.property_id }}">
<input type="hidden" name="mailer[channel]" value="{{ current_channel }}">
<div id="additionals">
<input type="text" name="mailer[body]" value="" />
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
</div>The next and previous property functions allow the user to cycle through a set of search results, either using the search the user performed to get to the show page, or implying the search based on the details of the property the user is on.
To get up and running, add a partial template under js_templates called _next_prev_recent_search.liquid In it, add and modify the following template:
{% raw %}
<script id="next_and_previous_property_template" type="text/liquid">
<div class="col-4">
{% if previous_property %}
<a class="previous-prop" href="{{ previous_property.property_url }}">Previous Property</a>
{% endif %}
{% if next_property %}
<a class="next-prop" href="{{ next_property.property_url }}">Next property</a>
{% endif %}
</div>
</script>
{% endraw %}Then include it in application.liquid:
{% include 'js_templates/next_prev_recent_search' %}Then on your property show page, wherever you want the template to render, add:
<div id="next_and_previous_property_view"></div>You will need to turn the supporting functionality in your theme by adding the following Ctesius config setting (as with other features).
Ctesius.addConfig('enable_user_history', true);The most recent search template lives in the same template as the next and previous property template. It is a useful function that gets the search the user carried out to get to the show page. Failing that, it will try and imply a search.
{% raw %}
<script id="most_recent_search_template" type="text/liquid">
<div class="col-8"><a class="back" href="{{search.link}}">Back to search results </a></div>
</script>
{% endraw %}To output it to your show page, add the following div:
<div id="most_recent_search_view"></div>Printing using our core print page and stylesheet is simple to get going. Simply add a print anchor to your property show page and point its href to {{property | url_for_property}}/print. If you need to modify the template, add a show_print.liquid (no preceeding underscore needed) in your properties directory, then ask a member of Homeflow to drop the template in. You can also create one from scratch if you’d rather.
Developers have complete control of the text and rendering of the notification to the user. Here’s one such example of how we accomplished it using Bootstrap modal.
Firstly on the results page and the show page, a good practice is to check the channel before outputting the modal block:
{% if current_channel.name == 'lettings' %}
<div id="fees" class="modal fade" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Fees Apply</h4>
</div>
<p>
{% content_block fee_text %}
{{content_block}}
{% endcontent_block %}
</p>
</div>
{% endif %}You will have noted here that we’re using a content block to manage the text of the fees popup - this makes sense, since the wording will vary from agent to agent.
For each property record on the results page and on the show page, you would add something like the following to highlight that fees apply and to let the user click to reveal the modal:
{% if property.primary_channel == 'lettings' %}
<a class="fees" data-toggle="modal" data-target="#fees">* Fees Apply</a>
{% endif %}Development plots work in the same way as normal property show pages and they have access to all the same property information.
You also have access to the properties child_properties. This returns an array with any child_properties that are associated with that development. Each child has the following attributes:
Returns: The price of the property as an Integer
Returns: The property count as an Integer
Returns: The number of bathrooms as an integer
Returns: The URL path of the primary photo as a String. This will need to be appended to a MrRichard URL.
Returns: The Homeflow property_id as an Integer
Returns: The name of the type of the property as a String
You can loop through the child_properties like so:
{% if property.child_properties.first %}
{% for child_property in property.child_properties %}
Price is: £{{child_property.price}}
{% endfor %}
{% endif %}