El Blog de Magento

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!