Como substituo o alternador de idiomas padrão por sinalizadores? Magento 2.1.0

7

Estou migrando minha loja Magento 1.9 para o Magento 2.1.

Ainda sou bastante novo no Magento 2.1 e não consigo encontrar algumas coisas.

Alguma orientação sobre como substituir o comutador de loja de texto por sinalizadores?

magento2 multistore language stores switcher Davor Pehchevski
fonte

Respostas:

12

Eu estava lutando com o mesmo problema há algum tempo e finalmente consegui resolvê-lo. Talvez você já tenha resolvido o problema agora, mas pode definitivamente ser útil para outros.

Sumário

O código necessário pode ser encontrado no final deste post.

  1. crie todas as pastas ausentes neste caminho: /var/www/magento/app/design/frontend/{namespace}/{name}/Magento_Store/templates/switch
  2. copie o código language.phtmle adicione-o a esta pasta
  3. vá para o arquivo /var/www/magento/app/code/{theme_dir}/Magento_Theme/view/frontend/layout/default_head_blocks.xml.
    - Se não existir, copie-o de/var/www/magento/vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml
  4. adicione a linha <css src="css/languageSwitcher.css"/>
  5. copie o código languageSwitcher.csse adicione-o à pasta/var/www/magento/app/design/frontend/{namespace}/{name}/web/css
  6. crie uma pasta /var/www/magento/app/design/frontend/{namespace}/{name}/web/images/flagse adicione sinalizadores com a convenção de nomenclatura, flag_{country_ID}.pngpor exemplo flag_en.png. Todas as imagens precisam ter a mesma resolução.
  7. Recompile ... ainda não descobri se você também precisa liberar o cache ... apenas tente e tente.

Explicação estendida e informações extras

Primeiro, você precisa descobrir qual modelo é responsável pelo alternador de idiomas. Portanto, vá para o site de administração da sua instalação do Magento, vá para Store > Configuration > Advanced > Developer > Debug > Enabled Template Path Hints for Storefront > Yes. Agora recarregue a página da sua loja e você verá muitas caixas vermelhas com nomes. A caixa que contém o alternador de idiomas suspenso tem um caminho como:

/var/www/magento/vendor/magento/module-store/view/frontend/templates/switch/languages.phtml.

O que você deseja fazer é criar seu próprio modelo e adicionar as alterações desejadas. Portanto, NUNCA altere o modelo mencionado acima. Não é seguro porque todas as atualizações do Magento sobrescrevem as alterações (e talvez algo mais faça o mesmo ....). A maneira recomendada é:

Copie o modelo para o caminho:

/var/www/magento/app/design/frontend/{namespace}/{name}/{vendor_name}_{module_name}/templates/{path_to_template}/template.phtml.

{namespace} = o namespace do módulo (por exemplo, sua empresa / domínio / ...)
{name} = nome do módulo
{vendor_name} = o nome do fornecedor que forneceu o modelo
{module_name} = o módulo no qual o modelo encontra-se
{path_to_template} = o caminho à direita datemplates

No nosso caso, isso resulta em:

/var/www/magento/app/design/frontend/{namespace}/{name}/Magento_Store/templates/switch/languages.phtml

Agora, isso já deve funcionar, se você fizer algumas alterações na cópia, elas deverão aparecer no site.

CSS
Na minha solução, também usei um arquivo css para estilizar o modelo. Portanto, precisamos adicionar o caminho para o arquivo default_head_blocks.xml. O arquivo padrão está emapp/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml

Para fazer alterações nesse arquivo, copie-o para a pasta correspondente e adicione o caminho ao arquivo css. Caminho:

/var/www/magento/app/code/{theme_dir}/{Magento_Theme}/view/frontend/layout

Aí você também pode adicionar arquivos * .js extras e outras fontes .... adicionar esta linha ao final do default_head_blocks.xml (mas dentro das <head>etiquetas): <css src="css/languageSwitcher.css"/>.

Navegue até a pasta /var/www/magento/app/design/frontend/{namespace}/{name}/web/csse adicione o languageSwitcher.css.

Em seguida, vá para .../web/imagese crie a pasta flags. Adicionar imagens para a pasta com a convenção de nomenclatura: flag_{country_ID}.png. Por exemplo, para uso em inglês flag_en.png. Todos eles precisam ter a mesma resolução.

Código (languages.phtml & languageSwitcher.css)

languages.phtml

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Language switcher template
 */
?>

<?php if(count($this->getStores())>1): ?>
    <div class="langs-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->getViewFileUrl('images/flags/flag_' . $_lang->getCode() . '.png');?>" alt="<?php echo 'could not find image for ' . $_lang->getName() ?>"/></a>
        <?php endif;?>
    <?php endforeach;?>
    </div>
<?php endif;?>

languageSwitcher.css

.langs-wrapper {
    height: 15px;
}

.lang-flag {
    width: 55px;
    height: 32.5px;
    float: left;
    margin-left: 10px;
    border: 1px solid transparent;
}

.lang-flag:hover {
    border: 2.5px solid #FFF;
}
elnecesario
fonte
1

Crie um arquivo no seu tema /app/design/frontend/Vendor/Theme/Magento_Store/templates/switch/languages.phtml

<?php
/**
 * Language switcher template
 */
if (count($this->getStores())) { ?>
<div class="langs-wrapper">
    <?php foreach ($this->getStores() as $_lang) { ?>
        <a class="lang-flag" href="#" data-post='<?php echo $block->getTargetStorePostData($_lang); ?>'><img src="<?php echo $this->getViewFileUrl('images/flags/' . $_lang->getCode() . '.png');?>" alt="<?php echo $_lang->getName(); ?>" /></a>
    <?php } ?>
    </div>
<?php
}

Isso fará com que a troca de idioma persista usando uma sessão, em vez de apenas trocar o idioma na página específica e descartá-la na próxima.

cjohansson
fonte