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:
    448
    Danke erhalten:
    73
    Danke vergeben:
    122
    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.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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:
    448
    Danke erhalten:
    73
    Danke vergeben:
    122
    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.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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.824
    Danke erhalten:
    981
    Danke vergeben:
    312
    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:
    438
    Danke erhalten:
    27
    Danke vergeben:
    139


    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.824
    Danke erhalten:
    981
    Danke vergeben:
    312
    Hier wird einfach nur das Symbol ausgetauscht, das wird wohl unkritisch sein.
    Das was problematisch war, war wohl das alte Modul von Sergej.