Anleitung Flaggen statt Globus in Topbar Navi (Wahl d. Sprache/Währung/Landes)

Thema wurde von pema, 23. August 2019 erstellt.

  1. pema

    pema Erfahrener Benutzer

    Registriert seit:
    17. Juni 2012
    Beiträge:
    440
    Danke erhalten:
    73
    Danke vergeben:
    121
    Weil es hier nach irgendeinem GX3 Update keine Flaggen mehr für die Sprachauswahl gab, aber eindeutig Bedarf besteht hier eine simple Anleitung, für Shops die ein paar mehr Sprachen als nur Deutsch verwenden und es dem Kunden auf einen sehr schnellen Blick zeigen möchten.

    Aus
    1.JPG
    wird z.B.
    2.JPG

    Datei /templates/Honeygrid/boxes/box_top_navigation.html als box_top_navigation-USERMOD.html speichern.
    Bei ca. Zeile 153 den Block suchen:

    HTML:
    {block name="box_top_navigation_language_icon_desktop_code"}
    <span class="language-code hidden-xs">
    {if $showTopNavIcons}
    {block name="box_top_navigation_language_icon_desktop_image"}
    <span class="fa fa-globe"></span>
    {/block}
    {/if}
    {$language_code}
    </span>
    {/block}
    
    Ersetzen durch:

    HTML:
    {block name="box_top_navigation_language_icon_desktop_code"}
    <span class="language-code hidden-xs">
    {if $showTopNavIcons}
    {block name="box_top_navigation_language_icon_desktop_image"}
    <div class="top-navi-flags">
    <img alt="english icon" src="/images/flags/4x3/en.svg">
    <img alt="deutsches icon" src="/images/flags/4x3/de.svg">
    <span> {$language_code|replace:"de":"Sprache, Währung, Lieferland"|replace:"en":"Language, currency, country"}</span>
    </div>
    {/block}
    {/if}
    </span>
    {/block}
    
    Hinter die DIV <div class="top-navi-flags"> könnt ihr nun die Bilder Links zu den einzelnen Flaggen setzen.
    Unter Gambio Admin -> Land/Steuer die 2 stelligen ISO Codes des Landes/der Flagge raussuchen und als Link einfügen.
    Für Frankreich wäre das z.B. /images/flags/4x3/fr.svg, Schweiz /images/flags/4x3/ch.svg usw.

    Dann noch den Smarty Block mit {$language_code} erweitern, damit statt DE, EN, FR, CH, usw euer Text drin erscheint. Achtet auf die " und die :
    Immer im Format {$language_code|replace:"de":"statt DE, neuer Text"|replace:"en":"statt EN englischer Text usw."|.....}

    Am Ende noch das CSS anlegen. In unserem Fall war es:

    Code:
    .top-navi-flags img{
        height: 20px;
        margin-right: 5px;
    }
    
    .top-navi-flags {
        text-transform:initial;
    }
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Warum macht Du das noch als USERMOD und nciht übe GXModules?
    Da musst Du nur aufpassen, wenn der eine Block geändert wird und nciht bei jeder Anpassung in der Datei.
     
  3. pema

    pema Erfahrener Benutzer

    Registriert seit:
    17. Juni 2012
    Beiträge:
    440
    Danke erhalten:
    73
    Danke vergeben:
    121
    Du hast Recht. Ist irgendwie Routine das über usermods zu machen :)
     
  4. Anonymous

    Anonymous Mitglied

    Registriert seit:
    18. Mai 2019
    Beiträge:
    11
    Danke erhalten:
    0
    Danke vergeben:
    8
    Mhnmm, und wie macht man das über "GXModules"?
     
  5. Anonymous

    Anonymous Mitglied

    Registriert seit:
    18. Mai 2019
    Beiträge:
    11
    Danke erhalten:
    0
    Danke vergeben:
    8
    Hallo Barbara, wie muss ich das mit GXModules machen, damit ich keine neuen Fehler produziere?
     
  6. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Wilken schreibt hier:
    (Link nur für registrierte Nutzer sichtbar.)
    dass Flaggen immer wieder für Probleme sorgen.
    Das sollte man bedenken, bevor man da etwas umbaut.

    Ungeprüft:
    Der Einbau für das Template in GXModules wäre:

    Erstelle ein eigenes Verzeichnis in GXModules:
    Meins/Flaggen/Shop/Templates/Honeygrid/Boxes/
    und darin die Datei
    box_top_navigation.html
    mit diesem Inhalt:
    HTML:
    {block name="box_top_navigation_language_icon_desktop_code"}
    <span class="language-code hidden-xs">
    {if $showTopNavIcons}
    {block name="box_top_navigation_language_icon_desktop_image"}
    <div class="top-navi-flags">
    <img alt="english icon" src="/images/flags/4x3/en.svg">
    <img alt="deutsches icon" src="/images/flags/4x3/de.svg">
    <span> {$language_code|replace:"de":"Sprache, Währung, Lieferland"|replace:"en":"Language, currency, country"}</span>
    </div>
    {/block}
    {/if}
    </span>
    {/block}
    
    Das css kommt dann noch ins eigene css im Style Editor
     
  7. Anonymous

    Anonymous Mitglied

    Registriert seit:
    18. Mai 2019
    Beiträge:
    11
    Danke erhalten:
    0
    Danke vergeben:
    8
    Danke! Dann überlege ich mir das nochmal. Aber was bedeutet "css"?
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    css sind die Anweisungen der Darstellung, wie Schriftfarbe, Größe, Position....
     
  9. Anonymous

    Anonymous Mitglied

    Registriert seit:
    18. Mai 2019
    Beiträge:
    11
    Danke erhalten:
    0
    Danke vergeben:
    8
    Vielen Dank!
     
  10. Christian Mueller

    Christian Mueller Beta-Held

    Registriert seit:
    4. Juli 2011
    Beiträge:
    3.698
    Danke erhalten:
    889
    Danke vergeben:
    288
    Ich habe das mal so gemacht, daß immer nur das Icon der aktuell gewählten Sprache angezeigt wird:

    /GXModules/Meins/Flaggen/Shop/Templates/Honeygrid/Boxes/box_top_navigation.html

    Code:
    {block name="box_top_navigation_language_icon_desktop_code"}
    <span class="language-code hidden-xs">
    {if $showTopNavIcons}
    {block name="box_top_navigation_language_icon_desktop_image"}
    <div class="top-navi-flags">
    <img alt="icon" src="/images/flags/4x3/{$language_code}.svg">
    <span>
    </div>
    {/block}
    {/if}
    </span>
    {/block}
    
    Im CSS dann das hier eintragen:

    Code:
    .top-navi-flags img{
        height: 20px;
    }
    
    .top-navi-flags {
        display: flex; 
        justify-content: center; 
        align-items: center;
    }
    
     
  11. PHI

    PHI Erfahrener Benutzer

    Registriert seit:
    23. März 2012
    Beiträge:
    398
    Danke erhalten:
    26
    Danke vergeben:
    134


    Hallo Barbara, ja wir waren das, ja und wir haben den Fehler mittlerweile identifziert, die Problematik war das wir den Shop früher in einer Subdomain hatten und die Top-Level Domain index ein CMS war, das Deutsch als lang im HTML Header gesetzt hatte. Davon kamen diese komischen Links. Seit ein paar Jahren Top-Level Domain und wir sind gut dabei, läuft.

    Die Flaggen ansich sollten doch kein Problem darstellen, wir werden die Sache aber weiterhin beobachten.
     
  12. Christian Mueller

    Christian Mueller Beta-Held

    Registriert seit:
    4. Juli 2011
    Beiträge:
    3.698
    Danke erhalten:
    889
    Danke vergeben:
    288
    Hier wird einfach nur das Symbol ausgetauscht, das wird wohl unkritisch sein.
    Das was problematisch war, war wohl das alte Modul von Sergej.