Copied to clipboard

Flag this post as spam?

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


  • Rob 27 posts 129 karma points
    Feb 13, 2019 @ 10:09
    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 27 posts 129 karma points
    Feb 14, 2019 @ 19:48
    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 320 posts 1074 karma points
    Feb 16, 2019 @ 01:19
    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

  • Rob 27 posts 129 karma points
    Feb 16, 2019 @ 09:03
    Rob
    0

    So now I have the following situation.

    For the product template which I use for the recipes this is the actual code:

    @Html.Partial("~/Views/Partials/SectionHeader.cshtml", Model.Content.Parent)
    

    @{ //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>    
    }
    

    }

    @Model.Content.ProductName

    @Model.Content.Description
    @Html.GetGridHtml(Model.Content, "bodyText", "bootstrap3-fluid")

    and for the products template which is the overview landing page for the recipes I use this code:

    @inherits UmbracoTemplatePage<Products>
    

    @using ContentModels = Umbraco.Web.PublishedContentModels; @{ Layout = "Master.cshtml"; } @Html.Partial("~/Views/Partials/SectionHeader.cshtml")

    <div class="container">
    

    But when I now click on the nav bar on the overview page on one of the buttons where I already have tags for it it breaks the page

  • Marcio Goularte 320 posts 1074 karma points
    Feb 16, 2019 @ 14:44
    Marcio Goularte
    0

    I created that code to explain to you how the tag system works. the tag link I directed to the product page by query string. On this products page you need to have a programming that will filter the products passed by parameter in the query string.

    I know you said you're not a programmer, but you're really in need of one.

  • Rob 27 posts 129 karma points
    Feb 16, 2019 @ 15:15
    Rob
    0

    I don’t need a developer just someone you is willing to help and guide the way. If that is not you fine.

    Everybody started coding some when. So needed to gain experience and learn.

    As I’m new to Razor and Umbraco I need to learn so need someone to teach.

    I find a way to achieve what I want. As this is just like a hobby to me and not urgent as I am building the whole website on my own without a programmer it will need some time. But that is fine.

    So if anybody out there in the community is willing to help and guide me the way would really be appreciated.

  • Marcio Goularte 320 posts 1074 karma points
    Feb 16, 2019 @ 16:19
    Marcio Goularte
    0

    OK. I'm sorry if I was offensive, but I thought you needed to go to work, something urgent.

    We do so, show the code of the full page of products that showed how the product filter would work through the navigation link

  • Rob 27 posts 129 karma points
    Feb 16, 2019 @ 19:39
    Rob
    0

    So this is the full code from the template of the products page including the nav link:

    @inherits UmbracoTemplatePage<Products>
    

    @using ContentModels = Umbraco.Web.PublishedContentModels; @{ Layout = "Master.cshtml"; } @Html.Partial("~/Views/Partials/SectionHeader.cshtml")

    <div class="container">
    
        <!-- todo: implement category selector -->
        <!--
            <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="">Suppen</a>
                <a class="nav-link nav-link--black" href="">Eintoepfe</a>
                <a class="nav-link nav-link--black" href="">Vorspeisen</a>
                <a class="nav-link nav-link--black" href="">Hauptgerichte</a>
            </nav>
        -->
    

    @if (Model.Content.FeaturedProducts != null) { foreach (Product product in Model.Content.FeaturedProducts) {
    @product.ProductName

                        </div>
                    </a>
                }
            }
        </div>
    </div>
    

    I am not using the Nav bar code as it is not working so not filtering the "products" on that page.

Please Sign in or register to post replies

Write your reply to:

Draft