To retrieve everything related to a branch, to perform branch searches and generally build the template up, we need to work in our branches folder. Let’s start with the index file.
A branches index route would simply be: http://www.agency_domain.com/branches. On our index page we can add the following code:
{% if branches != empty %}
{% for branch in branches %}
{% include "branches/branch_small" %}
{% endfor %}
{% endif %}This construct is exactly the same as a properties loop seen before except we are referencing our branches collection as well as including a branch_small partial for each returned branch. A branch_small might look something like:
<div class="branch">
{% if branch.agency.portal_logo %}
<img src="{{ branch.agency.portal_logo | url_for_agency_logo : "150!" }}" />
{% else %}
<img src="{{ 'awaiting-image.png' | theme_image_url }}" />
{% endif %}
<div class="details">
<h3>
<a href="{{ branch | url_for_branch}}">{{branch.name}} branch</a>
</h3>
<p class="content">
{{branch.description | strip_tags | truncate : 250}}
</p>
<p>
<a href="{{ branch | url_for_branch}}">More Information</a>
</p>
</div>
</div>If you need to manually set the zoom level of the branch map you can do so with the following snippet (replace 15 with any fallback zoom level you wish):
Ctesius.addConfig('custom_map_zoom', {% if agency.preferences.google_maps_branch_zoom_level %}{{agency.preferences.google_maps_branch_zoom_level}}{% else %}15{% endif %});Note: You will also need to specify the map pan co-ordinates for the custom zoom level to work
Ctesius.addConfig('custom_map_pan_coords', [ 50.739, -4.0]);
Ctesius.addConfig('custom_map_zoom' ...If you’re building a portal or larger agency theme, you will pleased to know that users can search for your branches using our geo location database. This comes complete with a handy AJAX style auto suggest location based on the town or city the user enters. To get up and running, first we need to add our form:
<form action="/branches" id="search" method="get">
<input type="text" name="location" id="location" class="autocomplete_location">
<input type='hidden' name='place_id' value='{{place_id}}' class='autocomplete_location_result' />
<button value="Search" type="submit"></button>
</form>Next where you branch results need to be, we have:
{% if branches != empty %}
{% for branch in branches %}
{% include 'branches/branch_small' %}
{% endfor %}
{% else %}
<h1>Sorry, no branches were found.</h1>
{% endif %}The output here will be an index of branches, but if we submit our form with a location, our branches controller will go off, fetch the results and display them in place of the index results.
Much like we saw earlier in the documentation with property results, it’s useful to output some titles and especially useful to output pagination if the branch results are on several pages. There’s a number of ways that you can deal with titles - here’s one such example:
{% if location %}
{% if location.name != ''%}Branches in {{ location.name }}{% if county %}, {{county.name}}{% endif %}{% endif %}
{% elsif county %}
Branches in {{ county.name }}
{% elsif postcode %}
Branches in {{ postcode.postcode }}
{% else %}
Branches Index
{% endif %}The branches index results comes loaded with the same pagination figures and options we saw in the property results earlier. Here’s an example construct:
Page {{pagination.current_page}} of
{% if pagination.has_next_page %}
{{pagination.total_count}}
{% else %}
{{pagination.current_page}}
{% endif %}<br>
{% if pagination.has_prev_page %}
<a href="{{pagination.previous_page_link}}">« Previous page</a>
{% endif %}
{% if pagination.has_prev_page and pagination.has_next_page %}
-
{% endif %}
{% if pagination.has_next_page %}
<a href="{{pagination.next_page_link}}">Next page »</a>
{% endif %}This might output something like:
Page 2 of 178
« Previous page - Next page »By running various IF checks, we can essentially figure out whether there’s a next and/or previous page (for example) and format the output accordingly.
Wherever we have a Liquid tag that looks like {{ branch | url_for_branch}} or if the branch URL is called, the branch show page will get called into action. As with all of the subjects, the branch show page is simply titled show.liquid and lives in the branches folder.
The branch show page supports many of the things we saw on the property show page. To get the branch name we use the branch drop and name: {{branch.name}}. Moving on, we can then fetch the branch description:
{% if branch.description_with_agency_fallback %}
<p>
{{branch.description_with_agency_fallback | strip_html}}
</p>
{% endif %}Ff you wanted to display some staff profiles with links to full profiles, you could use something like:
{% unless branch.staff_profiles.size == 0 &}
<div class="sm_staff_gallery">
{% unless branch.staff_profiles.size == 0 &}
<div class="sm_staff_gallery">
{% for staff_member in branch.staff_profiles limit:6 %}
{% if staff_member.avatar %}
<a href="{{ staff_member | url_for_staff_member}}" title="{{staff_member.name}}">
<img src="{{ staff_member.avatar | url_for_staff_profile_avatar : "40x40" }}" title="{{staff_member.name}}">
</a>
{% else %}
<a href="{{ staff_member | url_for_staff_member}}" title="{{staff_member.name}}">
<img src="/liquid_assets/images/sp.jpg" height="40" width="40" title="{{staff_member.name}}">
</a>
{% endif %}
{% endfor %}
</div>
{% endunless %}#####Map Zoom levels If you need to manually set the zoom level of the branch map you can do so with the following snippet (replace 15 with any fallback zoom level you wish):
Ctesius.addConfig('custom_map_zoom', {% if agency.preferences.google_maps_branch_zoom_level %}{{agency.preferences.google_maps_branch_zoom_level}}{% else %}15{% endif %});Note: You will also need to specify the map pan co-ordinates for the custom zoom level to work
Ctesius.addConfig('custom_map_pan_coords', [ 50.739, -4.0]);
Ctesius.addConfig('custom_map_zoom' ...The branch properties page is one where we can thankfully reuse our property loops and pagination figures as seen on the property results. If you would like to display all properties that belong to a branch with pagination, we’ll need a properties.liquid file within the branches folder. In it, add the path to your search results:
{% include 'property_search/results' %}We can then link to the branch properties page using the following;
<a href="{{branch | url_for_branch }}/sales">See all {{branch.name}} sales</a>
<a href="{{branch | url_for_branch }}/lettings">See all {{branch.name}} lettings</a>Here’s what a togglable sales tab and recent branch sales function looks like:
{% if branch.recent_sales_properties != empty %}
<script>
{% assign properties = branch.recent_sales_properties %}
sales_property_for_config = {% include_as_json properties/properties_list %}.properties
</script>
<div id="togglable_sales" class="togglable_area clearfix hidden">
<h2>Latest sale listings for {{branch.name}}</h2>
{% for property in branch.recent_sales_properties limit: 20 %}
{% include "properties/property_small" %}
{% endfor %}
</div>
{% endif %}To get this up and running for lettings, just substitute any reference to sales for lettings.