$_POST parameters for language switching

[stevenpicado]

Hello everyone again,

 

I'm this close to finishing full integration, everything is looking better and better and now you can barely tell the difference between my site and my WHMCS integration design wise wo hoo!!!

 

I have a question though that I couldn't find in the documentation area, you know how you have that drop down menu to switch languages (that by the way I have limited to only english and spanish) and when you choose to change it you get the other language?

 

Well, I my main menu I have a spanish link (when viewing the site in english) and vice-versa, I want this link to trigger the same functionality as that drop down menu.

 

I know for a fact this is a form using $_POST I just need to know what paramenter to pass so the chosen language can be declared?

 

Thanks in advanced for any help provided!

[stevenpicado]

Son of a gun after 3 or 4 attempts I guessed it!!!

 

I'll leave it here just in case someone might be having the same question

 

<form method="post" action="/clients/index.php">

<input type="hidden" name="language" value="spanish" />

<input type="submit" name="submit" value="Español" />

</form>

 

Of course a lot more tweaking is needed but this is the important part:

 

<input type="hidden" name="language" value="spanish" />

[tripler]

backspace backspace backspace...

 

Grats on your integration, you sound thrilled =)

[laszlof]

Just view source on the default template. Its pretty simple. If you want to use links, something like this will work.

 

Place this code anywhere in your sites header/footer body.

<form id="langform" action="index.php" method="POST">
   <input type="hidden" name="language" value="" />
</form>
{literal}
<script>
   $('.langselect').click(function() {
       $('[name=language]').val($(this).attr('data-key'));
       $('#langform').submit();
   });
</script>
{/literal}

 

And then place this where you want the links to appear.. Note, you dont have to actually use A links, you can use <li> tags if you want, or any element really, just make sure the class and data-key are defined.

 

<a href="javascript:;" class="langselect" data-key="Spanish">Spanish</a><br />
<a href="javascript:;" class="langselect" data-key="English">English</a>

[stevenpicado]

I'm having a lot of fun tripler!

 

laszlof, I do like your method better, mainly because this way I don't have to style the button so that it looks like the other links.

 

May I ask one more question though?

 

I was trying to check which was the selected language with php so I could change the language on my main links but what I made didn't quite work, could you tell me why? This is the code:

 

<ul id="nav">
	{php}if ($language == 'english') {{/php}
		<li class="inactive">
			<a href="/">Home</a>
		</li>
		<li class="inactive">
			<a href="/services/">Services</a>
		</li>
		<li class="inactive">
			<a href="/about">About</a>
		</li>
		<li class="inactive">
			<a href="/contact">Contact</a>
		</li>
		<li class="inactive">
			<a href="javascript:;" class="langselect" data-key="Spanish">Español</a>
		</li>
	{php}} else{{/php}
		<li class="inactive">
			<a href="/es/">Inicio</a>
		</li>
		<li class="inactive">
			<a href="/es/servicios/">Servicios</a>
		</li>
		<li class="inactive">
			<a href="/about">Nuestra Empresa</a>
		</li>
		<li class="inactive">
			<a href="/contact">Contacto</a>
		</li>
		<li class="inactive">
			<a href="javascript:;" class="langselect" data-key="English">English</a>
		</li>
	{php}}{/php}
</ul>

 

I'm still a little confused with this templating system...

[laszlof]

You dont need to use PHP for that, and $language probably isnt set in PHP anyways. It is however, set in smarty. You'd change your conditionals to something like this, using straight smarty markup.

 

{if $language eq 'English'}
stuff here
{else}
other stuff
{/if}

 

However, what you're doing is a waste of time. The language system in WHMCS is setup to use the files in lang/* for translations. It will also accept files in lang/overrides/*

 

For example, in your menu, you have Home, Services, About, Contact. You'd create a new file called 'lang/overrides/english.php with the following:

 

<?php

$_LANG['home'] = 'Home';
$_LANG['services'] = 'Services';
$_LANG['about'] = 'About';
$_LANG['contact'] = 'Contact';

 

Then create another file in the same directory called "spanish.php" with the following:

 

 

<?php

$_LANG['home'] = 'Inicio';
$_LANG['services'] = 'Servicios';
$_LANG['about'] = 'Nuestra Empresa';
$_LANG['contact'] = 'Contacto';

 

Then in your header, or where this menu is shown, you'd do this:

 

<ul id="nav">
		<li class="inactive">
			<a href="/">{$LANG.home}</a>
		</li>
		<li class="inactive">
			<a href="/services/">{$LANG.services}</a>
		</li>
		<li class="inactive">
			<a href="/about">{$LANG.about}</a>
		</li>
		<li class="inactive">
			<a href="/contact">{$LANG.contact}</a>
		</li>
		<li class="inactive">
                               {if $language eq 'English'}
			<a href="javascript:;" class="langselect" data-key="Spanish">Español</a>
                               {else}
                               <a href="javascript:;" class="langselect" data-key="English">English</a>
                               {/if}
		</li>

 

