Nodes

Intro

Homeflow uses the concept of nodes to connect different data objects within Homeflow and can be used on almost any page on a Homeflow website.

What is a node

CMS pages and other flavours of CMS content continue to grow in complexity. This has been driven by a wide range of requirements from both agents and end users. In order to overcome this problem, we have come up with the concept of nodes.

A node is a generic object (usually a page) that can be attached to multiple CMS data objects. For this example, we will be thinking of a Node as a Location Guide. We can then attach any data object within Homeflow such as a Branch or a Property to a node. These are known as the node items. This gives the node great power as they have access to a wide range of data within the system. For Location Guides, a large amount of rich CMS data you can be rendered on a Location Guide page.

Adding a node

To set up a new node, log in to your logos admin panel using your agency login details at:

:agency_name.content.homeflow.co.uk

You can now see ‘Nodes’ in the navigation menu. In this section you can add nodes with the ‘New node’ button. You will need to add a title and a slug for the node (this is the URL path). Currently we only support LocationGuide’s as node types.

Once you have created your node you can start adding node items. Click the ‘Node items’ tab and select a type to add your first node item.

You will need to add a node item name and make the appropriate selection for the node item. For example if you chose content chunk, then you will need to pick a content chunk, or if you chose an input such as property or branch, then you will need to start entering the name for the dropdown to appear for selection.

Rendering nodes to a page

You can access the nodes bound to agencies, branches or locations by using the selected_by helper.

    {% assign hf_nodes = agency.nodes | selected_by :  'slug' , 'my_cool_node_slug' %}

This will return an array of nodes with the slug ‘my_cool_node_slug’.

You can also select these by their node_type (as set in the backend) like so:

    {% assign agency_nodes = agency.nodes | selected_by: "node_type", "auction"  %}

You can then iterate through this array and access the node and its associated node items.

  {% for hf_node in hf_nodes %}
  ...

Please note, it is important to assign hf_node as the loop variable as the underlying code searches for this variable when accessing the node data.

Node items for a node are flexible and powerful and you can use them anywhere on the page. Node items are returned in an array like structure from the node drop and so can be searched and filtered using standard liquid filters.

For example, here we get out all node items with the name of ‘region_page_text’

    {% with_node hf_node, name: region_page_text %}
      {% for node_item in node_items %}
        ...

Each node item has the following fields:

name, the name as given for this node item in the CMS
type, the type of node object
object, the actual node object - could be a Branch, a Location, and Image

And here we get all nodes of type ‘Branch’.

  {% with_node hf_node, type: Branch %}
    {% for node_item in node_items %}
    ...

Property results location blocks

In this example we can search the nodes for the location page and return all of the node items for that node. So this means for a results location page, we can return content such as local branch information, content_chunks, properties and more for the area guide. The location must be assigned to the node in the backend before the location node can be queried.

Branch node:

<div class="node">
 {% with_node hf_node, type: branch %}
  {% for node_item in node_items %}
   Branch name is: {{node_item.name}}</br>
   ...
  {% endfor %}
 {% endwith_node %}
</div>

Site content chunk node:

<div class="node">
 {% with_node hf_node, type: sitecontentchunk %}
  {% for node_item in node_items %}
   {{node_item.content}}
  {% endfor %}
 {% endwith_node %}
</div>

Property node:

<div class="node">
 {% with_node hf_node, type: property %}
  {% for node_item in node_items %}
   {{node_item.display_address}}
  {% endfor %}
 {% endwith_node %}
</div>

If you want to you want grab a specific node by slug, you can use the following assign statement, then use the blocks above:

You need only assign the node once to the slug if using multiple blocks on a page:

{% assign hf_node = 'slug-name' | location_node_by_slug %}

Don’t forget that node items have access to the node type’s drop methods. For example, the property drop methods can be found here.

Property pages

Any properties that are associated with nodes can be extracted; either directly by using the slug of the node, or by looping through all the nodes that have the property attached. This means that property detail pages can find attached Location Guides and pull out any other node item associated with that Location Guide, such as a SiteContentChunk, a Branch and more.

To directly grab a node by slug name, you would do the following:

{% assign hf_node = 'slug-name' | property_node_by_slug %}
<h2>Found node from location then link to branch</h2>
<div class="node">
 {% with_node hf_node, type: branch %}
  {% for node_item in node_items %}
   Branch name is: {{node_item.name}}</br>
  {% endfor %}
 {% endwith_node %}
</div>

Or to loop through all nodes that are attached to a property: