Hallo liebes Forum,

Ich habe mich in den letzten Tagen damit beschäftigt wie ich meine Jimdo Website am besten zweisprachig gestalten kann. Mein Hauptproblem liegt darin dass es sich um einen Shop handelt, somit ist die übliche Methode: Nämlich das erstellen Jeder Seite in zwei Sprachen ungeeignet. Durch diese Methode wird nämlich bei Jimdo ein neues Produkt angelegt, das macht es unmöglich einen Überblick über den Bestand zu behalten.

Meine Idee ist nun Folgende:

Ich möchte mit zwei Buttons ( [Deutsch][Englisch] ) jeweils verschiedene Elemente auf der Seite zeigen oder verstecken, Somit könnte man problemlos eine Einzelne Produktseite mehrsprachig gestalten. Textfelder werden einfach mehrfach erstellt und dann beliebig ausgeblendet.

Umsetzung:

Die Buttons als Widget:
<button onclick="languageEn()" id="enButton">EN</button>
<button onclick="languageDe()" id="deButton">DE</button>

Im edit head:

function languageDe() {
document.getElementById( ' id von text en' ).style.display = 'none';
document.getElementById( 'id von text de' ).style.display = 'inline';
}

function languageEn() {
document.getElementById( 'id von text en' ).style.display = 'inline';
document.getElementById( 'id von text de' ).style.display = 'none';
}

Hier mein Versuch ( Mit Bildern statt Textfeldern)
http://www.delta-boards.com/impressum/test/



Das Ganze funktioniert an sich genau wie ich es möchte, die Liste der Elemente kann beliebig erweitert werden, ich habe test weise den Button auch einmal in die Fusszeile platziert um zu sehen ob sich die Funktion auch erfolgreich von anderen Seiten steuern lässt was ebenfalls funktioniert. Das einzige Hindernis ist nun die Platzierung des Buttons, welchen ich gerne im oberen bereich der Seite hätte, also über der Navigation. Ich nehme an dazu müsste man die HTML Template bearbeiten?

Vielleicht hat jemand einen Tipp wie ich den Button nach oben bekomme, dann hätte man eine schicke Lösung.


EDIT:

Ich habe nochmal ein wenig das Internet durchforstet und bin auf folgendes gestoßen:

#enButton{
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;

}

somit ist der Button wie gewünscht im Header, nötige Veränderungen sind nun noch ein anpassen des Button Styles und eine Positionierung sodass diese auch in der Mobilen Ansicht schön dargestellt wird. Eine weitere Frage die sich mir stellt ist auch ob ich den Button nun für jede Seite anlegen muss, oder ob ich diesen zb in die Fusszeile platzieren kann.

Ich habe mal wieder Zeit gefunden etwas herumzuprobieren und habe eine elegantere lösung gefunden, mit einem problem. Während das ganze grundsätzlich super funktioniert findet die sprachänderung immer nur auf der jeweiligen/aktuellen seite statt. Hat jemand eine idee wie ich das lösen kann?

Die methode ist an sich wesentlich angenehmer da nicht für jeden text via ID eine funktion benötigt wird, aber wenn bei jedem seitenwechsel die sprache erneut ausgewählt werden muss ist das natürlich unsinn.




mein Code:

Buttons im Footer: ( damit sie auf allen Seiten sind)


<div id="languageSelect">
<button id="langDe">Deutsch</button>
<button id="langEn">English</button>
</div>


Text
( egal wo auf der Seite, jeder text kann so in zwei sprachen eingetippt werden und abwechselnd über die Klasse dargestellt werden)

<div id="text1a" class="textDe">
Beispieltext Deutsch
</div>

<div id="text1b" class="textEn">
sampletext english
</div>

Edit Head ( gesamte seite)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript">

</script>


<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

$("#langDe").click(function(){
/*sprachwechsel deutsch*/
$(".textEn").hide();

$(".textDe").show();

document.getElementById( 'langDe' ).style.color = '#922D2D'; /* button farbe aktiv*/
document.getElementById( 'LangEn' ).style.color = '#D1D1D1';
/* button farbe passiv*/
});


