ShopSite Page Links in a Dropdown Box

Forum Forums Tutorials ShopSite Page Links in a Dropdown Box

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

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #48687

    Anonymous
    Participant

    ShopSite’s custom template system provides full control over how your page links appear on your pages. Whether you want to display a horizonal menu bar or a vertical list of links, you can do this with custom page templates. With some additional HTML you can even display pages as a drop-down list that automatically directs the visitor to the selected page.

    Template Changes
    There are 2 sections in your page template that control how the page links appear. One is the “[--DEFINE LINK_TO_PAGE--]” section which is where the code for the link itself is. The other is the “[-- DEFINE PAGE --]” section which controls the main content of your page and where items appear. It’s inside this section that your template will loop through the pages assigned and display the links.

    Instead of displaying regular links, you will modify your [--DEFINE LINK_TO_PAGE--] section to use an HTML

    [--DEFINE LINK_TO_PAGE--]
    <option value="[-- PAGE.FileName --]">
    [-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name --][-- END_IF --]
    </option>
    [--END_DEFINE LINK_TO_PAGE--]
    

    In the [-- DEFINE PAGE --] section where the page links appear, you will find a [-- LOOP LINKS --] tag. With some additional HTML in this section you will build the form where the drop-down list will appear:

    <form>
    <select onChange="window.location=this.options[this.selectedIndex].value;">
    <option value="">Page Menu:</option>
    [-- LOOP LINKS --]
    [-- LINK DropDownPageMenu --]
    [-- END_LOOP LINKS --]
    </select>
    </form>
    

    Notes:
    - The “onChange” line instructs the browser to redirect to the selected page.
    - The [-- LOOP LINKS --] tag begins the loop where we process each page link.
    - The [-- LINK DropDownPageMenu --] displays the link and tells the system which template to use. “DropDownPageMenu” is the name of the template we created in our example. This would be the name you give your custom template.

    Sample
    On our ShopSite Demo Store you can see a page using this method of building page links here:
    http://shopsite-demo.lexiconn.com/dropdownexample.html

    The drop-down Page menu on the left is populated with the list of pages that are assigned to that page and when a selection is made, the javascript redirects the browser to the selected page.

    Advanced Options
    In our example above, all pages assigned are displayed in the drop-down list. There may be a time when you want to limit which links appear in your drop-down – for example you may want some to appear in a top navigation, while others are in a drop-down. There may be other times when you want to create multiple drop-downs on the same page with different links appearing in each one.

    This is possible by using an Extra Page Field as a variable to control which menu the link appears in. In the example below we will use “Page Field 1″ for our variable and when it has a value of “category” the link will appear.

    Here is the modified code from the [-- DEFINE PAGE --] section of our template:

    <!-- The [-- PAGE.Field1 --] value determines display with the VAR.WhichLink variable -->
    <form>
    <select onChange="window.location=this.options[this.selectedIndex].value;">
    <option value="">Category Menu:</option>
    [-- VAR.WhichLink category --]
    [-- LOOP LINKS --]
    [-- LINK DropDownPageMenu --]
    [-- END_LOOP LINKS --]
    </select>
    </form>
    

    The “[-- VAR.WhichLink category --]” line sets the “VAR.WhichLink” variable to a value of “category”.

    Here is the modified [--DEFINE LINK_TO_PAGE--] code that checks for our variable:

    [--DEFINE LINK_TO_PAGE--]
    [-- IF PAGE.Field1 VAR.WhichLink --]
    <option value="[-- PAGE.FileName --]">
    [-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name --][-- END_IF --]
    </option>
    [-- END_IF --]
    [--END_DEFINE LINK_TO_PAGE--]
    

    The “[-- IF PAGE.Field1 VAR.WhichLink --]” line checks the “PAGE.Field1″ value to see if it is the same as the value of the “VAR.WhichLink” variable. In this case the variable was set to “category”, so any page with “category” in it’s “PAGE.Field1″ will appear in our drop-down menu.

    With this method you can control which links appear in your menu. If you want to have multiple menus on the same page, you can replicate the form code as many times as you need and use different values for the “VAR.WhichLink” variable and “PAGE.Field1″ field to create as many combinations as you would like.

    If you need multiple menus with more control over the layout, you could modify your [--DEFINE LINK_TO_PAGE--] code to build the links for each PAGE.Field1 value differently. For example, you could could check to see if PAGE.Field1 matched a specific value and then display the links as a drop-down list, or you could build HTML code for any other display as well. With multiple IF statements checking for different values, you could display some pages as a drop-down, others as a horizontal top navigation, and still others as a small menu across the bottom of the page.

    The options are endless when it comes to processing your page links and how they are displayed.

    Additional Reading
    For additional reference, here are links to pages on ShopSite’s website related to the topics we used in this tutorial:

    Page Loop Links
    http://www.shopsite.com/templates/cookbook/page10-link.shtml

    Page Links
    http://www.shopsite.com/templates/cookbook/page6-links.shtml

    Using Extra Page Fields

    http://www.shopsite.com/templates/cookbook/page9-extrafields.shtml

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.