Hope this helps.

[stevenpicado]

Hey laszlof, that's pretty interesting, I did everything but there must be something missing as the link didn't trigger the language switch, aren't we supposed to call this newly created files (english.php and spanish.php) from somewhere?

 

Thanks

[laszlof]

The language files are automatically imported by WHMCS. Thats what the language switcher does.

 

As for the problem you're having, did you add the form and javascript to your header I listed previously? You can add it right below the opening <body> tag, and it should work fine.

 

<form id="langform" action="index.php" method="POST">
   <input type="hidden" name="language" value="" />
</form>
{literal}
<script>
   $('.langselect').click(function() {
       $('[name=language]').val($(this).attr('data-key'));
       $('#langform').submit();
   });
</script>
{/literal}

[stevenpicado]

mmm that's weird I had it right before the closing body tag, I moved it to where you suggested but nothing really happens, it's probably the fact that I've been working for so long now and its night time already, I'll do something else to clear my mind and try again tomorrow, thanks so much for the help.

[stevenpicado]

Hello again,

 

I'm trying to finish this and maybe provide an update on what's going on, the conditional functionality is working fine, but the language links are not working, they are dead, any ideas why?

 

Yet another question, as you could imagine the links to my static pages should point to different pages depending on the language for example "Services" should point to /services while "Servicios" needs to go to /es/servicios

 

How can smarty take care of that one?

 

Thanks everyone

[laszlof]

You know its not necessary to create separate pages for different languages right? You just need to create all the text as language variables and reference them that way.

 

Not sure why you cant get the code I gave you to work without looking at it. It works fine in my test environment.

[stevenpicado]

Well yeah but for my non WHMCS content pages I rather keep them separated.

 

This is the part of my code that has the new additions:

 

<body>
<form id="langform" action="index.php" method="POST">
<input type="hidden" name="language" value="" />
</form>
{literal}
<script>
$('.langselect').click(function() {
	$('[name=language]').val($(this).attr('data-key'));
	$('#langform').submit();
});
</script>
{/literal}
{$headeroutput}
<div id="top_container">
 <div id="top">
<img src="/images/main/header-bg.png" alt="" />
   <div id="welcome_box">{if $loggedin}{$LANG.welcomeback}, <strong>{$loggedinuser.firstname}</strong>   <img src="templates/{$template}/images/icons/details.gif" alt="{$LANG.clientareanavdetails}" width="16" height="16" border="0" class="absmiddle" /> <a href="clientarea.php?action=details" title="{$LANG.clientareanavdetails}"><strong>{$LANG.clientareanavdetails}</strong></a>   <img src="templates/{$template}/images/icons/logout.gif" alt="{$LANG.logouttitle}" width="16" height="16" border="0" class="absmiddle" /> <a href="logout.php" title="Logout"><strong>{$LANG.logouttitle}</strong></a>{else}{$LANG.please} <a href="clientarea.php" title="{$LANG.loginbutton}"><strong>{$LANG.loginbutton}</strong></a> {$LANG.or} <a href="register.php" title="{$LANG.clientregistertitle}"><strong>{$LANG.clientregistertitle}</strong></a>{/if}</div>
<ul id="nav">
	<li class="inactive">
		<a href="/">{$LANG.home}</a>
	</li>
	<li class="inactive">
		<a href="/services/">{$LANG.services}</a>
	</li>
	<li class="inactive">
		<a href="/about">{$LANG.about}</a>
	</li>
	<li class="inactive">
		<a href="/contact">{$LANG.contact}</a>
	</li>
	<li class="inactive">
		{if $language eq 'English'}
			<a href="javascript:;" class="langselect" data-key="Spanish">Español</a>
		{else}
			<a href="javascript:;" class="langselect" data-key="English">English</a>
		{/if}
	</li>
</ul>
 </div>
</div>

[laszlof]

Should work, try firebug or your browsers javascript console to see if its throwing any errors.

You might try to just add this inside the click event function:

 

console.log('CLICK EVENT DETECTED');

 

It should spit that out in the javascript console when you click on those links.

[stevenpicado]

Just one error but it's for one of the extensions I have installed, I had already tried that, well, in the for of console.log(this) and shows nothing, console.log('CLICK EVENT DETECTED'); didn't log as well. Weird

[laszlof]

You might want to try wrapping the function in a .ready function. Something like this

 

<script>
$(document).ready(function() {
$('.langselect').click(function() {
               console.log('CLICK EVENT DETECTED');
               console.log($(this));
	$('[name=language]').val($(this).attr('data-key'));
	$('#langform').submit();
});
});
</script>

[stevenpicado]

That did it

 

I'm getting an error on the console though, "event.layerX and event.layerY are broken and depracated in webkit. They will be removed from the engine in the near future."

 

Thanks laszlof!

[laszlof]

No problem. That error is related to some other script you have on the page most likely.