Hi Lou,

Whilst there are a packages in Umbraco there's not the depth that you might be used to coming from Wordpress. Most of the sort of functionality you're talking about would be coded in either Partial View Macros, on the template itself (not ideal) or via MVC.

Try working through the Creating a Basic Site tutorial. If that makes sense then your next step will probably be to create a PV Macro that looks for a url variable (GET - like how your example site works) or a post variable and only outputs the tours that match the selection. So your dropdown form will send the user to a new page called "searchtours" or something similar and this will contain the Macro to do the magic.

Use the child pages from a changeable source snippet macro sample as a starting point

Then you need get the url variable e.g.

// get tourtype from url e.g. www.mydomain.com/searchtours?TourType=Theatre string tourType = Request.QueryString["TourType"] ?? string.Empty;

Then you need to filter the child nodes.

It can get quite involved depending on how "modern" you want it to be - for example paging of the results (which your example site has) or loading the results without reloading the page (AJAX) on drop down change.

HTH

Steve

Hi Steve,

Thanks for your reply and apologies for the delayed response. At the moment I only get 1 web dev day a week although I'm working to free up more time. I've been given another 'urgent' project on wordpress so that has been taking up my time recently!

I did do that creating a basic site tutorial.. that is how I got the list of tours to show :)

Are there any tuts out there you can recommend for the PV macros? I think I get bamboozled by how complex they look and then struggle to pick out what does what, if you know what I mean!

I will be signing up for umbraco TV soon.

I've got 'Tours' (displays list of all tours) and then 'Tour Page' (layout for displaying actual tour).

What would be the best way to define my 'tour type'? Can I just add another property to the 'Tour Page' document type? If so, could I do it with the 'checkbox list' as a tour can have more than 1 type tag - could be gardens and stately homes, for example.

I am planning to have the filter box only on the 'Tours' (list tours) page so initially it will display all and then user can select a 'type' from a dropdown box to filter what is displayed. Not fussed about AJAX at the moment. I'm already kinda trying to run before I can walk so no need to over complicate things.

Many thanks again for your reply and help,

Lou

Been doing some more work on this site and still doing my head in that I can't figure out how to get this filter to work :(

So I have my list of all of my tours displayed on this url http://newsite.lhts.com/tours

Which uses a PV macro from the 'creating a basic site' tut (removed most of my styling):

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@{ var selection = CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc"); }

@foreach (var item in selection)
{

<a href="@item.Url"><img src="@Umbraco.Media(@item.MainTourImage).umbracoFile" width="100%" height="100%"></a>

<a href="@item.Url"><h3 style="margin:0px;">@item.Name</h3></a> 
@Umbraco.Truncate(@item.introAbout,200) 

<a href="@item.Url" >Read More..</a>

    }

And I have added categories to the tours using the checkbox list data type

But I cannot figure out how to get the category to pass through the url.

Tried adding a child page to 'tours' called 'Glorious Gardens' so the url would be /tours/glorious-gardens with the hope that I could find a way of displaying a list of all of the pages that have that category selected.. but that just stopped the above macro from working.

Am I going about it the wrong way? Some tours will have more than 1 category - will that be a problem?

Being so new to umbraco I think the problem is that it is so vast it is hard to know which way is the right way to achieve things. I've been watching some videos on umbraco.tv but not come across anything I think helps directly with this problem.

Grateful for any help and guidance.

Lou

Hi Louise,

Sorry for not replying. I wanted to write a full reply to steer you in the right direction but it's taken time to find the time!

I think you're heading the right direction - or at least exploring the many different ways to do this. There's actually a lot to think about when you start to structure a site like this.

I should imagine that the tour categories should be "landing pages" and have a nice URL for SEO goodness as well as the tour listing page you have. For that reason I've knocked together a quick solution which is how I would probably approach this.

Essentially it's like you've done but with the following structure:

This way there is a page www.mytours.com/categories/sights-and-sounds

This will list all the tours that you've "picked" this category from. To do this I've added a Multi-node tree picker called "category" to the tour document type.

Now your editors can add categories (just like they would add tours) and you can have a one tour to many category relationship.

To make this work there needs to be a macro to list the tours that have this category picked.. something like:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
@*
    Macro to list all tours which match the category.
    This is a simple example which assumes this macro is on a page that is a category. 
    You might want to create one which allows you pass as a parameter the category ID to use on other pages? 
*@
@{
    // the category id is the category content node's ID (e.g. this page's ID) you could pass this as a parameter to list tours elsewhere by category
    int categoryId = Model.Content.Id;
    int toursContainerId = 1067;        // set this to match the folder ID that holds all tours                                
    var toursContainer = Umbraco.TypedContent(toursContainerId);

    if (toursContainer != null)
    {
        // here's a hard to read Linq filter - but it checks there is a value for the picker "categories" and then splits it and checks if the id is in there 
        // (e.g. the category is selected)
        var tours = toursContainer.Descendants("tour").Where(
            x => x.HasValue("categories") &&
            (x.GetPropertyValue<string>("categories")).Split(',').Contains(categoryId.ToString())
            ).OrderBy(x => x.Name);

        // then loops through them.
        if (tours.Any())
        {
            <div>
                @foreach (var curTour in tours)
                {
                    <h2>
                        <a href="@curTour.Url">@curTour.Name</a>
                    </h2>
                    @(curTour.GetPropertyValue<HtmlString>("bodyText"))}
            </div>
        }
    }
}

Add this macro to the TourCategory template.

To make the dropdown list work you need a macro that gets the categories and you could either have it post to the tours page and filter there or I've made it use a bit of Javascript to redirect to the right tour page (and I've added a non-js fall back of a list of category hyperlinks too which might be overkill but good for SEO*).

