Jump to content

Currency Selector on header.tpl


djbw

Recommended Posts

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">

<!-- Currency -->

<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

Link to comment
Share on other sites

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. :)

zvetFVc.png
w9xoh5I.png

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 +)...

 

Link to comment
Share on other sites

  • 3 months later...
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();
        },
    });

YX4hAM9.png

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! 9_9

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.

Link to comment
Share on other sites

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.
prSNpsE.png

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>

 

Link to comment
Share on other sites

  • 2 years later...
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.

Link to comment
Share on other sites

  • 4 months later...
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

 

Link to comment
Share on other sites

  • 6 months later...

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

 

 

Link to comment
Share on other sites

  • 1 year later...
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?

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated