Search code examples
javascriptjquerycookiesjqvmap

jqvmap - javascript custom code using change url with onregionclick


I have the following code for a dropdown of countries. when selected replaces cookie with a new countrycode.:

    <script type="text/javascript">
        $('select-country').observe('change', function(event){
            countryCode = $('select-country').value;
            onChangeUrl = '<?php echo Mage::helper('switcher')->getCountryUrl();    ?>';
            url = onChangeUrl.replace('%geocode%', countryCode);
            setLocation(url);
            event.stop();
        })
    </script>

searching on the internet I found a very good project http://jqvmap.com/. They offer a map and the possibility to trigger a script in order to choose a country. the proposed script code is something like this:

jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap(
    {
        map: 'world_en',
        backgroundColor: '#555555',
        ...etc.etc....
        onRegionClick: function (element, code, region) {
            var message = 'You clicked "'
                + region
                + '" which has the code: '
                + code.toUpperCase();

            alert(message);
        }
    });
});

my objective is to include the first script into the second one so when I click on a region the script replaces the cookie with the country code, but I have limited knowledge of javascript. any idea would be welcome.


Solution

  • On onRegionClick, you can already get the country code by using one of the parameters: code.

    So putting it altogether:

    jQuery(document).ready(function () {
        jQuery('#vmap').vectorMap(
        {
            map: 'world_en',
            backgroundColor: '#555555',
            ...etc.etc....
            onRegionClick: function (element, code, region) {
                // here you already got the code
                // use it to save it to your cookies
                onChangeUrl = '<?php echo Mage::helper('switcher')->getCountryUrl();    ?>';
                url = onChangeUrl.replace('%geocode%', code); // --> use code as the country code
                setLocation(url);
                event.stop();
            }
        });
    });