Jump to content

Curency as a Drop down


Recommended Posts

Hey guys, I need a big favor from you. I'm using a custom theme, and the curency is set to display horizontaly. Do you know how to change my theme code so I can create a list, and when I select one list item (for example - USD dollars) the curency on the web site will be change to Dollars?

Here is my curent curency block code:

<!-- Block currencies module -->
<script type="text/javascript">
$(document).ready(function () {
$("#setCurrency").mouseover(function(){
 $(this).addClass("countries_hover");
 $(".currencies_ul").addClass("currencies_ul_hover");
});
$("#setCurrency").mouseout(function(){
 $(this).removeClass("countries_hover");
 $(".currencies_ul").removeClass("currencies_ul_hover");
});
$('ul#first-currencies li:not(.selected)').css('opacity', 0.3);
$('ul#first-currencies li:not(.selected)').hover(function(){
 $(this).css('opacity', 1);
}, function(){
 $(this).css('opacity', 0.3);
});
});
</script>

<div id="currencies_block_top">
<form id="setCurrency" action="{$request_uri}" method="post">
 <ul id="first-currencies" class="currencies_ul">
  {foreach from=$currencies key=k item=f_currency}
   <li {if $cookie->id_currency == $f_currency.id_currency}class="selected"{/if}>
 <a href="javascript:setCurrency({$f_currency.id_currency});" title="{$f_currency.name}">{$f_currency.sign}</a>
   </li>
  {/foreach}
 </ul>
 <p>
  <input type="hidden" name="id_currency" id="id_currency" value=""/>
  <input type="hidden" name="SubmitCurrency" value="" />
  {l s='Currency' mod='blockcurrencies'}
 </p>

</form>
</div>
<!-- /Block currencies module -->

 

And I've try this code:

 

<form action="{$request_uri}" method="post">
 <select>
   {foreach from=$currencies key=k item=f_currency}
   <option value="javascript:setCurrency({$f_currency.id_currency});">{$f_currency.sign}</option>
   {/foreach}
 </select>
<input type="hidden" name="id_currency" id="id_currency" value=""/>
<input type="submit" name="SubmitCurrency" value="" />
{l s='Currency' mod='blockcurrencies'}
</form>

 

But it's not working. Can anyone give me the right code. The original code works just fine. Thank you so much

Link to comment
Share on other sites

Hey Shacker tryed that doesn't work. Any way I just find the solution:

The file: blockcurencies.tpl I modifyed like this:

 

<!-- Block currencies module -->
<script type="text/javascript">
$(document).ready(function () {
$("#setCurrency").mouseover(function(){
 $(this).addClass("countries_hover");
 $(".currencies_ul").addClass("currencies_ul_hover");
});
$("#setCurrency").mouseout(function(){
 $(this).removeClass("countries_hover");
 $(".currencies_ul").removeClass("currencies_ul_hover");
});
$('ul#first-currencies li:not(.selected)').css('opacity', 0.3);
$('ul#first-currencies li:not(.selected)').hover(function(){
 $(this).css('opacity', 1);
}, function(){
 $(this).css('opacity', 0.3);
});
});
</script>
<!--
<form action="{$request_uri}" method="post">
 <select>
   {foreach from=$currencies key=k item=f_currency}
   <option value="javascript:setCurrency({$f_currency.id_currency});">{$f_currency.sign}</option>
   {/foreach}
 </select>
<input type="hidden" name="id_currency" id="id_currency" value=""/>
<input type="submit" name="SubmitCurrency" value="" />
{l s='Currency' mod='blockcurrencies'}
</form>
-->

<div id="currencies_block_top">
<form id="setCurrency" action="{$request_uri}" method="post">
 <ul id="dropdown">
   <li class="curency-text"><a href="">{l s='Currency' mod='blockcurrencies'}</a>
  <ul id="first-currencies" class="currencies_ul">
 {foreach from=$currencies key=k item=f_currency}
  <li {if $cookie->id_currency == $f_currency.id_currency}class="selected"{/if}>
   <a href="javascript:setCurrency({$f_currency.id_currency});" title="{$f_currency.name}">{$f_currency.sign}</a>
  </li>
 {/foreach}
   </ul> <!-- end of currencies_ul -->
   </li>
 </ul> <!-- end of dropdown -->


 <p class="trigger">
  <input type="hidden" name="id_currency" id="id_currency" value=""/>
  <input type="hidden" name="SubmitCurrency" value="" />
 </p>

</form>
</div>
<!-- /Block currencies module -->

 

Then I edit the blockcurencies.css. Here is the css code:

/* block top currencies */
#currencies_block_top {width:auto;float:right;margin-top:3px;position:absolute;top:20px;right:0;   z-index: 6;}
ul.currencies_ul {
 position: absolute;
 z-index: 3;
 left:10px
}
li.curency-text a{
 color:#7F7F7F;
 font-size: 10px
}
ul#dropdown, ul#dropdown ul {
 margin: 0;
 padding: 0;
}
ul#dropdown ul {
 background-color: black;
}
ul#dropdown li ul li a {
 color: white;
}
ul#dropdown {
 width: 100px;
}
ul#dropdown li{
 list-style-type: none;
 padding-bottom: 3px;
}
ul#dropdown li a {
 text-decoration: none;
 padding-left: 8px;
 padding-bottom: 5px;
}
ul#dropdown li ul {
 display: none;
 left: 23px;
 margin: 3px 0 -3px;
 position: relative;
 width: 25px;
}
ul#dropdown li:hover ul{
 display: block;
}

 

the result is on http://ez-learn.eu/beyza - this is a development server.

 

Thanks for your time Shacker.

Cheers.

Link to comment
Share on other sites

×
×
  • Create New...