Currency Selector on header.tpl

djbw · June 28, 2017

Hi,

I created something very much like this solution https://forums.whmcs.com/showthread.php?115658-currency-selector-on-header-tpl a couple of years ago, but it no longer works since upgrading to 7.2. Is anyone able to help?

I understand whmcs.js isn't used any more, all the js is in the scripts.min.js so I tried creating a custom.js with the code I used to have in whmcs.js and loaded this custom.js in includes/head.tpl

Then I also changed the code in my header.tpl to use ul / li like the Language Chooser now does... but the popover doesn't display when I click the link

<ul class="top-nav">



<li>

<a href="#" class="choose-currency" data-toggle="popover" id="currencyChooser"><i class="fa fa-money"></i><span class="hidden-xs"> {$LANG.choosecurrency}</span> <span class="caret"></span></a>

<div id="currencyChooserContent" class="hidden">

<ul>

{foreach from=$currencies item=curr}

<li>

<a href="{$currentpagelinkback}currency={$curr.id}">{$curr.code}</a> <a href="{$currentpagelinkback}currency={$curr.id}"><img src="assets/img/flags/{if $curr.code eq "EUR"}eu{elseif $curr.code eq "GBP"}gb{elseif $curr.code eq "USD"}us{else}na{/if}.png" border="0" alt="" /></a>

</li>

{/foreach}

</ul>

</div>

</li>

Any help gratefully appreciated!

Thanks,

David

brian! · June 29, 2017

Hi David,

the code in the above thread still fundamentally works, but because of WHMCS file changes, you need to do it slightly different now...

the header.tpl code is very similar - i'll use my previous code as a starting point and then you can tweak for your own needs...

            <!-- Currency -->
           {if !$loggedin && count($currencies) > 1}
               <li>
                   <a href="#" class="choose-currency" data-toggle="popover" id="currencyChooser"><i class="fa fa-usd"></i> {$LANG.choosecurrency} <b class="caret"></b></a>
                   <div id="currencyChooserContent" class="hidden">
                       {foreach from=$currencies item=currchoice}
                           <img src="{$BASE_PATH_IMG}/flags/{$currchoice.code|substr:0:2|strtolower}.png"> <a href="{$currentpagelinkback}currency={$currchoice.id}">{if $currency.id eq $currchoice.id}<u>{/if}{$currchoice.code}</u></a>
                       {/foreach}
                   </div>
               </li>
           {/if}

so that's the template side out of the way, now to the JavaScript.... with the removal of whmcs.js, the way I would do it would be to open /templates/six (or custom)/js/scripts.js (the 1MB file not scripts.min.js), find the language chooser code, add the currency chooser (exactly the same as from the above thread), minify the js file and save it as scripts.min.js - the downside to this method is that you may have to do it after every WHMCS update, though not all updates will include changes to the .js files and there tends to be no more than half a dozen "real" updates a year anyway...

I agree that if you could do it through an external custom js file that would be simpler, but the upside to the above method is that it works.

and if you want to see it in action on a v7.2.2 dev site... :idea:

https://www.screencast.com/t/rBeiMwLv0wdE

Update: how to use it without the need for changes to .js files (v6.22 -> v7.5.1 +)...

djbw · June 29, 2017

Ah great, thanks very much - works a treat!

Code-Storm · October 8, 2017

Hello Brian Can you please help me with that code! i am running on 7.3.0 and i am currently using three currency USD, CAD, BDT. please help me with that!

brian! · October 8, 2017

2 hours ago, Code-Storm said:

Can you please help me with that code! i am running on 7.3.0 and i am currently using three currency USD, CAD, BDT. please help me with that!

the code remains pretty much the same for v7.3.0 - in header.tpl, you just paste the code wherever you want to add the currency link...

{if !$loggedin && count($currencies) > 1}
	<li>
		<a href="#" class="choose-currency" data-toggle="popover" id="currencyChooser"><i class="fa fa-usd"></i> {$LANG.choosecurrency} <b class="caret"></b></a>
		<div id="currencyChooserContent" class="hidden">
			{foreach from=$currencies item=currchoice}
				<img src="{$BASE_PATH_IMG}/flags/{$currchoice.code|substr:0:2|strtolower}.png"> <a href="{$currentpagelinkback}currency={$currchoice.id}">{if $currency.id eq $currchoice.id}<u>{/if}{$currchoice.code}</u></a>
			{/foreach}
		</div>
	</li>
{/if}

you'd also need to find a 16px Bangladesh flag icon, call it "bd.png" and upload it to the /assets/img/flags folder.

as 7.1+ no longer uses whmcs.js, one option to make the jQuery dropdown work in v7.3 is to add the code below to scripts.js, minify it and then replace scripts.min.js with the newly minified file.

    // Currency chooser popover
    jQuery('#currencyChooser').popover({
        container: 'body',
        placement: 'bottom',
        template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
        html: true,
        content: function() {
            return jQuery("#currencyChooserContent").html();
        },
    });

you may have to do that last .js step after every WHMCS update (if the scripts.min.js file has been modified)... but updates only tend to get released every few months, though I imagine we'll see v7.3.1 before the end of October!

when I get the chance, i'll look into alternative solutions to get the .js working that don't involve minify the scripts.js file... a bootstrap hook might be one option.

Code-Storm · October 9, 2017

