Creating A Local Business Directory In Umbraco (Part Two)

This is the second instalment in this little series of Creating A Local Business Directory In Umbraco ( You can find part one here).  At the end of the last instalment we had our templates ready and were about to start building out the site - Here is where we were at (As I said in the first part I have added a few extras to the roadmap)

• Overview
• Setup (Local Development & Visual Studio)
• HTML / CSS / Templates
• Razor
• Existing Packages To Use
• Main Navigation
• DocTypes
• Main Category Navigation
• Sub Category
• Listing Pages
• Submission Form (Contour/API)
• Finish / Thoughts On Extra Features

Main Navigation

This one is a bit of a cheat really, as just as you get with XSLT files you also get some 'free' code examples of with Razor.  Just the same as with the XSLT, go to the developer section in your Umbraco admin but right click on the 'scripting files' folder - You will then be prompted by a pop up, select and name it as follows and click create

The result is a simple bit of Razor which will create your main navigation, it will display all pages on level 1 on the site and doesn't have 'umbracoNaviHide' ticked (This property is pre-added to all your pages via the Master doctype which you got in the first instalment)

** Sorry about the code just pasted in like this, LiveWriter cannot seem to handle Razor in code/pre blocks **

@inherits umbraco.MacroEngines.DynamicNodeContext
@{
  var level = String.IsNullOrEmpty(Parameter.Level) ? 1 : int.Parse(Parameter.Level);
  var ulClass = String.IsNullOrEmpty(Parameter.UlClass) ? "" : String.Format(" class=\"{0}\"", Parameter.UlClass);
  var parent = @Model.AncestorOrSelf(level);
  if (parent != null) {
    <ul@Html.Raw(ulClass)>
    <li><a href="/">Home</a></li>
    @foreach (var item in parent.Children.Where("Visible"))
    {
      var selected = Array.IndexOf(Model.Path.Split(','), item.Id.ToString()) >= 0 ? " class=\"selected\"" : "";
      <li@Html.Raw(selected)>
        <a href="@item.Url">@item.Name</a>
      </li>
      }
    </ul>
  }
}

Just for now there is a small change to the code which we'll add, under the '<ul@Html.Raw(ulClass)>' part of the code add the following and save the file

<li><a href="/">Home</a></li>

This will show a navigation button for the home page, and then show any other pages we decide to add throughout.

You now have a Razor file and macro ready to insert as your navigation, we'll add it to the site and make sure we see what we expect - Open up your 'Master' template in the settings section and find the code where it says 'Main Navigation Here' highlight this and delete it - Now click the 'Insert Macro' icon at the top of the screen and select your 'Navigation' macro.  This will now insert it into the template, and all you need to do is save the template now and view your site.

Now you have added a Macro and Razor file to your Umbraco template, I'm going to assume you are ok with this concept and will not be explaining it in such detail through out the next stages.

Doctypes

What we will do now is create the doctype's we are going to use throughout the site build, there are only 4 of them.

1. Home (Already done)
2. Text Page
3. Business Category
4. Business Listing

So all I need you to do is create the following DocTypes make sure you leave 'Create Matching Template' ticked AND inherit from the Master DocType

We'll sort the templates out afterwards.  *NOTE* Umbraco should do this anyway, but its good practice to make sure your DocType alias has no spaces - For example the Text Page doctype would have the following Name & Alias

I am going to assume all Alias's are like this throughout, so its quite important - Here are a list of the doctypes and the properties for each page, recreate the doctypes and properties based on these.

Text Page

Business Listing

Business Category

Home

Keep everything the same, just update the structure tab

That's it… Now we just need to sort the templates, luckily Umbraco makes it really easy to use Master templates. Open up the templates folder, and you should now have a tree structure like the below

So we need to nest the new templates under the Master template and add some default properties onto the page. We'll start with the Text Page and then do the same for each of the other templates.  Open up your Text Page template and you should see the below.

We need to inherit from the master template, and also make the properties show on the page - This is easily done, first thing delete everything in the file apart from line 1 (<%@ Master … ) and change the 'Master template' dropdown to select the 'Master' template and click the save button.

Once you have saved it, you can now click the 'Insert Content Area' Button at the top of the screen and you will get a pop up - Select 'ContentPlaceHolderDirectory'

