Magento 1.9ストアをMagento 2.1に移行しています。
私はまだMagento 2.1でかなり新しいので、いくつかを見つけることができないようです。
テキストストアスイッチャーをフラグに置き換える方法に関するガイドラインはありますか?
Magento 1.9ストアをMagento 2.1に移行しています。
私はまだMagento 2.1でかなり新しいので、いくつかを見つけることができないようです。
テキストストアスイッチャーをフラグに置き換える方法に関するガイドラインはありますか?
回答:
私はしばらくの間同じ問題に苦しんでいて、ようやくそれを解決することができました。多分あなたはすでにそれをすでに解決しているかもしれませんが、それは間違いなく他の人にとって有用でありえます。
必要なコードはこの投稿の最後にあります。
/var/www/magento/app/design/frontend/{namespace}/{name}/Magento_Store/templates/switch
language.phtml
このフォルダーに追加します/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
<css src="css/languageSwitcher.css"/>
languageSwitcher.css
してフォルダに追加する/var/www/magento/app/design/frontend/{namespace}/{name}/web/css
/var/www/magento/app/design/frontend/{namespace}/{name}/web/images/flags
し、大会の命名にフラグを追加するflag_{country_ID}.png
例をflag_en.png
。すべての画像は同じ解像度である必要があります。まず、言語切り替えを担当するテンプレートを見つける必要があります。したがって、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
<?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;
}
テーマにファイルを作成する /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
}
これにより、特定のページで言語を切り替えて次に破棄するのではなく、セッションを使用して言語の切り替えを持続させることができます。