Including Orchard navigation/widget into non-Orchard page?

Topics: Core, Customizing Orchard, General, Troubleshooting
May 12, 2014 at 10:55 AM
The website I'm working on has 3 different "sections": a "presentation" section, a "community" section, and an "commerce" section.

The presentation section is completely done in Orchard and includes not only information pages about our good/services, but also the header and footer with their respective navigations.

The community and commerce sections however are NOT done in Orchard but are running asp.net forum systen and asp.net shop system.

Those two sections will receive a makeover so it all looks lke a single website, of course.

The problem now is the navigation. I got two navigation areas, a main navigation menu in the header section and a "sitemap"-style navigation in the footer area. Both the header and footer should be present on every page of the website, including those sections that are not done in Orchard.

Is there a way, like an API, that I can include the code generated by Orchard into the other sites?

My current plan is to use jquery's ajax() function to open an Orchard page and parse the result to return the header and footer. However if there is a better, more "Orchard-native" way to do this, I would prefer that of course.
May 12, 2014 at 3:42 PM
You can create a WebAPI controller in order to take the menu items and populate them using jQuery at your sites.
May 12, 2014 at 3:50 PM
Thank you for your quick answer, but could you please elaborate on this method a bit?
Please assume that I don't have in-depth knowledge of Orchard yet.
What steps would I need to take - both on the Orchard backend side as well as on the "calling/requesting" page? (Let's assume for this example that I have the navigation "EN-Nav" that is placed on the page by the navigation widget "EN-Nav-Widget".
Jul 2, 2014 at 6:53 PM
I would also like to create a "sitemap"-style navigation in the footer area. So, any insight on how to do this would be awesome. I am a first time orchard user, so elaboration requested by Konadi would be a great help.

Thanks in advance,
K.E.
Jul 3, 2014 at 8:22 AM
Basically I created a second navigation and manually filled it with links (it's not a real sitemap, it's a "curated" sitemap-ish navigation very similar to what you can see on http://www.microsoft.com/de-de/default.aspx for example.

Steps:
I manually created a second navigation menu and called it "FooterLinksDE" (in this example I'll use the German menu, you have to create every step for each language as far as I know).
I created a new Nav Widget named (name != title) FooterLinksDE and have it use the FooterLinksDE navigation created previously. The Widget is placed in the footer area.
I created a Widget-Name-FooterLinksDE.cshtml in my theme's /Views/ folder. This will be used for the new Widget instead of the standard formatting.

This is the code:
@{
    // Model is Model.Menu from the layout (Layout.Menu)

    <div class="footer-nav flex-row flex-space-between">
        <nav class="footer-nav_links flex-row">
            @{
                foreach (var item in Model.Content.Items[0].Menu.Items)
                {
                    <div class="footer-nav_links_block flex-column flex-no-resize">
                        <span>@item.Text</span>
                        @foreach (var item_2nd in item.Items)
                        {
                            <a href="@item_2nd.Href">@item_2nd.Text</a>
                        }
                    </div>
                }
            }
        </nav>
        <div class="footer-nav_social flex-column flex-no-resize">
            <div class="footer-nav_social_block flex-column flex-start flex-no-resize">
                <span class="headline">Folgen Sie uns</span>
                <a href="#" class="flex-row flex-middle"><span class="icon-social-facebook" style="margin-right: 10px;"></span><span>Facebook</span></a>
                <a href="#" class="flex-row flex-middle"><span class="icon-social-twitter" style="margin-right: 10px;"></span><span>Twitter</span></a>
                <a href="#" class="flex-row flex-middle"><span class="icon-social-googleplus" style="margin-right: 10px;"></span><span>Google Plus</span></a>
                <a href="#" class="flex-row flex-middle"><span class="icon-social-rss" style="margin-right: 10px;"></span><span>RSS Feed</span></a>
            </div>
        </div>
    </div>
}
1st level items are used as pure text "headlines", second level items are the actual links. Next to the links there is some social media stuff. The flex-* classes contain different parts of flexbox related css (by combining 2-3 of those classes you can get pretty much every layout you want)

The result looks like this. Is this what you were looking for? (yes the RSS logo is not correct, I know...)

Image