Setting up flags as currency link instead of dropdown menu, error in code somewhere!

[damiende]

Hey everyone;

In my currencies.phtml i have the following code:

<?php if($this->getCurrencyCount()>1): ?>
    <div class="block-currency">
     <ul>
       <?php foreach ($this->getCurrencies() as $_code => $_name): ?>
               <li>
           <a href="<?php echo $this->getSwitchCurrencyUrl($_code) ?>" onclick="setLocation(this.value);">
                   <img src="<?php echo Mage::getBaseUrl('media').'flag/'.$_code.'.gif'; ?>" title="<?php echo $_name ?> - <?php echo $_code ?>" alt="<?php echo $_name ?> - <?php echo $_code ?>" width="20" height="20" />
       </a>
               </li>
            
       <?php endforeach; ?>
       </ul>     
    </div>
<?php endif; ?>

And in my Media/flag folder I have USD.gif  CAD.gif and EUR.gif flag images -  however, in my header where the dropdown used to be, it was replaced by 3 vertical 'blank' broken link images.  

The store switcher function for the currency works, but the image is not displayed -  the flag images are replaced by a default broken image.

So I'm not sure if the code is broken somewhere, or if the flag names are wrong, maybe its not referencing the currency code correctly.  

Any help would be greatly appeciated!

[Theis Corfixen]

Hi Damiende

Your code looks OK, the broken image links are however a sign, that the files you have uploadet might be located a bit different then what you think. Did you upload these images from the Magento administration, via the media browser in the editor, becaouse if you did that the flag folder is located within media/wysiwyg, rather then just media/.

If you did it via FTP/SFTP also make sure that the files have the same file permision that the other readable files on the server have.

[damiende]

Thanks the images are working perfect now, they had 0 permision for world/global.  odd.


The only other thing is the images are vertical, I would assume something in the CSS would control it if I wanted it to be horizonal.

Something like setting in the HTML:  

 <div class="block-currency">
     <ul id="currency">
       <?php foreach ($this->getCurrencies() as $_code => $_name): ?>
               <li>
           <a href="<?php echo $this->getSwitchCurrencyUrl($_code) ?>" onclick="setLocation(this.value);">
                   <img src="<?php echo Mage::getBaseUrl('media').'flag/'.$_code.'.jpg'; ?>" title="<?php echo $_name ?> - <?php echo $_code ?>" alt="<?php echo $_name ?> - <?php echo $_code ?>" width="20" height="20"  />
       </a>
               </li>
            
       <?php endforeach; ?>
       </ul>     
    </div>

So 

 <ul id="currency">

And then in the skin.CSS:

Something like:  

#currency li
{
display: inline;
list-style-type: none;
padding-right: 2px;
}

 I'm missing something, but I think im close, it didn't quite work!

[Theis Corfixen · Accepted solution]

Looks correct. 

If you have CSS merging enabled you might need to refresh this to see the changes apear in the frontend.

Check if you have enabled in system configration:

System > Configuration > Developer > CSS Settings > Merge CSS

While you are working you should set this to "No", but when you go live you can clear the CSS cache from:

System > Cache Mangement >  Flush Javascript/Css Cache

[damiende]

Hey Theis,

The flush javascript/css didn't appear to do anything.

Should I have that code in the Skin.css file or styles.css file that controls the horizontal positioning of the flag list?

[Theis Corfixen]

Guesing that the site in referal is the G3 site, still, I can't find the referenced styling anywhere. You do have CSS compression enabled. You should disable that during development that will make debugging a lot easier :-).

I can't tell you wether skin.css og styles.css will be correct becaouse i don't know how you template is setup. Please go to:

System > Configuration > Developer > CSS Settings > Merge CSS

And set this to No. then you will have a clearer picture of where to put your styling :-).

I hope this helps :-)

[damiende]

Ok, that was my fault, i was in the wrong store view css, i put it in all store views and it shows it horizontally now.

Thanks Theis!!

The only thing that is left is to troubleshoot why the store switcher doesn't always work.  It works sometimes, then sometimes doesn't, sometimes page has to be refreshed 5-6 times for it to finally switch prices.  This was happening way back even when it was the default drop-down switcher.

I've tested it on Chrome, IE, and Mozilla as well as other employees on their computer and the problem ocasionally persists.  Looking thru old forums and stuff trying to figure out the cause.


Edit:  To clarify;  if you press the CAD flag, it doesn't do anything until you refresh 5-6 times, or if you change categories.  Then it shows cad prices.   Then right after, if you press USD flag, it does nothing, but if you change category to something else, then the prices are all USD.

It seems to have a refresh issue.

Edit2:  my understanding is that perhaps the currency is getting cached.  So it needs some sort of unique ID so it wont get cached, that way it'll refresh?  Not 100% Sure.

Edit3:  Also, when clicking on currency change, the URL doesn't change. -  maybe this is an issue also?