Seletor de idiomas do Magento com bandeiras

magento-seletor-idiomas-imagem-01

Seletor de idiomas do Magento com bandeiras

Na maioria dos templates para Magento, nós vemos o seletor de idiomas num menu suspenso, um select. E isso é uma função default do Magento. Porém, quando queremos disponibilizar a nossa loja em vários idiomas, isso se torna muito inconveniente e não recomendável, por não ser nada profissional.

magento-seletor-idiomas-imagem-02

Seletor de idiomas padrão do magento

Como acima, para alterarmos o idioma da loja temos que selecionar o idioma no seletor.

Entretanto, nós poderemos utilizar a capacidade do Magento em trabalhar com vários idiomas e efetuarmos alterações na sua forma de exibição. Assim, nós alteramos a exibição dos idiomas de um Select para um modelo com flags, bandeiras.

Antes de seguir as orientações abaixo, é necessário que você faça as devidas configurações no Magento para trabalhar com vários idiomas na sua loja virtual. Caso tenha alguma dúvida desse processo, por favor, clique aqui e siga as instruções.

 1º) Passo

Faça o download das imagens referentes aos idiomas que você disponibilizará na sua loja em Magento. O ideal é que sejam imagens em .jpg ou .png, de mesma altura e largura. No meu caso, por exemplo, uso imagens com width = 16 e height = 11.

Feito o download, você deve pôr as imagens na pasta “images” do tema que está utilizando.

skin –> frontend –> default –> [SeuTema] –> images –> flags

2º) Passo

Abra o seu editor de código favorito e abra o arquivo languages.phtml que você encontra no seguinte diretório:

app –> design –> frontend –> default –> [SeuTema] –> template –> page –> switch

Ali, você encontrará o script padrão do Magento para exibição de multi-lojas:

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
<label for="select-language"><?php echo $this->__('Your Language:') ?></label>
<select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value">
<?php foreach ($this->getStores() as $_lang): ?>
<?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?>
<option value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->htmlEscape($_lang->getName()) ?></option>
<?php endforeach; ?>
</select>
</div>
<?php endif; ?>

Altere para:

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
<div class="flags-wrapper">
<?php foreach ($this->getStores() as $_lang): ?>
<?php if ($_lang->getCode() != 'default'): ?>
<a class="lang-flag" href="<?php echo $this->getCurrentUrl() . '?___store=' . $_lang->getCode();?>"><img src="<?php echo $this->getSkinUrl('images/flags/' . $_lang->getCode() . '.png');?>" alt=""></a>
<?php endif;?>
<?php endforeach;?>
</div>
</div>
<?php endif;?></pre>
<h3><span style="color: #800000;">3º) Passo</span></h3>
<pre>Ainda com o seu editor de código aberto, abra o arquivo “styles.css” que você encontrará no seguinte diretório:</pre>
<h3></h3>

skin –>frontend –> default –> [SeuTema] –> css

3º) Passo

Ainda com o seu editor de código aberto, abra o arquivo “styles.css” que você encontrará no seguinte diretório:

skin –>frontend –> default –>

[SeuTema] –> css

Inclua o script abaixo:

.flags-wrapper {
 height: 15px;
}
.lang-flag {
 width: 22px;
 height: 13px;
 float: right;
 margin-left: 10px;
 border: 1px solid transparent;
}
.lang-flag:hover {
 border: 1px solid #FFF;
}

Feito isso, limpe o cachê do Magento e do seu navegador e acesse a página inicia do seu site.

A exibição de idiomas estará mais ou menos isso:

magento-seletor-idiomas-imagem-03Bandeiras de Idiomas no Magento

Obs.: Caso não ocorra alteração alguma, abra o arquivo “page.xml” que está no seguinte diretório:

app –> design –> frontend –> default –> [SeuTema] –> layout

Busque o script abaixo:

<block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>

Se não houver, adicione-e. Limpa o cachê do seu Magento e teste novamente.

2017-01-24T20:24:10+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x