Oldal kiválasztása

A Katapult Csoportban merült fel a kérdés, hogy ha egy WordPress weboldalba egy SAPI űrlapot ágyazunk iFrame-mel, akkor hogyan oldható meg, hogy a WordPress oldalon elhelyezett gombok alapján az űrlap egy legördülő mezője a megfelelő értéket vegye fel.

A probléma megoldása mindenképpen programozást igényel. Mivel ha az oldal, és a beágyazott tartalom nem ugyanahhoz a domainhez tartozik, akkor nem fogjuk tudni kívülről módosítani az iFrame tartalmát, az az opció marad, hogy az iFrame URL-jéhez paraméterként hozzácsapjuk a választott opciót, az űrlap forrásában pedig elhelyezünk egy kódot, ami ezt a paramétert beolvassa, és ez alapján beállítja a legördülő értékét. Ez a gombra kattintáskor újra fogja tölteni az űrlapot úgy, hogy a kívánt opció már ki lesz választva.
Mutatom a lépéseket 🙂

1.) A gombok beállításai

A WordPress odal gombjait azonosítanunk kell annak érdekében, hogy a megfelelő eseményeket hozzájuk kapcsolhassuk. Tudnunk kell róluk, hogy ezek azok a gombok, amikre történő kattintást észre szeretnénk venni, és társítanunk kell hozzájuk a megfelelő, űrlapba küldendő értéket. Ennek érdekében a gomboknak fogunk adni egy azonosítót (id), ami az űrlapba küldendő érték, illetve egy osztályt (class), ami bármi lehet, csak jegyezzük meg, a példában ez “csomag” lesz. Ezeket a beállításokat DIVI- a haladó fülön találjátok.
Az sem hátrányos, ha az oldal magától oda is görget az űrlaphoz. Ehhez a gomb szerkesztésének “Tartalom” fülén a “Gomb Webcíme” mezőbe írjuk be, hogy “#urlap”. Ez egyébként eg yúgynevezett horgony neve lesz, vagyis egy olyan nevesített helyé az oldalon, ahova oda lehet ugrani.

2.) A horgony beállítása

Az előbbiekben használt horgony elhelyezésére a legegyszerűbb módszer, ha a SAPIból kimásolt iFrame kód elé beírod az alábi sort:

<a name="urlap"></a>

Ezzel a résszel meg is volnál, most már a gombjaid az űrlaphoz ugranak, próbáld ki.

3.) Az URL paraméter összeállítása

Az űrlap után szúrj be egy kód blokkot, amibe másold be az alábbi kódrészletet.

<script>
var frameId = 'mmiframe1234'; //Az 1234-et cseréld ki a SAPI űrlap azonosítójára
var $jq = jQuery.noConflict();
var iframe = document.getElementById(frameId);

$jq("a[href='#urlap']").click( function() {
var choice = $jq(this).closest('.csomag').attr('id');
if (undefined===choice) { return; }
var src = iframe.src.split("#");
var srcLastPart = src[1];
src = src[0].split("?");
var srcFirstPart = src[0];

iframe.src = srcFirstPart + "?" + "mydropdown=" + choice + "#" + srcLastPart;
});
//A mydropdown-t mindenhol cseréld ki a cél mező nevére!
</script>

Ne felejstd el kicserélni benne az űrlap azonosítóját!

4.) A legördülő beállítása

Az űrlap szerkesztése képernyőn az “Egyedi CSS/Javascript megadása” részben illeszd be az alábbi kódrészletet!

<script>
var query = document.location.search.replace('?', '');
query = query.split('&');
for (var i = 0; i < query.length; i++) {
var field = query[i].split("=");

//Legördülő értékének beállítása
//A mydropdown-t cseréld ki a mező nevére!
if ('mydropdown' == field[0]) {
mmjQuery("#mydropdown").val(field[1]);
}
}
</script>

Ne felejtsd el kicserélni a mező nevet arra, amit te használsz!