標準の言語スイッチャーをフラグに置き換えるにはどうすればよいですか?Magento 2.1.0


7

Magento 1.9ストアをMagento 2.1に移行しています。

私はまだMagento 2.1でかなり新しいので、いくつかを見つけることができないようです。

テキストストアスイッチャーをフラグに置き換える方法に関するガイドラインはありますか?

回答:


12

私はしばらくの間同じ問題に苦しんでいて、ようやくそれを解決することができました。多分あなたはすでにそれをすでに解決しているかもしれませんが、それは間違いなく他の人にとって有用でありえます。


概要

必要なコードはこの投稿の最後にあります。

  1. このパスに不足しているすべてのフォルダーを作成します。 /var/www/magento/app/design/frontend/{namespace}/{name}/Magento_Store/templates/switch
  2. のコードをコピーして、language.phtmlこのフォルダーに追加します
  3. ファイルに移動します/var/www/magento/app/code/{theme_dir}/Magento_Theme/view/frontend/layout/default_head_blocks.xml
    -存在しない場合は、からコピーします/var/www/magento/vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml
  4. 行を追加 <css src="css/languageSwitcher.css"/>
  5. のコードをコピーlanguageSwitcher.cssしてフォルダに追加する/var/www/magento/app/design/frontend/{namespace}/{name}/web/css
  6. フォルダを作成/var/www/magento/app/design/frontend/{namespace}/{name}/web/images/flagsし、大会の命名にフラグを追加するflag_{country_ID}.png例をflag_en.png。すべての画像は同じ解像度である必要があります。
  7. 再コンパイル...キャッシュもフラッシュする必要がある場合はまだわかりません...試行錯誤してください。

詳細な説明と追加情報

まず、言語切り替えを担当するテンプレートを見つける必要があります。したがって、Magentoインストールの管理サイトに移動し、に移動しStore > Configuration > Advanced > Developer > Debug > Enabled Template Path Hints for Storefront > Yesます。次に、ストアのページをリロードすると、名前が入った赤いボックスがたくさん表示されます。ドロップダウン言語スイッチャーを含むボックスには、次のようなパスがあります。

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

やりたいことは、独自のテンプレートを作成し、必要な変更を追加することです。したがって、前述のテンプレートは絶対に変更しないでください。すべてのMagentoの更新が変更を上書きするため(そしておそらく他の何かが同様に行う可能性があるため...)、安全ではありません。推奨される方法は次のとおりです。

テンプレートをパスにコピーします。

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

{namespace} =モジュールの名前空間(例:会社/ドメイン/ ...)
{name} =モジュールの名前
{vendor_name} =テンプレートを提供したベンダーの名前
{module_name} = テンプレートが含まれるモジュール嘘
{path_to_template} =の右側へのパスtemplates

私たちの場合、この結果は次のようになります。

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

これで、これは既に機能しているはずです。コピーに変更を加えると、サイトに表示されます。


CSS
私のソリューションでは、CSSファイルを使用してテンプレートのスタイルを設定しました。したがって、パスをに追加する必要がありdefault_head_blocks.xmlます。デフォルトのファイルはapp/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml

このファイルを変更するには、ファイルを対応するフォルダーにコピーし、cssファイルへのパスを追加します。道:

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

その中で、あなたはまた....余分*のの.jsファイルやその他のソースを追加default_head_blocks.xmlの末尾に次の行を追加することができます(ただし、内部<head>タグ): <css src="css/languageSwitcher.css"/>

フォルダに移動して/var/www/magento/app/design/frontend/{namespace}/{name}/web/cssを追加しlanguageSwitcher.cssます。

次に、.../web/imagesフォルダに移動して作成しますflags。命名規則を使用してフォルダーに画像を追加しますflag_{country_ID}.png。たとえば、英語の使用flag_en.png。それらはすべて同じ解像度である必要があります。


コード(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;
}

1

テーマにファイルを作成する /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
}

これにより、特定のページで言語を切り替えて次に破棄するのではなく、セッションを使用して言語の切り替えを持続させることができます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.