Set an option from selection without user click (eg default currency)

Hello everyone I need to make a change my stores currency converter to automatically select one from the list as default when a user first visits my site.

It's a proprietary platform so only this converter will work but it requires a click.

From what i understand the script is gathering the number of the clicked span id as the currency id to set a cookie with.

This is the full javascript, I need to change the second part of it:

//<![CDATA[
$(function () {
$('.all-currency').mouseenter(function (event) {
$(this).addClass('ui-corner-top').addClass('currency-active shadow');
$('.currency-list').addClass('currency-active shadow').show().position(
{ of: '.selected-currency', my: 'left top', at: 'left bottom' });
}).mouseleave(function (event) {
$(this).removeClass('ui-corner-top').removeClass('currency-active shadow');
$('.currency-list').removeClass('currency-active shadow').hide();
});

$('.currency-list div').click(function () {
var cc = $(this).children('span').attr('id').substring(1);
document.cookie = 'CurrencyId=' + cc + ';path=/';
var s = location.pathname;
if (s.length > 3 && s.substring(3, 4) == '/')
s = s.substring(3);
location.pathname = s;
});
});
//]]>

And this is part of the html where the currency list is:

<div class="currency-list ui-corner-bottom">

<div class="flag">
<img alt="USD icon" src="/images/currency/USD.png" />
<span id="c1">USD</span>
</div>

<div class="flag">
<img alt="EUR icon" src="/images/currency/EUR.png" />
<span id="c2">EUR</span>
</div>

<div class="flag">
<img alt="AUD icon" src="/images/currency/AUD.png" />
<span id="c3">AUD</span>
</div>

etc......

I couldn't find out how to do this and tried all sorts of things, so I appreciate your help :)

EDIT Can we try modify the second part to just choose the AUD (span id c3) to set the initial cookie with, without being clicked first or needing the rest of the converter?

I imagine it should be something simply like (from the AUD option):

function () { document.cookie = 'CurrencyId=' + c3 + ';path=/AUD';

I feel I'm on track but am missing something

1 answer

  • answered 2018-11-08 07:58 front_end_dev

    Selected the first flag div as default and click on it after DOM render.

    Updated JS

    $(function () {
    $('.all-currency').mouseenter(function (event) {
    $(this).addClass('ui-corner-top').addClass('currency-active shadow');
    $('.currency-list').addClass('currency-active shadow').show().position(
    { of: '.selected-currency', my: 'left top', at: 'left bottom' });
    }).mouseleave(function (event) {
    $(this).removeClass('ui-corner-top').removeClass('currency-active shadow');
    $('.currency-list').removeClass('currency-active shadow').hide();
    });
    $('.currency-list div').click(function () {
    var cc = $(this).children('span').attr('id').substring(1);
    document.cookie = 'CurrencyId=' + cc + ';path=/';
    var s = location.pathname;
    if (s.length > 3 && s.substring(3, 4) == '/')
    s = s.substring(3);
    location.pathname = s;
    });
    
    var flags = $('.flag');
    if(flags && flags.length > 0){
      $(flags[0]).click();
    }
    });