Intro

The Homeflow user profile system is mainly JavaScript based and is fully customisable and highly configurable for themes. Getting started with the default profile system is relatively easy. This section will guide you through what you can do.

Getting started

The user profile system consists of a number of pre-built templates that can be included in your theme. The first step is to include the default js_templates partials which contain the standard HTML for the blocks to be rendered:

 {% include 'layouts/js_templates' %}

The list of views are below. You can override each of the views that the JS renders by creating files of the same name in a layouts/js_templates folder in your theme:

  • js_templates/_profile.liquid
  • js_templates/_profile_account.liquid
  • js_templates/_profile_user_info.liquid
  • js_templates/_profile_forgotten_password.liquid
  • js_templates/_profile_saved_searches.liquid
  • js_templates/_profile_saved_properties.liquid
  • js_templates/_saved_properties.liquid
  • js_templates/_branch_map_pin.liquid
  • js_templates/_map_bubble_popup.liquid

If all as gone well you should be able to launch the user profile lightview by adding /#user on to your staging URL. By default the jQuery plugin Colorbox is used for the lightview based templates. You can download the raw source of the templates here.

Alternative user profile tech

As mentioned before, Colorbox is used by default. For rapid development, the default templates and Colorbox do just fine. If however, you wish to use alternative tech like Bootstrap modal, or some other responsive modal system, here’s how:

Firstly we need to define our modal container. If it was Bootstrap modal, it might look something like the code below (we’ve stripped some HTML for simplicity):

<div id="user_profile" class="modal fade modal-lg" role="dialog">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-body" id="profile-content"></div>
  </div>
 </div>
</div>

Then we need to define a couple of events. The first is user_view_render_handler_render. This will be kicked any time the user box needs show or update itself. This can happen multiple times during page load:

Ctesius.registerEvent('user_view_render_handler_render', function(html, user, id){
 $('#profile-content').html(html)
 $('#user_profile').modal('show');
});

When the profile system needs to close (e.g the user has logged out), this event will be fired:

Ctesius.registerEvent('user_view_render_handler_close', function(html, user, id){
 $('#profile-content').html('')
 $('#user_profile').modal('hide');
});

As you can see, if you elect to use alternative profile tech, you must make sure the HTML gets appended, as well show and hide the modal when required.

Download the core templates

Download the core templates here.

Paired Househunting

Please note paired househunting is in Alpha development. This functionality is subject to change and also needs to be enabled by Homeflow.

Users can belong to multiple groups of shared house hunters.

One could typically call the users groups with something like:

{% for group in user.groups %}
  {% for user in group.users %}
    {{ user.first_name }}
  {% endfor %}
{% endfor %}

Users

Returns: An array of users within the group along with: [ID, email, first_name, last_name, address]

Searches

Returns: An array of shared searches for the group along with: [ID, display_name]

Properties

Returns: An array of shared properties for the group along with: [ID, address, postcode, price, description]

Example Output

An example JSON output for user groups can be found at the following URL:

http://index1.test.homeflow.co.uk/sites/10497/groups/531134?api_key=77467477edfd2689cd77796a2c4b019f