Vamos a ha dar un aire distinto a la selección de store view (generalmente, cada ‘vista de tienda’ se emplea como ‘vista de idioma’), que en el theme default de Magento viene presentada en forma de dropbox. Algo parecido a esto:
Ahora queremos presentarlo así:
- Una lista (mostrada en línea) de todos los store view (idiomas), y que cada uno vaya acompañado de un icono-banderita.
- Rollover sobre los iconos-banderitas.
- Dar una clase selected a la la vista de tienda en la que nos encontramos.
En este ejemplo tenemos 3 store view, español (con clase selected), inglés y japonés:
Paso 1.
Diseña o consigue tus iconos. En este ejemplo hemos usado el pack de famfamfam. Recuerda el rollover, para el estado normal del icono hemos duplicado la imagen y la hemos desaturado. Guarda los archivos en skin/frontend/default/tu_theme/images. Para este ejemplo, tenemos 6 archivos que los he llamado así:
flag-en.gif
flag-en-selected.gif
flag-es.gif
flag-es-selected.gif
flag-jp.gif
flag-jp-selected.gif
Paso 2.
Edita tu archivo languages.phtml, situado en app/design/frontend/default/tu_theme/template/page/switch; reemplaza todo con lo siguiente y guarda:
<?php if(count($this->getStores())>1): ?> <div class="language-switcher"> <ul> <?php foreach ($this->getStores() as $_lang): ?> <li> <?php if($_lang->getId()==$this->getCurrentStoreId()): ?> <span class="<?php echo $_lang->getCode() ?> selected"> <?php echo $this->htmlEscape($_lang->getName()) ?></span> <?php else: ?> <a class="<?php echo $_lang->getCode() ?>" href="<?php echo $_lang->getCurrentUrl() ?>"> <?php echo $this->htmlEscape($_lang->getName()) ?></a> <?php endif; ?> </li> <?php endforeach; ?> </ul> </div> <?php endif; ?>
Paso 3.
Edita tu archivo boxes.css, situado en skin/frontend/default/tu_theme/css. Añade lo siguiente y guarda:
.language-switcher li { display:inline; } .language-switcher a.es { background:url(../images/flag-es.gif) no-repeat; padding-left:20px; } .language-switcher .es.selected, .language-switcher a:hover.es { background:url(../images/flag-es-selected.gif) no-repeat; padding-left:20px; } .language-switcher a.en { background:url(../images/flag-en.gif) no-repeat; padding-left:20px; } .language-switcher .en.selected, .language-switcher a:hover.en { background:url(../images/flag-en-selected.gif) no-repeat; padding-left:20px; } .language-switcher a.jp { background:url(../images/flag-jp.gif) no-repeat; padding-left:20px; } .language-switcher .jp.selected, .language-switcher a:hover.jp { background:url(../images/flag-jp-selected.gif) no-repeat; padding-left:20px; }
Listo. Sólo falta darle tus últimos retoques de CSS y con esto finaliza este minitutorial.
P.D.: Me gustaría hacer lo mismo para el currency switcher (cambio de moneda), pero parece ser que funciona de otra forma. ¡Si alguien se anima que nos lo cuente!