$("#langEn").click(function() /* Sprachwechsel englisch*/
$(".textEn").show();

$(".textDe").hide();

document.getElementById( 'langDe' ).style.color = '#D1D1D1';

document.getElementById( 'langEn' ).style.color = '#922D2D';

});

});
//]]>
</script>




<style>

.textEn {
/* Standardmässig ausblenden Englisch*/
display: none;

}

#langEn { /* button style */

background: none;

color: #D1D1D1;

border: none ;

}

#langDe {

background: none;

color: #922D2D;

border: none ;

}

#languageSelect {
/* sprachauswahl buttons platzierung*/
position: absolute;
top: 243px;
left: 50%;
transform:
translateX(-50%);

}

</style>


Da der Skript Teil sich ja auf die gesamte Seite bezieht und die Buttons im Footer platziert sind war ich davon ausgegangen dass jeweils alle Elemente aus der jeweiligen Klasse betroffen sind, nicht nur auf der jeweiligen Seite. Auch der Button selbst behält seine "einstellung" nicht. Bsp. ich klicke auf englisch > englisch Button wird rot. Wechlse ich jetzt auf eine andere Seite ist wieder der deutsche Button aktiv.

Habe ich etwas übersehen?
Falls es so nicht geht hatte ich überlegt ob man nicht eine Language variable anlegen könnte und abhängig von dieser die hide/show funktionen steuern könnte. Wie genau das geht weiss ich aber nicht.

Habe das ganze nochmal mit variablen probiert, selbes problem. Die variable wird nicht erhalten wenn man die seite wechselt.

<script type="text/javascript">
//<![CDATA[
var Language;
$(document).ready(function(){


$("#langDe").click(function(){
var Language = 0;

if(Language == 0){
$(".textEn").hide();
$(".textDe").show();
document.getElementById( 'langDe' ).style.color = '#922D2D'; /* button farbe aktiv*/
document.getElementById( 'langEn' ).style.color = '#D1D1D1'; }
if(Language==1){
$(".textEn").show();
$(".textDe").hide();
document.getElementById( 'langDe' ).style.color = '#D1D1D1';
document.getElementById( 'langEn' ).style.color = '#922D2D';
}

});


$("#langEn").click(function(){
var Language = 1;

if(L == 0){
$(".textEn").hide();
$(".textDe").show();
document.getElementById( 'langDe' ).style.color = '#922D2D'; /* button farbe aktiv*/
document.getElementById( 'langEn' ).style.color = '#D1D1D1'; }
if(L==1){
$(".textEn").show();
$(".textDe").hide();
document.getElementById( 'langDe' ).style.color = '#D1D1D1';
document.getElementById( 'langEn' ).style.color = '#922D2D';

}

});




});
//]]>
</script>

Klappt nun alles, vielleicht könnnte der Admin den original post mit folgendem ersetzen:

Zum nachmachen auf eurer Seite einfach folgende Codes an die genannten Stellen platzieren:


1. Texte erstellen


ihr könnt eure Texte wie gewohnt in einem Textfeld eingeben, dazu müsst ihn nur vorher auf das kleine </> "edit html" button klicken und folgenden code einfügen und ok drücken.

<div class="textDe">
Beispieltext Deutsch
</div>

<div class="textEn">
sampletext english
</div>

Die beiden Platzhalter könnt ihr dann mit euren Texten in zwei Sprachen ersetzen und beliebig formatieren. Nach dem einfügen des Skripts wird nur jeweils der gewünschte Text angezeigt.



2. Sprachauswahl Button als Html Widget in den Footer/Fußzeile einfügen:


<div id="languageSelect">
<button id="langDe">Deutsch</button> <button id="langEn">English</button>
</div>


3. Unter "edit head > website" einfügen:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript">
</script>

<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

var someVarName = localStorage.getItem("pageLanguage");

