*Snippet* - Dynamically add pages/topics to the navigation menu

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
13 years ago
Here ya go:

This is a follow-on from my first snippet on adding pages to the infoblock dynamically:
https://www.nopcommerce.com/boards/t/8291/snippet-dynamically-add-topicspages-to-infoblock-and-menu.aspx


Open ~/modules/headermenu.ascx;

after the last menu item (should be Contact Us), paste the following (still within the UL)

<%
        var topics = this.TopicService.GetAllTopics();
              topics = topics.FindAll(t => t.Name.ToLower().IndexOf("page")==0);
        if (topics.Count > 0)
        {
        %>
          <li><a href="javascript:;" class="ddtopics">Information</a> </li>
      <li class="topiclinks">
        <%
                foreach (var topic in topics)
                {
                    NopSolutions.NopCommerce.BusinessLogic.Content.Topics.LocalizedTopic localizedTopic = this.TopicService.GetLocalizedTopic(topic.TopicId, NopContext.Current.WorkingLanguage.LanguageId);
                    if (localizedTopic != null && !String.IsNullOrEmpty(localizedTopic.Title))
                    {
                        string topicURL = SEOHelper.GetTopicUrl(localizedTopic.TopicId, localizedTopic.Title);
                        string topicName = localizedTopic.Title;
                        %>
                          <a href="<%=topicURL%>"><%=topicName%></a>
                        <%
                    }
                }
        %>
          </li>  
        <%
        }
      %>


scroll to the bottom of the page, below </div> add the following:



<style>
ul.topmenu li.topiclinks a {
  display:block;
  background:none;
  background-color:white;
  font-size:8pt;
  color:#555555;
  margin:1px;
  padding:2px;
  border:1px dotted #ffffff;
}
ul.topmenu li.topiclinks a:hover {
  background:none;
  color:#000000;
  border:1px dotted #f5f5f5;
}
ul.topmenu li.topiclinks {
  display:none;
  background:none;
  background-color:white;
  width:150px;
  border:1px solid #eeeeee;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.ddtopics').mouseenter(function(){
    $('.topiclinks').stop(false, true).hide();
    var submenu = $('.topiclinks');
    submenu.css({
      position:'absolute',
      top: $(this).offset().top + $(this).height() + 'px',
      left: $(this).offset().left + 'px',
      zIndex:1000
    });
    submenu.stop().slideDown(300);
    submenu.mouseleave(function(){
      $(this).slideUp(300);
    });
  });
});
</script>




NOW, just go to Content management/Topics and add a new topic named: "Page.Menutest"

Make the topic Title "My New Page" and add whatever content and save.

Browse to your store and check it out :)
13 years ago
mmm, no crit or comment on this? strange,  hope somebody finds it helpful lol
13 years ago
for v1.8 and earlier: try adding the following directive to Infoblock.ascx

  <%@ Import Namespace="NopSolutions.NopCommerce.BusinessLogic.Content.Topics" %>

Headermenu.ascx should be fine though?
12 years ago
sorry no one has responded. i think it helps me though. Here's my post/question - does your snippet indeed apply to what i'm asking. indirectly i mean but along the same lines.

who knows maybe you'll know exactly how to do what i'm asking. i run 2.2 and must keep 2.2

thanks for the snippet and all the sharing.
12 years ago
doh!
https://www.nopcommerce.com/boards/t/16643/menu-options.aspx#68228
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.