Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Rob 13 posts 93 karma points
    3 days ago
    Rob
    0

    using category tags in a nav bar on landing page

    I have build a landing page to show case recipes using the product and products document types from Umbraco starter kit.

    On the single recipes I put some category tags for the purpose to make them appear in a nav bar on the landing page.

    I would like to use some code similar to this

         <nav class="nav-bar nav-bar--center nav-bar--air-bottom">
                <a class="nav-link nav-link--black nav-link--active" href="">All</a>
                <a class="nav-link nav-link--black" href="">Vorspeisen</a>
                <a class="nav-link nav-link--black" href="">Suppen</a>
                <a class="nav-link nav-link--black" href="">Eintoepfe</a>
                <a class="nav-link nav-link--black" href="">Hauptgerichte</a>
                <a class="nav-link nav-link--black" href="">Deserts</a>
            </nav>
    

    I am sure that the above code won't work as it is right now. I have some basic experience with HTML but have no real clue about Razor and how to use the Umbraco Aliases etc. I know what the above will build a nav bar on my landing page what I want. So that's fine. Only issue I have is that I don't know what to code to use in "" here: href="" to fetch the category tags instead of using a URL for a landing page which is not what I want and also not the ID of a property as I do not have an ID for each tag??? Or where may I find an ID of the tags I create on the content like shown on the screenshots below?

    How can I fetch the category tags for the nav bar

    Would really appreciate some help as I am no developer

    Adding some screenshots to show what I am trying to use:

    property on document type

    actual category tags examples I want to use

    As mentioned before, I am no developer so might need to share some more info to get the guidance I need. So if anybody would be willing to help but wants/needs to see some more code please just let me know what to share and I'll be happy to share what might be needed.

  • Rob 13 posts 93 karma points
    1 day ago
    Rob
    0

    I have updated the initial post on my question so it hopefully gets more clear what I try to achieve.

    I would really appreciate some help here as I am no developer

  • Marcio Goularte 288 posts 991 karma points
    3 hours ago
    Marcio Goularte
    0

    Hi,

    the tags in the datatype have configuration to group the repository.

    enter image description here

    The default name is "default". You can change if you want. This is so that every time the user in the backoffice adds a new tag it is saved in that repository. You can create repositories of different tags.

    https://our.umbraco.com/Documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Tags

    In the code you can render with razor the tags of a content like this:

       @{ 
        //Current Content Id
        //Property name
        //Tag group name
        var tags = Umbraco.TagQuery.GetTagsForProperty(Model.Content.Id, "category", "category");
    
        if (tags.Any())
        {
            bool IsFirst = true;
        <nav class="nav-bar nav-bar--center nav-bar--air-bottom">
            @foreach (Umbraco.Web.Models.TagModel tag in tags)
            {            
                <a class="nav-link nav-link--black @Umbraco.If(IsFirst, "nav-link--active", "")" href="/products?category=@tag.Text">@tag.Text</a> 
                IsFirst = false;
            }        
        </nav>    
        }
    }
    

    To get all tags from the group tag, this is the code:

    @{ 
    
        //Tag group name
        var tags = Umbraco.TagQuery.GetAllTags("catagory");
    
        if (tags.Any())
        {
            bool IsFirst = true;
        <nav class="nav-bar nav-bar--center nav-bar--air-bottom">
            @foreach (Umbraco.Web.Models.TagModel tag in tags)
            {            
                <a class="nav-link nav-link--black @Umbraco.If(IsFirst, "nav-link--active", "")" href="/products?category=@tag.Text">@tag.Text</a> 
                IsFirst = false;
            }        
        </nav>    
        }
    }
    

    helper https://our.umbraco.com/documentation/reference/querying/umbracohelper/#tagquerygetalltagsstring-taggroup

Please Sign in or register to post replies

Write your reply to:

Draft