if (someVarName == "Engl"){
document.getElementById( 'langDe' ).style.color = '#D1D1D1';
document.getElementById( 'langEn' ).style.color = '#922D2D';
$(".textEn").show();
$(".textDe").hide();
}


$("#langDe").click(function(){
$(".textEn").hide();
$(".textDe").show();
document.getElementById( 'langDe' ).style.color = '#922D2D';
document.getElementById( 'langEn' ).style.color = '#D1D1D1';
var pageLanguage = "Deut";
localStorage.setItem("pageLanguage", pageLanguage);
});

$("#langEn").click(function(){
$(".textEn").show();
$(".textDe").hide();
document.getElementById( 'langDe' ).style.color = '#D1D1D1';
document.getElementById( 'langEn' ).style.color = '#922D2D';
var pageLanguage = "Engl";
localStorage.setItem("pageLanguage", pageLanguage);
});

});
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/


.textEn {/* Standardmässig ausblenden Englisch*/
display: none;

}

#langEn { /* button styles */
background: none;
color: #D1D1D1;
border: none ;
}

#langEn:hover {
color: #922D2D;
}

#langDe {
background: none;
color: #922D2D;
border: none ;
}

#langDe:hover {
color: #922D2D;
}

#languageSelect { /* sprachauswahl buttons platzierung*/
position: absolute;
top: 20px;
right:50px;
}

@media (max-width: 768px) { /* sprachauswahl buttons platzierung mobile ansicht*/
#languageSelect { top:20px; }
}

/*]]>*/
</style>

4. Fertig!

Hier mal das Ergebnis in Aktion.

https://www.delta-boards.com/shop/wheels/reifenz-70/

Hallo az_

das Beispiel https://www.bedandbreakfastamsterdamwest.nl/fr/home/ mit den mehreren Sprachen gefällt mir gut. Ich versuche gerade eine zweisprache Webseite mit Stockholm zu bauen. Könntest du mir vielleicht nähere Infos geben wie du das umgesetzt hast?

Danke!

danke az_ für den Link.

Ich hatte gerade eine Idee, wie ich es einfach selber umsetzen könnte. Allerdings legt mir Jimdofree wiedermal Steine in den Weg. Leider kann ich bei einzelnen Unterseiten den Head nicht bearbeiten :(


allerdings kann ich ein Widget auf die entsprechende Unterseite setzen und damit die Links ändern

ich versuchs jetzt erstmal was ich vorhabe :)
Hab das mit der Page-ID noch nie gemacht.

Danke dir!

momentan hat alles funktioniert :)

Allerdings scheiter ich bei der Positionierung der "Buttons"- eigentlich sind es nur jeweils zwei Buchstaben in einem Textfeld. Diese habe ich in ein Spaltenelement gepackt.
Mit .appendto() konnte ich das Spaltenelement auch an die Navi kleben. Allerdings auch nur an der Desktop-Seite. Bei der mobilen sind die Buttons nicht mehr zu sehen.
Eigentlich hätte ich die Buttons auch gerne in der Navi-Leiste oder drüber im Bild. Mit margin-top:-49px; hab ich das auch geschafft. Auch die Positionierung am rechten Rand mit margin-right: -90% klappt, aber wie gesagt, nur auf einem großen Bildschirm. Mit dem ganzen responsive hab ich noch meine liebe Not.

Super Beitrag, die Sprache ändern funktioniert auch super mit dem <div class="textDe">. Gern würde ich über den HTML Head auch meine Navigationsleiste nach selbem Prinzip anpassen. Wie spreche ich die notwendigen Zeilen an? Gefunden habe ich sie über Strg U, nur bekomme ich ihn einfach nicht angesprochen. Was muss ich genau nehmen?
Bsp.:

<a href="/produkte/" data-link-title="Produkte">Produkte</a><span data-navi-toggle="cc-nav-view-1499044854" class="jmd-nav__toggle-button"></span>
 

Will jetzt in dem En-Teil einfach das Produkte durch Products ersetzen. Wäre für jede Hilfe dankbar. Gruß