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/