Developer forum

Forum » Templates » Sidebar menu based on paragraphs

Sidebar menu based on paragraphs

Jens Mouritzen
Jens Mouritzen
Reply

I'm looking for examples on how to make a sidenav based on paragraphs in the content. Much like on the doc.dynamicweb.com (see attached image).

Anyone have an idea for this, and whats is best practice...

2018-09-11_15_08_17-Window.png

Replies

 
Nicolai Pedersen
Reply

In Razor, simply do something like this:

foreach(var p in Services.Paragraphs.GetParagraphsByPageId(Dynamicweb.Frontend.PageView.Current().ID)){
    var name = p.Header;
}

 
Jens Mouritzen
Jens Mouritzen
Reply

Thanks Nicolai
I needed to add Dynamicweb to make it work, like this:

@foreach(var p in Dynamicweb.Services.Paragraphs.GetParagraphsByPageId(Dynamicweb.Frontend.PageView.Current().ID)){
  var name = p.Header;
}

I'm still learning to write the code directly with the API. But this is the right way to do it, right? Otherwise i get an error saying:

The name 'Services' does not exist in the current context
 
Nicolai Pedersen
Reply

Hi Jens

Yes, adding Dynamicweb is fine. Or you can add a @using Dynamicweb; statement in the top of your template.

BR Nicolai

 
Jens Mouritzen
Jens Mouritzen
Reply

Okay cool.

New issue :)  Maybe this is basic knowledge. The page keeps refreshing after i click the anchor points. Se video below. It also goes back to the frontpage when i click anchor links, on other pages

Video: https://www.screencast.com/t/DYBgdqi3Fo42

The link's code looks like this:

<a href="#1281" class="menu__link paragraph-link dw-mod">
      Velkommen til Fanø Vesterhavsbads Golfklub
</a>

And the anchor looks like this:

<h2 id="1281" class="u-no-margin ">Velkommen til Fanø Vesterhavsbads Golfklub<a class="fas fa-chevron-up" href="#top"></a></h2>

 
Nicolai Pedersen
Reply

Hi Jens

Yes, that is because all your pages have a <base href> tag in the header - one that Dynamicweb inserts from the good old days to avoid issues with SEO friendly urls.

So you have 2 options

  • Disable base href tag in Settings//Web and Http/Http (remember to check that all your internal links are relative to the root of the url - they should be)
  • Change the anchor links to javascript based version, see below:
<a href="javascript:void(0);" onclick="document.location.hash='1281';">Velkommen til Fanø Vesterhavsbads Golfklub</a>

BR Nicolai

 

You must be logged in to post in the forum