Display ecom groups in top navigation

Gaëtan Di Caro

Posted on 08/05/2018 09:00:13

Hello,

The solution is probably simple, but I'm scratching my head on how to do this properly...

I have a shop where I want some of the top groups (let's say fruits, vegetables and nuts) to appear in the top navigation, i.e :

HOME - FRUITS - VEGETABLES - NUTS - ABOUT - CONTACT

THere are other top groups but they are not meant to be navigated.

When you click on FRUITS/VEGETABLES/NUTS, you get to a product catalog page where you can see the subgroups of the group you have selected (and not the other ones). For example, if I click on "fruits", I should go to mywebsite.com/fruits, and see in my left navigation the subgroups "apples", "pears" and "bananas" (and nothing else).

How can I do this ?

Thanks

Replies

Adrian Ursu

Posted on 08/05/2018 10:17:36

Hi,

If you plan on having a friendly link like mysite.com/fruits, you have to create a page for every top category.

That's because the links are always a combination of Page and Group.

Assuming you have a page called Catalog where you place the ProductCatalog module and activate the Ecom navigation on this page, you will get a link like this: mysite.com/catalog/fruits

If the link is not an issue, you will probably have to mess with the XSLT navigation and apply the navigation template to Page/Page instead of Page (I hope I am not very wrong about this).

Adrian

Gaëtan Di Caro

Posted on 08/05/2018 10:24:32

Thanks Adrian.

It's what I have done now, but the issue is that I can't just select the top group in the page navigation. Let's say I make a page called "fruits", and in there I set the navigation to the selected group "Fruits". The url will then be mysite.com/fruits, but I still need another step to see the subcategories (mysite.com/fruits/fruits), which isn't very practical nor pretty.

Of course I can simply select all the subgroups manually, but I'd like to avoid that, as the ecom content comes from integration.

Adrian Ursu

Posted on 08/05/2018 10:32:06

I see your problem.

If you select Fruits in the ecom navigation, all your links will look like mysite.com/fruits/fruits/subcategory which is definitely undesired.

The only alternative I see now (but maybe DW team has other opinion) is to go back to the standard structure of the navigation and select top level categories in navigation and adjust the XSLT file.

You will still have the links containing the page name but at least is preferable to having a duplicate category name in URL.

I am sorry for not having a better alternative.
Adrian

Gaëtan Di Caro

Posted on 08/05/2018 10:36:36

Thanks Adrian.

Adrian Ursu

Posted on 08/05/2018 11:06:11

A while ago this was handled by the GroupList template. I have not tried it recently.

If your top group does not have products directly assigned to it, it should trigger the use of GroupList template.

In some older versions, that trigger did not work anymore and we had to use the "No Products found" template.
Normally, if you have the GroupID in the URL, you can get the Group details with the API (if the template is not triggered).

I would say that the expected behavior would be to have a catalog page, assign a product catalog to it and set the top level groups in Ecom Navigation.

You will get a mysite.com/catalog/fruits kind of link but it is better than having mysite.com/fruits/fruits

On the product Catalog module, the Group List template should handle displaying the subgroups and the top level category details (Image and description).

You might also get the information about top level groups (not 100% sure about that) in all subgroups.

This is the approach I would use.

Maybe somebody else has a better input on it.

Adrian

Gaëtan Di Caro

Posted on 08/05/2018 11:12:19

I deleted that part of my answer as I found that I just needed to select the top group in the product catalog (I hadn't done that, it was set to "Index"). Then I have the information I need for the top group in the "Groups" loop, and the subgroups in "NextLevelGroups" loop. That doesn't completely solve my issue with the duplicate group name in the url, but for nwo I have opted to select the subgroups manually in the page navigation. I'm still open for a better solution though, as it's not very practical

Hans Ravnsfjall

Posted on 15/10/2021 09:29:57

I have this exact problem right now.

If you want a good URL structurrre - Is there still no better way of solving this, than creating the pages manually one by one and attaching product cataloge to every page?

/Hans

Nicolai Pedersen

Posted on 15/10/2021 12:00:03

You would easily be able to create template that takes level 2 nodes from the products and render them in the top. Either just all top groups from a given shop, the ones selected on the navigation provider or by adding a custom field on the ecom group telling if it should be in top or not.

Normally you would do something like this:

<ul>
    @foreach (var node in Model.Nodes)
    {
        <li>
            <a href="@node.Link">@node.Name</a>
            if(node.Nodes.Any()){
                //There are subnodes
                <ul>
                    @foreach (var subnode in node.Nodes){
                        <li><a href="@subnode.Link">@subnode.Name</a></li>
                    }
                </ul>
            }
        </li>
    }
</ul>

Instead do something like this:

<ul>
    @*Loop root nodes of this navigation*@
    <li>
    @foreach (var node in Model.Nodes)
    {
        var page = Dynamicweb.Services.Pages.GetPage(node.PageId);
        if (page.NavigationSettings is object && page.NavigationSettings.UseEcomGroups && node.Nodes is object && node.Nodes.Any()){
            //This is a root node with ecommerce navigation attached and it has subnodes
            //Do not render the node it self, but render the nodes under this node on the top level
            //<a href="@node.Link">@node.Name</a> here would render the page "Products" in the top level, but it is skipped and we take the subnodes instead
            foreach(var subnode in node.Nodes){
                <a href="@subnode.Link">@subnode.Name</a>  //This would bi Bikes, Helmets, Lights and other toplevel ecommerce groups.  
            }
        }
        else{
            <a href="@node.Link">@node.Name</a>
        }
    }
    </li>
</ul>

You must be logged in to post in the forum

Developer forum

Display ecom groups in top navigation

Replies