Add the categoryFilter macro to your master template...

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
@*
    Macro to list all tours which match the category.
    This is a simple example which assumes this macro is on a page that is a category. 
    You might want to create one whcih allows you pass as a parameter the category ID to use on other pages? 
*@
@{
    // the category id is the category ID (e.g. this page's ID) you could pass this as a parameter to use this elsewhere
    int categoryId = Model.Content.Id;
    int toursContainerId = 1067;        // set this to match the folder ID that holds all tours                                
    var toursContainer = Umbraco.TypedContent(toursContainerId);

    if (toursContainer != null)
    {
        // here's a hard to read Linq filter - but it checks there is a value for the picker "categories" and then splits it and checks if the id is in there 
        // (e.g. the category is selected)
        var tours = toursContainer.Descendants("tour").Where(
            x => x.HasValue("categories") &&
            (x.GetPropertyValue<string>("categories")).Split(',').Contains(categoryId.ToString())
            ).OrderBy(x => x.Name);

        // then loops through them.
        if (tours.Any())
        {
            <div>
                @foreach (var curTour in tours)
                {
                    <h2>
                        <a href="@curTour.Url">@curTour.Name</a>
                    </h2>
                    @(curTour.GetPropertyValue<HtmlString>("bodyText"))}
            </div>
        }
    }
}

Here's the JS to make that work

    $(document).ready(function () {

    // non js users - this is probably overkill
    $('.js-enabled').show();
    $('.non-js').hide();

    $('#category-select').change(function () {
        var url = $(this).find(':selected').data('url');
        if (url != '#') {
            window.location.href = $(this).find(':selected').data('url');
        }
    });
});

' * All SEO comments are subjective and my own opinion - it leads to arguments ;)

Hope that helps

Steve

Hi,

Might be easier to fire up the solution... I've zipped it up and dropped it here.

Umbraco user [email protected] password123

Hope it's useful

Kind regards

Steve

Hi Steve,

Wow thank you for such in depth help!!!

I managed to get it to work with a bullet list - was under pressure to complete and the site is now live - www.lhts.com ( still tweaks to be made though :) )

I will have to get a new test site set up to try out what you have explained here. Very kind of you to have put the time in to help me on this, you are a diamond.

Thank you again

Lou

is working on a reply...