Keskustelu: Nettisivujen teko: Javascript apuja!

Hei,
minulla on seuraavanlainen ongelma. Eli sivulla on linkkejä joilla kaikilla on sama class. Minun pitäisi saada lisättyä linkin perään kielitunniste.

Esim. osoite on muotoa www.esimerkki.fi/palvelu1, niin scriptin pitäisi käydä kaikki sivulla olevat olevat linkit läpi ja lisätä osoitteen perään kielitunniste. Esimerkiksi &lang=en jolloin osoite olisi muotoa www.esimerkki.fi/palvelu1&lang=en.

Saan haettua osoiteriviltä tiedon minkä kielisellä sivulla ollaan. Mutta tuo kielipäätteen lisääminen sivulla oleviin linkkeihin ei jostain syystä ota onnistuakseen. Olen asiaa pähkäillyt nyt muutaman tunnin liikaa ja jos jollain on helppo ratkaisu asiaan, niin KIITOS!

Tässä vielä ongelma käytännössä kuvattuna.

Eli minulla on wordpress -sivusto, jossa on jokin katalogi -lisäosa. Tuotteet ym. näkyvät katalogissa kyllä oikealla kielellä. Mutta kun klikkaan katalogin yleisnäkymässä jotain tuotetta, niin se vie sivun aina suomen kieliselle tuote-sivulle. Vaikka aktiivisena olisi jokin toinen kieli. Eli ratkaisun avulla, tuotetta klikkaamalla pääsisi oikeaan kieliversioon tuotteesta.

Entä jos valittu kieli olisi tallennettuna session? Tällöin linkit olisivat aina samoja, tallennetun kielen perusteella haetaan oikea sisältö. Jqueryn avulla onnistuu toki kaikkien osoitteiden muuttaminen.

Tässä vielä pikaisesti naputeltu jquery-esimerkki

Hei ja kiitos ideasta ja scriptistä. Jostain syystä en saa tuota scriptiä toimimaan varsinaisella sivulla. Eli muutosta linkkeihin ei tapahdu.

Tässä jotain omaa viritelmää joka ei toiminut kyllä yhtään. Pahoittelut jos koodi on aivan hirveää, mutta viimeksi kun olen javascriptiä tai php:tä käyttänyt, on varmaan 4 vuotta. Eli aika hakusessa koko homma. :D

var currentLocation = window.location;
var lngSW = /lang=sw/;
var lngEN = /lang=en/;
var string1 = String(currentLocation);
var matchPos1 = string1.search(lngSw);
var matchPos2 = string1.search(lngEN);

if(matchPos1 != -1) {

	var linkki=document.getElementByClassName("wpc-product-link").href;
    var uusilinkki = linkki + "&" + lngSW;
    ja tämä uusi linkki sitten sijoitetaan tuonne hrefiin...

        }

else if(matchPos2 != -1) {

        toisen kieliversion lisäyskoodi...

        }

else     {
	  }

Mod. lisäsi kooditagit!

Jos et jQueryä meinaa käyttää ja JavaScriptissä tuon teet, niin voit hakea kaikki linkit lisäämällä/muuttamalla koodiisi esim:

var linkit = document.getElementsByTagName('a');

Tai

var linkit = document.getElementsByClassName('wpc-product-link');

Ja lisätä niille kielipäätteen:

for (var i=0;i<linkit.length;i++)
 linkit[i].href += '&lang=en';

Muistathan ajaa jqueryn vasta kun dokumentti on kokonaan ladattu. Tähän sopii esimerkiksi document.ready().

document.ready(function() {
    $('.wpc-product-link').each(function () {
        var href = $(this).attr('href');
        $(this).attr('href', href + '&lang=en');
    });
});

Kiitos paljon koodipätkistä. Nuokaan ei jostain syystä tee mitään muutosta linkkeihin. Tässä vielä varsinaiselta sivulta koodia jossa tuotteet listataan sivulle.

<!--wpc product-->
<div class="wpc-product">
<div class="wpc-img" style="width:250px; height:183px; overflow:hidden">
<a href="http://www.esimerkki.com/sivusto/?wpcproduct=tuote1" class="wpc-product-link">
<img src="http://www.esimerkki.com/sivusto/wp-content/uploads/2014/01/tuote1.jpg" alt="" height="183" " /></a></div>
<p class="wpc-title"><a href="http://www.esimerkki.com/sivusto/?wpcproduct=tuote1">Tuote 1</a></p></div><!--/wpc-product-->

<div class="wpc-product">
<div class="wpc-img" style="width:250px; height:183px; overflow:hidden">
<a href="http://www.esimerkki.com/sivusto/?wpcproduct=tuote2" class="wpc-product-link">
<img src="http://www.esimerkki.com/sivusto/wp-content/uploads/2014/01/tuote2.jpg" alt="" height="183" " /></a></div>
<p class="wpc-title"><a href="http://www.esimerkki.com/sivusto/?wpcproduct=tuote2">Tuote 2</a></p></div>
<!--/wpc-product-->

Auttaakohan tuo yhtään ongelman selvittämistä... :/ Eli noiden linkkien perään pitäisi tosiaan saada se kielitunniste lisättyä sen mukaan, mikä kieli on aktiivisena. Jouduin samanlaisen korjaustoimenpiteen tekemään yhdelle toiselle sivulle. Ja siinä asia onnistui helposti.

Mod. lisäsi kooditagit!

Jaa katsos vain wordpress:ä pitää jquery ajaa hieman eri tavalla. Katsopas tämä linkki.

Jos et halua käyttää jQueryä:

document.addEventListener("DOMContentLoaded", function() {
    var qs       = window.location.search,
        isLangSv = qs.indexOf("lang=sv") > -1,
        isLangEn = qs.indexOf("lang=en") > -1;

    if (isLangSv || isLangEn) {
        var lang            = isLangSv ? "sv" : "en",
            wpcProductLinks = document.querySelectorAll(".wpc-product a");

        for (var i = 0; i < wpcProductLinks.length; ++i) {
            wpcProductLinks[i].href += "&lang=" + lang;
        }
    }
});

Internet Explorer tukee funktiota document.querySelectorAll versiosta 8 ylöspäin.

Ruotsin kielikoodi on muuten sv, eikä sw. Siksi koodissani käytetään ensin mainittua.

muurikka kirjoitti:

– – Tässä vielä varsinaiselta sivulta koodia jossa tuotteet listataan sivulle. – –

HTML-koodisi riveillä 5 ja 11 on ylimääräinen lainausmerkki height-attribuutin jälkeen.