Moving Currency Choice as dropdown in header

[jkmorganpets]

I would like to have a currency dropdown in the lower right hand side of my logo header. Also, is it possible to add the currency selected to the amount. Say if the site is in USD then the price would show 49.50USD so the customer would always know which currency they were operating in. I am in Canada, but 90% of my customer base is in the US. 

See image for clarification

[bsmither]

For the currency indicator issue, in admin, Currencies, for the USD, enter USD in the "Symbol Right" column. Same for CAD.

I'll have code changes shortly.

[bsmither]

In the Kurouto skin:

box.currency.php

Find:
<div id="currency_select">
  <p>{$LANG.common.change_currency}:
  {foreach from=$CURRENCIES item=currency}
  <a href="{$currency.url}" class="{$currency.css}" title="{$currency.name}">{$currency.code}</a>
  {/foreach}
  </p>
</div>

Change to:
{*
<div id="currency_select">
  <p>{$LANG.common.change_currency}:
  {foreach from=$CURRENCIES item=currency}
  <a href="{$currency.url}" class="{$currency.css}" title="{$currency.name}">{$currency.code}</a>
  {/foreach}
  </p>
</div>
*}
<div id="quick_search">
<form id="currency_select" action="{$VAL_SELF}" method="post">
  <p>{$LANG.common.change_currency}:
  <select name="set_currency" class="auto_submit">
  {foreach from=$CURRENCIES item=currency}
  <option value="{$currency.code}" {$currency.selected} title="{$currency.name}">{$currency.symbol_left} {$currency.code} {$currency.symbol_right}</option>
  {/foreach}
  </select> <input type="submit" value="{$LANG.common.submit}" />
  </p>
</form>
</div>

main.php:

Find:
<div id="account">
  {$SESSION} {$CURRENCY} {$LANGUAGE}
</div>
<div id="header">
  {$SEARCH_FORM}
  <p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>
</div>

Change to:
<div id="account">
  {$SESSION} {* $CURRENCY *} {$LANGUAGE}
</div>
<div id="header">
  {* $SEARCH_FORM *}{$CURRENCY}
  <p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>
</div>

We may need to make some CSS adjustments for positioning and styling.

[jkmorganpets]

 

main.php:

Find:
<div id="account">
  {$SESSION} {$CURRENCY} {$LANGUAGE}
</div>
<div id="header">
  {$SEARCH_FORM}
  <p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>
</div>

Change to:
<div id="account">
  {$SESSION} {* $CURRENCY *} {$LANGUAGE}
</div>
<div id="header">
  {* $SEARCH_FORM *}{$CURRENCY}
  <p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>
</div>

 

I no longer have the code in main.php you want me to find as we moved the search box. 

My code reads:

<div id="account">
      {$SESSION} {$CURRENCY} {$LANGUAGE}
    </div>
    <div id="header">
      
      <p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>
    </div>

 

I did replace the code anyway and what it has done is move the clickable currency selection to a drop down box just below where the clickable line was.  And when you change pages the word "submit" flashes then disappears. Also, the choices show twice. If I could move it over to the far right, that would be great. Check it here:   http://www.jkmorganpets.com/cc/index.php?_a=category&cat_id=70

 

[bsmither]

main.php:

Find:
<div id="account">
  {$SESSION} {$CURRENCY} {$LANGUAGE}

Change to:
<div id="account">
  {$SESSION} {* $CURRENCY *} {$LANGUAGE}

Find:
<div id="header">

  <p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>
</div>

Change to:
<div id="header">
  {$CURRENCY}
  <p class="logo"><a href="{$STORE_URL}"><img src="{$STORE_LOGO}" alt="{$META_TITLE}" /></a></p>
</div>

That should fix most of what you are experiencing. We need suppress the original display of {$CURRENCY}. Changing it to {* $CURRENCY *} will do that. And we will be putting the new {$CURRENCY} where the Search field was.

[jkmorganpets]

Doesn't seem to make much of a difference.

 

Jill

[bsmither]

I am just not thinking things through. Ughh!!

Of course, you had to change up the CSS to make the Search box work at its new location.

I had made the assumption that the quick_search CSS was still intact.

So:

box.currency.php

Change from:

<div id="quick_search">

To:

<div id="currency_select">

Then:

common.css

Find:

#currency_select {
	float: left;
	margin-left: 25px;
}

Change to:

#currency_select {
/*	float: left; */
/*	margin-left: 25px; */
	color: #FFF;
	float: right;
	position: relative;
	right: 0px;
	top: 90px;
	width: 320px;
}

For each edit in common.css, you must force your browser to reload that CSS file (force reload). Adjust the width as needed. The actual width of the drop-down will not be as great as 320px, so reducing the real estate width given to it will have it scoot more the right.

[jkmorganpets]

Almost there. I had to change the 90px to 5px to get it up to the top. But I can't seem to move it over a little more to the edge away from the horse's eye. And the submit button still flashes.

 

Jill

[bsmither]

I have no suggestion for the flashy submit button - it doesn't do that for me.

Set the width to 220px.

If you think it wise to delete the "Change Currency" caption, remove it and the <p> and </p> tags. Then you can set the width to 100px.

You can try this:

In box.currency.php, find:

</select> <input type="submit" value="{$LANG.common.submit}" />

Change to:

</select> <input style="display:none;" type="submit" value="{$LANG.common.submit}" />

This has the browser apply the style immediately instead of waiting for the javascript to do it.

[jkmorganpets]

Perfect.  I just didn't make a big enough change.

 

Thanks again

[bsmither]

I've edited the post above since you made your latest reply. Please re-read it if necessary.