CMS Development

arinker
Top Contributor | Partner
Top Contributor | Partner

HubL Variable does not work correctly in <a href="{{ var }}">

SOLVE

I have build an easy custom language-switcher using HubL (https://app.hubspot.com/design-manager/2682989/templates/5262281264)

Language_Switcher.png

Based on the actual pages URL, it (the language-switcher) figures out, if the language is English ('/en/'-substring present in URL) or German (NO '/en/'-substring present in URL). Then it assembles the respective links for the switcher.

 

Both links ( {{ english }} and {{ german }} ) are assembled correctly. I have tested that by inserting them as text inside the respective links. ( <a href="{{ german }}">{{ german }}</a> ). Caching is also not the problem.

 

THE PROBLEM: The {{ german }}-var in href is NOT the {{ german }}-link. It diverges with the {{ german }}-var used as text. Actually the "/en/" part of the URL stays in place. And the really strange thing is, that it works on some pages and not on others (the pages are using the same global group).

 

EXAMPLE that works (You can switch back and forth): 

EXAMPLE that does NOT work (You CANNOT switch back to german from english): 

Here is the code:

{% set language_path = request.path|split('/') %}
{% set language = language_path|first %}
{% set german = "https://www.holsteiner-verband.de/" %}
{% set english = "https://www.holsteiner-verband.de/en/" %}

{% if language == "en" %}
	{% set german = request.full_url|string|replace('/en/', '/') %}
{% else %}
	{% set language = "de" %}
	{% set english = "https://www.holsteiner-verband.de/en" + request.path_and_query|string %}
{% endif %}

<div class="language-switcher-wrapper header">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 language-switcher">
				{% if language == "en" %}
					<a class="active"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_english_active.png"></a>
					<a href="{{ german }}"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_german_active.png"></a>
				{% else %}
					<a href="{{ english }}"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_english_active.png"></a>
					<a class="active"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_german_active.png"></a>
				{% endif %}
			</div>
		</div>
	</div>
</div>

Does anybody have similar issues with strange behaviour of HubL variables?

 

0 Upvotes
1 Accepted solution
arinker
Solution
Top Contributor | Partner
Top Contributor | Partner

HubL Variable does not work correctly in <a href="{{ var }}">

SOLVE

In the meantime I have hacked around the bug with good ol' jquery:

 

<div class="language-switcher-wrapper header">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 language-switcher">
				<a id="english"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_english_active.png"></a>
				<a id="german"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_german_active.png"></a>
			</div>
		</div>
	</div>
</div>

<script>

    var pathname = window.location.pathname;
    var querystring = window.location.search;
    var language = "";
    
    if (pathname.indexOf("/en/") >= 0) {
        language = 'en';
        var updatedPathname = "/" + pathname.replace("/en/", "") + querystring;
        $('.language-switcher a#english').addClass("active", updatedPathname);
        $('.language-switcher a#german').attr("href", updatedPathname);
    } else {
        language = 'de';
        var updatedPathname = "/en" + pathname + querystring;
        $('.language-switcher a#english').attr("href", updatedPathname);
        $('.language-switcher a#german').addClass("active", updatedPathname);
    }
    
    console.log('language :' + language);
    console.log('pathname :' + pathname);
    console.log('updatedPathname :' + updatedPathname);

    if ($('link[hreflang="en"]').length > 0){
        $('.language-switcher-wrapper').show();
    } else {
        $('.language-switcher-wrapper').hide();
    }
    
</script>

 

View solution in original post

0 Upvotes
3 Replies 3
arinker
Solution
Top Contributor | Partner
Top Contributor | Partner

HubL Variable does not work correctly in <a href="{{ var }}">

SOLVE

In the meantime I have hacked around the bug with good ol' jquery:

 

<div class="language-switcher-wrapper header">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 language-switcher">
				<a id="english"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_english_active.png"></a>
				<a id="german"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_german_active.png"></a>
			</div>
		</div>
	</div>
</div>

<script>

    var pathname = window.location.pathname;
    var querystring = window.location.search;
    var language = "";
    
    if (pathname.indexOf("/en/") >= 0) {
        language = 'en';
        var updatedPathname = "/" + pathname.replace("/en/", "") + querystring;
        $('.language-switcher a#english').addClass("active", updatedPathname);
        $('.language-switcher a#german').attr("href", updatedPathname);
    } else {
        language = 'de';
        var updatedPathname = "/en" + pathname + querystring;
        $('.language-switcher a#english').attr("href", updatedPathname);
        $('.language-switcher a#german').addClass("active", updatedPathname);
    }
    
    console.log('language :' + language);
    console.log('pathname :' + pathname);
    console.log('updatedPathname :' + updatedPathname);

    if ($('link[hreflang="en"]').length > 0){
        $('.language-switcher-wrapper').show();
    } else {
        $('.language-switcher-wrapper').hide();
    }
    
</script>

 

0 Upvotes
wspiro
HubSpot Product Team
HubSpot Product Team

HubL Variable does not work correctly in <a href="{{ var }}">

SOLVE

Hey @arinker!

 

Thank you for reaching out about this - I got wind of this situation and am looking into this internally. 

 

Unfortunately, (from a looking into the issue perspective - glad you got it working Smiley Happy), I am not able to reproduce this using your same HubL logic. I know you noted it only was happening on some pages which may be part of the issue here.

 

Is there any chance you could maybe create a simplified example where the issue is present? If so, I am more than happy to dig into what is going on here. 

 

Also, awesome looking language switcher, this is a really cool setup! I wonder if you may cosider using the string_startingwith or string_containing expression tests for this? If I have the full picture I think it could simplify the logic a bit (I think your logic is right, something funky seems up, but this may be simpler logic). This would look something like:

{% if request.path is string_startingwith '/en/' %}
<a class="active"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_english_active.png"></a>
<a href="{{ request.full_url|cut('en/') }}"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_german_active.png"></a>
{% else %}
<a href="https://www.holsteiner-verband.de{{ request.path }}"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_english_active.png"></a>
<a class="active"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_german_active.png"></a>
{% endif %}

When trying to reproduce this, I built a simplified version with both your logic as well as using the string_startingwith expression test, and they both seem to work nicely.

http://www.theprofitpatch.com/homebrew/lang

 

I look forward to hearing from you!

 

All the best,

 

William

arinker
Top Contributor | Partner
Top Contributor | Partner

HubL Variable does not work correctly in <a href="{{ var }}">

SOLVE

Hi William,

 

thank you for your detailed input and sorry for my delayed answer.

FYI the solution, that solved my problem:

<div class="language-switcher-wrapper header">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 language-switcher">
				<a id="english"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_english_active.png"></a>
				<a id="german"><img src="https://www.holsteiner-verband.de/hubfs/assets/images/language_switcher_german_active.png"></a>
			</div>
		</div>
	</div>
</div>

<script>

    var pathname = window.location.pathname;
    var querystring = window.location.search;
    var language = "";
    
    if (pathname.indexOf("/en/") >= 0) {
        language = 'en';
        var updatedPathname = "/" + pathname.replace("/en/", "") + querystring;
        $('.language-switcher a#english').addClass("active", updatedPathname);
        $('.language-switcher a#german').attr("href", updatedPathname);
    } else {
        language = 'de';
        var updatedPathname = "/en" + pathname + querystring;
        $('.language-switcher a#english').attr("href", updatedPathname);
        $('.language-switcher a#german').addClass("active", updatedPathname);
    }
   
    if ($('link[hreflang="en"]').length > 0){
        $('.language-switcher-wrapper').show();
    } else {
        $('.language-switcher-wrapper').hide();
    }
    
</script>

You can see it at work under: https://www.holsteiner-verband.de/

 

Best regards,

 

Arno

0 Upvotes