Hyperlink in navbar appearance based on survey language

More
2 months 2 weeks ago - 2 months 2 weeks ago #173069 by krosser
krosser created the topic: Hyperlink in navbar appearance based on survey language
Hi guys,

I need to make a custom hyperlink in the navbar switch its name translation and its link along with the survey's language.

Currently, I have it similar to this in nav_bar.twig:
<div id="{{ aSurveyInfo.id.navbar }}" class="{{ aSurveyInfo.class.navbarcollapse }}" {{ aSurveyInfo.attr.navbarcollapse }} >
        <ul class="{{ aSurveyInfo.class.navbarlink }} navbar-right" {{ aSurveyInfo.attr.navbarlink }}>
            {{ include('./subviews/navigation/save_links.twig') }}
            {#{{ include('./subviews/navigation/clearall_links.twig') }}#}
            {{ include('./subviews/navigation/question_index_menu.twig') }}
            {{ include('./subviews/navigation/language_changer_top_menu.twig') }}
            <li class="nav-item">
                <a class="nav-link" href="https://mywebsite.com" target="_blank">My website</a>
            </li>
        </ul>
    </div>

I've added the link at the end. But when I switch between the languages I need to somehow add that it switches to another link along with the interface like in the above twig files.

Perhaps, it can be done like with the logo switch?
{# Logo option #}
        {% if( aSurveyInfo.options.brandlogo == "on") %}
        <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container hidden-xs"  {{ aSurveyInfo.attr.navbarbrand }}  >
                {{ image('./files/logo-eng.png', 'alt-text for my file', {"class": "logo-en"}) }}
                {{ image('./files/logo-fr.png', 'alt-text for my file', {"class": "logo-fr"}) }}
        </div>
        {% else %}
            <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
                {{ aSurveyInfo.name }}
            </div>
        {% endif %}

Any help would be really appreciated!

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Last Edit: 2 months 2 weeks ago by krosser. Reason: Had to clarify

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago - 2 months 2 weeks ago #173073 by LouisGac
LouisGac replied the topic: Hyperlink in navbar appearance based on survey language
turn debug mode on, use:

 {{ dump(aSurveyInfo) }}

find the name of the variable where language is saved, use it to build a if statement to display a link or another.


so something like :
 
{% if ( aSurveyInfo.languagecode == "en") %}
 
<a ... > my link for english </a>
{% endif %}
 
 
 
Last Edit: 2 months 2 weeks ago by LouisGac.

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #173075 by krosser
krosser replied the topic: Hyperlink in navbar appearance based on survey language
Are you referring to turning debug mode on in application/config.php or to the JS-Debug mode in Global settings?

Sorry but you lost me on how to use {{ dump(aSurveyInfo) }} to find the name of the variable...

I haven't debugged LimeSurvey before, so this is something I still need to learn.

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #173105 by krosser
krosser replied the topic: Hyperlink in navbar appearance based on survey language
I've managed to find a loophole with dynamic content on a page using URL parameters, like it's discribed here:
How to Display Dynamic Content on a Page Using URL Parameters

But the issue is that once loaded, the page goes to a hashtag # at the end and the hyperlink disappears when I click on 'next' or change the language, because there is no "lang" in the URL anymore.

If anyone knows how to overcome this, please share...

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #173106 by LouisGac
LouisGac replied the topic: Hyperlink in navbar appearance based on survey language
debug mode and dump was just general indications about how to find a variable.

For what you're trying to do:
 
{% if ( aSurveyInfo.languagecode == "en") %}
 
<a ... > my link for english </a>
{% endif %}
 
 
 
The following user(s) said Thank You: krosser

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago - 2 months 2 weeks ago #173108 by krosser
krosser replied the topic: Hyperlink in navbar appearance based on survey language
I assume that this can be done only when you have the LS installed locally.

And from various places in the manual, it looks like you gotta know Yii as well, which isn't my case.
Debugging
Development and debugging

I'll try to figure out the code from what you wrote...

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Last Edit: 2 months 2 weeks ago by krosser.

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #173109 by LouisGac
LouisGac replied the topic: Hyperlink in navbar appearance based on survey language
no, you can edit the files via the theme editor:
manual.limesurvey.org/New_Template_System_in_LS3.x

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago #173111 by krosser
krosser replied the topic: Hyperlink in navbar appearance based on survey language
if you are referring to editing twig files in themes, then yes, I know.
We are talking about debugging.

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.

Please Log in or Create an account to join the conversation.

More
2 months 2 weeks ago - 2 months 2 weeks ago #173113 by krosser
krosser replied the topic: Hyperlink in navbar appearance based on survey language
Okay, it looks like you've given most of the basis, so then it's something like this (as an example):
<div id="{{ aSurveyInfo.id.navbar }}" class="{{ aSurveyInfo.class.navbarcollapse }}" {{ aSurveyInfo.attr.navbarcollapse }} >
        <ul class="{{ aSurveyInfo.class.navbarlink }} navbar-right" {{ aSurveyInfo.attr.navbarlink }}>
            {{ include('./subviews/navigation/save_links.twig') }}
            {{ include('./subviews/navigation/question_index_menu.twig') }}
            {{ include('./subviews/navigation/language_changer_top_menu.twig') }}
 
            {% if ( aSurveyInfo.languagecode == "en") %}
            <li class="nav-item">
            <a class="nav-link-en" href="https://www.google.com" target="_blank"> my link for English </a>
            </li>
            {% endif %}
            {% if ( aSurveyInfo.languagecode == "fr") %}
            <li class="nav-item">
            <a class="nav-link-fr" href="https://www.google.fr" target="_blank"> my link for French</a>
            </li>
            {% endif %}
 
        </ul>
 
    </div>

It's working, when I switch between languages. I just need to reposition/CSS the links now, since they are out of line with other elements.

UPDATE:
I've forgotten to add the list groups to links. So, with that it aligns nicely with other elements and my theme CSS is enough. I've updated the code.

<li class="nav-item">
...
</li>

I'm using the latest LS 3.15 hosted on LS servers, not installed locally.
Last Edit: 2 months 2 weeks ago by krosser. Reason: Added list groups to web-links
The following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!