Documentation

Ucommerce includes full API reference documentation and lots of helpful articles to help you build your e-commerce site as effortlessly as possible.

Topics Payment Providers
v7.18

Extend Navigation Trees

After reading this article, you should be able to hook your own nodes into the Ucommerce tree across all supported CMSs.

Hook a Simple Tree Node Into the Tree

This section will teach you how to create the necessary components for adding a new tree node called "About" into the settings section of the tree.

Create an Implementation of ITreeContentProvider

We will start by creating a new class called "AboutNodeProvider" and implement the interface 'Ucommerce.Tree.ITreeContentProvider'.

Ucommerce.Tree.ITreeContentProvider

description

A content provider is a child node provider who can also tell if a given node type is supported.

Methods


Supports

  • Description
    Returns true, if the provider supports a specific tree node type.
  • Return type Boolean
  • Arguments
    • String nodeType

You'll have to consider in what level of the tree you want to hook into. The framework will for each of the nodes in the tree ask all registered ITreeContentProviders if they support a given nodeType.

As we want to hook in under the 'Settings' node the implementation of the method Supports will look like the following code:

    
    public bool Supports(string nodeType)
    {
        return nodeType == Ucommerce.Constants.DataProvider.NodeType.Settings;
    }
    
    

The above code shows that we support all nodes of type 'Ucommerce.Constants.DataProvider.NodeType.Settings'.

When we return true to a given nodeType we also have the responsibility to serve children along with all other providers that support that nodeType. This will happen as Ucommerce will call GetChildren(string nodeType, string id) where the nodeType will always be the 'Settings' node type.

When delivering child nodes for content you need to take into account the following properties of ITreeNodeContent:

ITreeNodeContent

TreeNodeContent has the following properties.

Ucommerce.Tree.ITreeNodeContent

description

Data object containing the data content for a tree node.

         The data in the object is subsequently used by a converter, to be converted into
         the actual tree node implementation, for example a data object for AngularJS.

NodeType

  • Return type String
  • Description
    The type of the node.

ItemId

  • Return type String
  • Description
    The id of the item the node represents.

ItemGuid

  • Return type Guid?
  • Description
    The Ucommerce guid identifying the item, if one such exists.

ItemContextId

  • Return type String
  • Description
    The id of the context of the item the node represents. This is typically the parents id, if needed.

SortOrder

  • Return type Int
  • Description
    The sort order of this node compared to other nodes on the same level.

Name

  • Return type String
  • Description
    The name of the node. This is typically what is displayed in the GUI.

Icon

  • Return type String
  • Description
    The name of the Icon file to be used in the GUI.

HasChildren

  • Return type Boolean
  • Description
    True, if this node has children, that can be fetched thru the content service.

ChildrenCount

  • Return type Int
  • Description
    A count of the node's children if any.

AutoLoad

  • Return type Boolean
  • Description
    True, if the node should autoload its children.

DimNode

  • Return type Boolean
  • Description
    True, if the items are dimmed

Options

  • Return type IList<Ucommerce.Tree.ITreeNodeOption>
  • Description
    The right-click options for the node.

Action

  • Return type String
  • Description
    The left-click action for the node.

Node Types for Difference Parts of the Tree

This is the node types that you need to know if you want to hook into a place in the default tree.

The Tree nodeTypes document shows what nodeType each of the nodes in the default tree has.

    
    public IList<ITreeNodeContent> GetChildren(string nodeType, string id)
    {
        return new List<ITreeNodeContent>()
        {
            new Ucommerce.Tree.Impl.TreeNodeContent("about", -1)
            {
                Name = "About",
                HasChildren = false,
                Action = "/Apps/SampleApp/About.aspx",
                Icon = "/Apps/SampleApp/Icons/about.png"
            }
        };
    }
    
    

The code above creates a TreeNodeContent that contains the following:

  • TreeNodeContent("about", -1)
    • "about" is the nodeType of this TreeNodeContent (our tree node). If we want the About node to have child nodes, then we would need a provider that supports type "about".
    • -1 is the TreeNodeContent ItemId, which is the id of the item the node represents.
  • The Name and HasChildren properties should be self-explanatory.
  • Action
    • The action a left mouse click triggers.
    • In our example it’s pointing at an .aspx page in /App/About/ which will be rendered when the action is triggered.

Quick word on Apps

When creating your extensions to the tree, and you're linking to external resources like pages, images or similar, placing them under the 'Apps' folder under Ucommerce helps for easy registering and resolution of the actual path automatically.

In the image below I have placed my extensions under 'SampleApp'.

image

Starting your URL with '/Apps' tells Ucommerce to look under the Apps folder.

Registering the AboutNodeProvider

All there's left to do is registering your new component by hooking it into our TreeServiceShell component as a provider like the configuration below.

If you're interested in learning more about components please read How to Register a Component

    
        <configuration>
          <components>
            <component
            id ="SettingNodes.AboutSectionProvider"
            service="UCommerce.Tree.ITreeContentProvider, UCommerce"
            type="YOUR-NAMESPACE.AboutNodeProvider, YOUR-ASSEMBLY" />
    
            <partial-component id="TreeServiceShell">
              <parameters>
                <tasks>
                  <list>
                    <item insert="last">${SettingNodes.AboutSectionProvider}</item>
                  </list>
                </tasks>
              </parameters>
            </partial-component>
          </components>
        </configuration>