Wie ersetze ich den Standard-Sprachumschalter durch Flags? Magento 2.1.0

7

Ich migriere meinen Magento 1.9-Store auf Magento 2.1.

Ich bin noch ziemlich neu in Magento 2.1 und ich kann einige Dinge nicht finden.

Gibt es Richtlinien, wie der Textspeicher-Umschalter durch Flags ersetzt werden kann?

magento2 multistore language stores switcher Davor Pehchevski
quelle

Antworten:

12

Ich hatte einige Zeit mit dem gleichen Problem zu kämpfen und konnte es schließlich lösen. Vielleicht haben Sie es bereits gelöst, aber es kann definitiv für andere nützlich sein.

Zusammenfassung

Den benötigten Code finden Sie am Ende dieses Beitrags.

  1. Erstellen Sie alle fehlenden Ordner auf diesem Pfad: /var/www/magento/app/design/frontend/{namespace}/{name}/Magento_Store/templates/switch
  2. Kopieren Sie den Code von language.phtmlund fügen Sie ihn diesem Ordner hinzu
  3. gehe zur Datei /var/www/magento/app/code/{theme_dir}/Magento_Theme/view/frontend/layout/default_head_blocks.xml.
    - Wenn es nicht existiert, kopieren Sie es von/var/www/magento/vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml
  4. Fügen Sie die Zeile hinzu <css src="css/languageSwitcher.css"/>
  5. Kopieren Sie den Code von languageSwitcher.cssund fügen Sie ihn dem Ordner hinzu/var/www/magento/app/design/frontend/{namespace}/{name}/web/css
  6. Ordner erstellen /var/www/magento/app/design/frontend/{namespace}/{name}/web/images/flagsund Flags mit Namenskonvention hinzufügen, flag_{country_ID}.pngz flag_en.png. Alle Bilder müssen die gleiche Auflösung haben.
  7. Neu kompilieren ... habe noch nicht herausgefunden, ob Sie auch den Cache leeren müssen ... machen Sie einfach Versuch und Irrtum.

Erweiterte Erklärung und zusätzliche Informationen

Zunächst müssen Sie herausfinden, welche Vorlage für den Sprachumschalter verantwortlich ist. Gehen Sie daher zur Admin-Site Ihrer Magento-Installation und gehen Sie zu Store > Configuration > Advanced > Developer > Debug > Enabled Template Path Hints for Storefront > Yes. Laden Sie nun die Seite Ihres Shops neu und Sie werden viele rote Kästchen mit Namen darin sehen. Das Feld, das den Dropdown-Sprachumschalter enthält, hat einen Pfad wie:

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

Sie möchten lediglich eine eigene Vorlage erstellen und die gewünschten Änderungen hinzufügen. Ändern Sie daher NIEMALS die oben genannte Vorlage. Es ist nicht sicher, da jedes Magento-Update die Änderungen überschreibt (und möglicherweise auch etwas anderes ...). Der empfohlene Weg ist:

Kopieren Sie die Vorlage in den Pfad:

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

{Namespace} = der Namespace des Moduls (z. B. Ihre Firma / Domain / ...)
{Name} = Name des Moduls
{Anbietername} = Name des Anbieters, der die Vorlage bereitgestellt hat
{Modulname} = das Modul, in dem sich die Vorlage befindet liegt
{path_to_template} = der Pfad rechts vontemplates

In unserem Fall ergibt sich Folgendes:

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

Dies sollte jetzt bereits funktionieren. Wenn Sie Änderungen an der Kopie vornehmen, sollten diese auf der Site angezeigt werden.

CSS
In meiner Lösung habe ich auch eine CSS- Datei verwendet, um die Vorlage zu formatieren. Deshalb müssen wir den Pfad zum hinzufügen default_head_blocks.xml. Die Standarddatei liegt inapp/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml

Um Änderungen an dieser Datei vorzunehmen, kopieren Sie sie in den entsprechenden Ordner und fügen Sie den Pfad zur CSS-Datei hinzu. Pfad:

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

Darin können Sie auch zusätzliche * .js-Dateien und andere Quellen hinzufügen. Fügen Sie diese Zeile am Ende von default_head_blocks.xml hinzu (jedoch innerhalb der <head>Tags) : <css src="css/languageSwitcher.css"/>.

Navigieren Sie zu dem Ordner /var/www/magento/app/design/frontend/{namespace}/{name}/web/cssund fügen Sie den hinzu languageSwitcher.css.

Gehen Sie als Nächstes .../web/imageszum Ordner und erstellen Sie ihn flags. Fügen Sie dem Ordner Bilder mit der Namenskonvention hinzu : flag_{country_ID}.png. ZB für Englisch flag_en.png. Sie müssen alle die gleiche Auflösung haben.

Code (language.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
quelle
1

Erstellen Sie eine Datei in Ihrem Thema /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
}

Dadurch bleibt der Sprachwechsel während einer Sitzung bestehen, anstatt nur die Sprache auf der jeweiligen Seite zu wechseln und sie als nächstes zu verwerfen.

Cjohansson
quelle