Thanks Brian It Works Finally! I am grateful to you! one ques i asked to you that, is there any option to short the title from "Choose Currency" to Select Currency or Currency

brian! · October 9, 2017

4 hours ago, Code-Storm said:

is there any option to short the title from "Choose Currency" to Select Currency or Currency

three options...

Option 1 - use Language Overrides to modify the language string $LANG.choosecurrency...

$_LANG['choosecurrency'] = "Choose Currency";

although be aware that the string is also used in the Currency Sidebar in the cart - so if you change it for the header dropdown, it will change the sidebar too.

Option 2 - again, use Language Overrides, but create a new string just for this header dropdown (remember to do it for all the languages available in your installation)...

$_LANG['headercurrency'] = "Currency";

and then replace {$LANG.choosecurrency} with {$LANG.headercurrency} in the header.tpl code.

Option 3 - the lazy method - just hard-code it to use whatever term you want... but everyone will see it in the same language.

<a href="#" class="choose-currency" data-toggle="popover" id="currencyChooser"><i class="fa fa-usd"></i> Currency <b class="caret"></b></a>

Code-Storm · October 10, 2017

Well, Got It! Thank you!

VishalAlim · February 16, 2020

Hi

I added this code in header and custom.js. It was working well but it has stopped working suddenly. I am using whmcs 7.8.3. I have not updated or made any chnages since it first time I set it and worked. Can anyone help? Here is the link https://www.vishalkumar.com/whmcs/

brian! · February 24, 2020

On 16/02/2020 at 14:40, VishalAlim said:

I added this code in header and custom.js. It was working well but it has stopped working suddenly. I am using whmcs 7.8.3. I have not updated or made any chnages since it first time I set it and worked. Can anyone help? Here is the link https://www.vishalkumar.com/whmcs/

the code to display the currency dropdown is commented out in header.tpl..

			{*
			{if !$loggedin && count($currencies) > 1}
			<li>
				<a href="#" class="choose-currency" data-toggle="popover" id="currencyChooser"><i class="fa fa-usd"></i> {$LANG.choosecurrency} <b class="caret"></b></a>
				<div id="currencyChooserContent" class="hidden">
					{foreach from=$currencies item=currchoice}
						<img src="{$BASE_PATH_IMG}/flags/{$currchoice.code|substr:0:2|strtolower}.png"> <a href="{$currentpagelinkback}currency={$currchoice.id}">{if $currency.id eq $currchoice.id}<u>{/if}{$currchoice.code}</u></a>
					{/foreach}
				</div>
			</li>
			{/if}
			*}

assuming the js is present, if you remove the comments, the remaining code would work.

VishalAlim · June 28, 2020

On 2/24/2020 at 2:27 PM, brian! said:

the code to display the currency dropdown is commented out in header.tpl..


			{*
			{if !$loggedin && count($currencies) > 1}
			<li>
				<a href="#" class="choose-currency" data-toggle="popover" id="currencyChooser"><i class="fa fa-usd"></i> {$LANG.choosecurrency} <b class="caret"></b></a>
				<div id="currencyChooserContent" class="hidden">
					{foreach from=$currencies item=currchoice}
						<img src="{$BASE_PATH_IMG}/flags/{$currchoice.code|substr:0:2|strtolower}.png"> <a href="{$currentpagelinkback}currency={$currchoice.id}">{if $currency.id eq $currchoice.id}<u>{/if}{$currchoice.code}</u></a>
					{/foreach}
				</div>
			</li>
			{/if}
			*}

assuming the js is present, if you remove the comments, the remaining code would work.

Hi @Brian

I have put the code again freshly js and all code in header but it is not working.

Can you please help.

Regards

brian! · June 29, 2020

On 28/06/2020 at 03:24, VishalAlim said:

Can you please help.

did you remove the comments {* and *} from the beginning and end of the above code ?

Stuart Newton · January 13, 2021

Sort of continuing on from this, I see that in footer of Twenty-one Theme, there is a language and currency selector joined together. How do I insert this into my "Six Template"

I have tried a few things and just can't "rip" the js out of 21 and insert it into 6.

Also on 21, there seems to be two pieces of code that calls the selector, an IF and also a Form, this has lost me completely.

I thought it would just be a simple copy and paste, but need jelp with which codes to copy from 21 to 6 themes, i.e JS, CSS and Template modifications

Ashiq · October 2, 2022

On 2/24/2020 at 2:57 PM, brian! said:

the code to display the currency dropdown is commented out in header.tpl..


			{*
			{if !$loggedin && count($currencies) > 1}
			<li>
				<a href="#" class="choose-currency" data-toggle="popover" id="currencyChooser"><i class="fa fa-usd"></i> {$LANG.choosecurrency} <b class="caret"></b></a>
				<div id="currencyChooserContent" class="hidden">
					{foreach from=$currencies item=currchoice}
						<img src="{$BASE_PATH_IMG}/flags/{$currchoice.code|substr:0:2|strtolower}.png"> <a href="{$currentpagelinkback}currency={$currchoice.id}">{if $currency.id eq $currchoice.id}<u>{/if}{$currchoice.code}</u></a>
					{/foreach}
				</div>
			</li>
			{/if}
			*}

Brian! How to I can use the currency switcher for the non-looged in user?

Currency Selector on header.tpl

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Important Information