Click insert and add it to the page, all we need to do now is set up the properties we added to the Text page so they will show, we'll add the following in-between the <asp:content> tags.

• mainHeading
• bodyText

To add a property click the 'Insert Umbraco Page Field' button at the top of the page and select and insert the above properties, after you have done this wrap the 'mainHeading' in a <h1> tag - So you will end up with the following on the page

Now we have done this we need to do the other templates, I'll assume now you know how to add content place holders and properties so will not go into as much detail for the rest of them - We'll just add all the different properties from each DocType into the templates, copy the below into your templates.

Business Category Template

Business Listing Template

And you should end up with your templates looking like so (You might need to refresh the nodes first, which you do by 'right clicking' on the 'Templates' folder and selecting 'Reload Nodes')

If they don't look like this after doing the refresh go back and double check everything, you have more than likely not inherited from the Master template on some of them.

Dummy Data

Now we have our DocTypes and templates sorted, we need to set up some dummy data just so when we create the next sets of navigation we can see stuff pulled through. You can create whatever Categories you want and business listings you want but I am going to do the following

• Four Main Categories
• Two Sub Categories
• A Couple Of Businesses (Under Category One)

But you can add whatever you want, be sure to fill in some data for the businesses and category so you can see what it looks like on the page - You can have a look at the pages by clicking on the node in the content section, going to properties and clicking on the 'link to document'

Now we have some dummy data we'll work on the navigation elements, first up the main categories navigation which sits on the left hand side of the site. This is going to be very similar to the main navigation we did at the start, but we need to put in an extra condition - It will do the following

• Pull through all documents on level 1 of the site
• Only get documents that are of the DocType 'BusinessCategory'
• Only get the above if 'umbracoNaviHide' isn't ticked

We could do this the same way as we did the main navigation in the backend of Umbraco, but for this one we'll do it in visual studio and create the Macro manually after its been copied across - Not for any particular reason, you could do it either way but if we do it via Visual Studio we could add the Razor file to source control and its just easier to write code in VS than the default code editor in Umbraco (IMO)

So fire up Visual Studio and create a razor file called 'MainCategoryNavigation' in the 'macroScripts' folder, and add in the following code which hopefully you can see does what we are trying to achieve in the above bullet points.

@inherits umbraco.MacroEngines.DynamicNodeContext
@{    
    var level = String.IsNullOrEmpty(Parameter.Level) ? 1 : int.Parse(Parameter.Level);
    var bCategories = @Model.AncestorOrSelf(level);

    if (bCategories != null) {
        <ul class="categorylist">
            @foreach (var cat in bCategories.Children.Where("nodeTypeAlias == \"BusinessCategory\"").Where("Visible").OrderBy("SortOrder"))
            {
                <li><a href="@cat.Url">@cat.Name</a></li>
            }
        </ul>
    }
}

Save the file and build your solution, this will copy the Razor file across to your Umbraco install - We now need to create a Macro to use the Razor file as it won't create a 'Macro' for the file automatically this way.  So in Developer section, Right Click on the Macro folder and create a new Macro called 'Main Category Navigation' and click create. Look down to where the drop down is labelled 'or script file' and select your Razor file which was copied over.

Save the Macro and now we need to insert it into our 'Master' template, so open up the 'Master' template and in the side nav find where it says 'Categories Here' delete this text and insert your 'Main Category Navigation' Macro and save the template (I'll assume now you know how to manually create a Macro from now on and will not go into as much detail in the later posts).

Browse to your home page and have a look what you have got… It should look like this.

Great, but we have one little problem… We have the categories showing on the left AND also in the main nav at the top.  So we need to modify the main navigation Razor file to NOT show pages that are of the type 'BusinessCategory' - We can easily do this by just taking the code from the 'Main Category Navigation' and implementing it into the main navigation code but just changing it slightly.  So open up the main navigation razor file and change the 'foreach' loop line to the following

@foreach (var item in parent.Children.Where("nodeTypeAlias != \"BusinessCategory\"").Where("Visible"))

That's it, reload the page and we should have just the business categories on the left and the Home button at the top.  You could maybe add an 'About' Text Page into the site so that is also in the main nav.

That's it for now, in the next post we'll move a little faster now I have got some of the basics out the way.