Advanced ShopSite Menus

Forum Forums Tutorials Advanced ShopSite Menus

This topic contains 0 replies, has 1 voice, and was last updated by  Anonymous 12 years ago.

Viewing 1 post (of 1 total)
  • Author
  • #48714


    There are multiple ways of creating a menu on a ShopSite generated page and now with ShopSite 10.1 there are even more:

    - Assign pages to a parent page and loop through the links to display them
    - Add HTML code to a template and hard-code your links
    - Use an Include template with a hard-coded menu
    - Create fly-out menus with the new Navigation feature of ShopSite 10.1

    However, you may still have a need for additional control or want a simple way to maintain multiple menus across your site.

    In this tutorial we’re going to merge a few of these methods together into an advanced menu system that can be easily added to your site and will only take a few minutes to update if you need to add or edit any links.

    Step #1: Menu Template
    The first step is to create a new page template. This template will be used to build the menu and format the links that will appear. For our example, we will create a new page template called “menu_footer” with the following code:

     <a href="[-- PAGE.FileName --]">[-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name --][-- END_IF --]</a>&nbsp
    [-- DEFINE PAGE --]
    [-- LOOP LINKS --]
    [-- LINK menu_footer --]
    [-- END_LOOP LINKS --]
    [-- END_DEFINE PAGE --]

    TIP: While our sample is displaying basic text links in a single row, the HTML code in the [--DEFINE LINK_TO_PAGE--] section of your menu template controls the layout of your links so it can be edited to create any layout you please.

    Step #2: Menu Page
    The next step is to create an extra page in ShopSite which will use the above template and create the HTML for your menu. For this example we’re creating a page with the following settings:

    Page Name: Menu – Footer
    File Name: menu_footer.html
    Page Template: menu_footer (use the template name from Step #1)
    Index: [unchecked] (We do not want to index this page for search)
    Google Sitemap Settings: [unchecked] (We do not want to include this in a Sitemap)

    Step #3: Assign Pages
    For any page that we want to have appear on our menu we just need to assign it to our menu page from Step #1. For this example, we will assign our pages to the “Menu – Footer” page to make them show up on the menu. When we publish the site, the HTML file with our menu will then have a filename of “menu_footer.html”.

    Step #4: Add The New Menu
    All that’s left is to configure your site to display the menu. The goal here is to include the new menu file in your page or page template where you want it to appear. To include the file, either a PHP command or an SSI command can be used. If you already use one of these methods for your store it would be best to use the same to include your new menu. Here are the details on both methods and how to configure your store to use them if neither are currently in place:

    Server Side Include (SSI)
    To process a SSI include command your store pages would need to have filenames ending in “.shtml” or the following line of code can be added to an .htaccess file to process SSI calls inside .htm and .html pages:

    AddHandler server-parsed .shtml .sht .htm .html

    Once your pages can process SSI commands, you would include the menu code with a line such as this:

    <!--#include virtual="/menu_footer.html" -->

    To process a PHP include command your store pages would need to have filenames ending in “.php” or the following line of code can be added to an .htaccess file to process PHP commands from inside .htm and .html pages:

    AddType application/x-httpd-php .php .php3 .html .htm

    Once your pages can process PHP commands, the code to include your menu would look like this:

    <?php readfile("/menu_footer.html"); ?>

    You may place these includes into a template file, a text field in your page content, or anywhere you would like the new menu to appear.

    For an example, you can see a sample menu on this page here:

    On that page, the “Home Order Status Quick Order” menu was created using this method.

    Don’t Stop Now
    You may have as many menus as you would like by creating additional templates and pages for each new menu. Whether you want to have a navigation menu on the top of your site, a category menu down the side, and a footer menu on the bottom – all can be easily created and maintained using this method of creating menus.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.