Forum Discussion

iftomkins's avatar
11 years ago

How do I test for the "interaction style" of a page I'm on?

I created a custom search form for mobile which searches all ideas boards. I want to show this form only on category pages which have the interaction style of "idea".

 

The url contains this information: "/t5/Community/ct-p/EN/interaction-style/idea".

 

I'd like to do something like this:

 

<#assign interactionStyle = currentPage.interaction-style />
<#if interactionStyle == 'idea'>

DO THIS THING

</#if>

 

I could take this information from the URL, and hide/show via Javascript, but I'd prefer to do this on the server side to be cleaner/faster.

 

************************

UPDATE:

************************

 

I found the page context object "interaction style". I thought I got it! But no. The below code returns "none". (see above for the URL)

 

<#assign interactionStyle = page.interactionStyle />
${interactionStyle}

 

 

 

 

 

 

  • Update: I gave up and attacked it with Javascript. Solved.

     

    Rant: I've had to do this alot with Lithium. I'm pretty disappointed that what you can do with freemarker is limited, and what you can do is not simple usually. Even a simple thing, like writing a conditional statement based on what page/category the user is currently viewing, is very difficult. I've presented many of these headscratchers to KaelaC  at Lithium, and she's great and can usually figure them out, but even for her, it's a little work, and we are often asked to sign new contracts to get Lithium's help to complete work as simple as this thread's subject: how to test what page you're currently on.

     

    Here's the full solution I used:

    1. Hide the form with CSS

    2. If URL contains interaction-style/idea, show the form

    3. The search form searches all ideas boards, and deposits the user on the mobile search page

     

    <style>

    #form_mobileIdeas {

        display: none;

    }

    </style>

     

    <#-- Search form that searches all ideas boards. Created for Mobile because out-of-the-box component did not exist. -->
    <@liaAddScript>
    LITHIUM.jQuery(document).ready(function() {
    //Show ideas search form on ideas category pages, hidden by default in CSS
        var url = window.location.href;
        if(url.indexOf("interaction-style/idea") > -1) {
            LITHIUM.jQuery("#form_mobileIdeas").show();
        }
    });
    </@liaAddScript>

    <form class="lia-form lia-form-inline SearchForm" action="/t5/forums/searchpage/tab/message" method="get" id="form_mobileIdeas" name="form_mobileIdeas">
        <input type="hidden" name="include_ideas" value="true" />
        <input title="Search" class="lia-form-type-text search-input" value="" id="mobileIdeasSearch" name="q" type="text" autocomplete="off">
        <span class="lia-button-wrapper lia-button-wrapper-secondary lia-button-wrapper-searchForm-action">
            <input class="lia-button lia-button-secondary lia-button-searchForm-action" value="Search Ideas" id="mobileIdeasSubmit" type="submit">
        </span>
    </form>

3 Replies

  • Hi iftomkins ,

     

    The page.interactionStyle gives interaction style of the board when the page has the context of a board. If the page does not have the context of a board, this will return a none value

    From the URL you posted ,it looks like the page is for Category of Idea.

    Perhaps you could use some other filter like ,

    <#if coreNode.nodeType=="category" && coreNode.title="titleOfIdeaCategoryNode">

    do something

    </#if>

     

    Regards,

    Sam

  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago

    Thanks, Sam. This didn't work for me though, because the node titles of the ideas boards are the same titles as our normal forum boards, possibly among other reasons. It's really the interaction style (as shown in url) that needs to be targeted. Here's a screencast: http://screencast.com/t/MoX8anbP

     

     

  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago

    Update: I gave up and attacked it with Javascript. Solved.

     

    Rant: I've had to do this alot with Lithium. I'm pretty disappointed that what you can do with freemarker is limited, and what you can do is not simple usually. Even a simple thing, like writing a conditional statement based on what page/category the user is currently viewing, is very difficult. I've presented many of these headscratchers to KaelaC  at Lithium, and she's great and can usually figure them out, but even for her, it's a little work, and we are often asked to sign new contracts to get Lithium's help to complete work as simple as this thread's subject: how to test what page you're currently on.

     

    Here's the full solution I used:

    1. Hide the form with CSS

    2. If URL contains interaction-style/idea, show the form

    3. The search form searches all ideas boards, and deposits the user on the mobile search page

     

    <style>

    #form_mobileIdeas {

        display: none;

    }

    </style>

     

    <#-- Search form that searches all ideas boards. Created for Mobile because out-of-the-box component did not exist. -->
    <@liaAddScript>
    LITHIUM.jQuery(document).ready(function() {
    //Show ideas search form on ideas category pages, hidden by default in CSS
        var url = window.location.href;
        if(url.indexOf("interaction-style/idea") > -1) {
            LITHIUM.jQuery("#form_mobileIdeas").show();
        }
    });
    </@liaAddScript>

    <form class="lia-form lia-form-inline SearchForm" action="/t5/forums/searchpage/tab/message" method="get" id="form_mobileIdeas" name="form_mobileIdeas">
        <input type="hidden" name="include_ideas" value="true" />
        <input title="Search" class="lia-form-type-text search-input" value="" id="mobileIdeasSearch" name="q" type="text" autocomplete="off">
        <span class="lia-button-wrapper lia-button-wrapper-secondary lia-button-wrapper-searchForm-action">
            <input class="lia-button lia-button-secondary lia-button-searchForm-action" value="Search Ideas" id="mobileIdeasSubmit" type="submit">
        </span>
    </form>