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:

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.

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!

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