Oldal kiválasztása

Manapság már bevett szokás az infotermékeket, és képzéseket WordPress alapú tagsági rendszerekhez kötve értékesíteni, ehhez pedig remek eszköz a SalesAutopilot.

Az ilyen rendszerekhez kapcsolódóan az egyik leggyakoribb kérdés, hogy hogyan tegyél eleget annak a GDPR kívánalomnak, hogy az előfizetés egyszerűen, a tagsági fiókon belülről, azonnali hatállyal lemondható legyen. Ezt úgy tudod profin megoldani, ha a SalesAutopilot-os személyes lemondó űrlapodat beágyazod a WordPress tagi fiók megfelelő oldalára. A módszer nem bonyolult, mutatom, neked is menni fog!

Ez a bejegyzés egy korábbi bejegyzés frissített változata.
A frissítésre azért volt szükség, mert – valószínűleg egy WordPress-beli változtatás miatt – a korábbi módon beillesztve az űrlapot az iframe nem méreteződött át, a magassága 0 pixel maradt, ezért bár betöltődött az űrlap, nem volt látható. Ezt azzal lehetett megoldani, ha beégettük az űrlap fix magasságát az iframe adatai közé, és az iframe-et magába foglaló wordpress elem alsó kiöltésének is ezt adtuk meg, ez azonban elég… béna. Ezen felül pl. nem kezeli a feltételesen megjelenített mezők miatt változó űrlap magasságot sem.

1.) Hozd létre az űrlapot

Hozz létre egy adatmódosító űrlapot, amelynek köszönőoldala az ismétlődő fizetés lemondó link legyen.
Hozz létre egy mezőt a listán, amibe az űrlap linkje fog kerülni, ez alapján a tudásbázis bejegyzés alapján.
Jegyezd fel magadnak a lista és az űrlap azonosítóját, ezt még használni fogjuk.

2.) Tedd fel a szerveredre a segédfájlokat

  • Az űrlap tagsági felületen történő megjelenítéséhez a SalesAutopilot Powerups könyvtár egy scriptjének frissített változatát használjuk, melyet erről a linkről tölthetsz le. A scriptet nevezd át úgy, hogy a kiterjesztése .php legyen (tehát pl. updateform-link.php), és töltsd ki benne az api felhasználónevedet és jelszavadat.
  • Ahhoz, hogy az oldaladon az iframe átméreteződjön az űrlap magasságára, helyezd el a helper.html fájlt változtatás nélkül a szervereden!

A két fájl linkjét jegyezd fel magadnak!

3.) Helyezd el javascript kódot az oldalban

Az alábbi javascript kódot helyezd el az oldalban azon a módon, ahogy az űrlapok iFrame kódját is szoktad. A scriptben a következő adatokat kell lecserélned:

  • A subscriberEmail változó értékét somebody@somehost.com-ról le kell cserélned tagság kezelő plugined email shortkódjára.
    • MemberMouse esetén így fog kinézni a sor: var subscriberEmail = “[MM_Member_Data name=’email’]”;
    • eMember esetén pedig így: var subscriberEmail = “[wp_eMember_user_details user_info=”email”]”;
  • A listid és formid változók értékét állítsd be az alábiak szerint:
    • listid változó (1234) a lista azonosítója
    • formid változó (5678) az űrlap azonosítója
  • A php script link (http://link_to_your_script.php) értékét cseréld le a saját szervereden elhelyezett script linkjére
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    jQuery(document).ready(function() {
        /* A lista és az űrlap azonosítója */
        var listid = 1234;
        var formid = 5678;
        /* Ide kell kerülnie a feliratkozó email címének.
         * Én rejtett mezőben elhelyeztem azon az oldalon az email címhez tartozó mezőkódot (ehhez a tagsági rendszer dokumentációjában találsz segítséget),
         * amelyikbe beletettem ezt a képernyőt, majd jQuery-vel kiolvastam ennek a sornak a helyén.
        */
        var subscriberEmail = "somebody@somehost.com";

        /* Az email mellett a lista és az űrlap azonosítójára lesz szükség ahhoz, hogy az űrlapot meg tudjuk jeleníteni */
        data = {
            e: subscriberEmail,
            l: listid,
            f: formid
        }

        /* Maga a hívás */
        jQuery.ajax({
            type: 'POST',
            url: 'link-to-your-script.php',
            data: data
        })
        /* Sikeres hívás esetén ez történjen */
        .done(function(response) {
            /* Az iFrame-be betöltjük a linken található űrlapot */
            jQuery('#updateframe').prop('src',response);
        })
        /* A hiba esetet itt kezelhetjük */
        .fail(function() {
            console.log('hiba');
        });
    });

    /* Ez a függvény fogja elvégezni az iframe és az azt tartalmazó "doboz" átméretezését, amikor megkapja a magasság adatot az űrlaptól */
    function resizeIframe(height)
    {
        jQuery('#updateframe').closest("div").css('height',parseInt(height)+70);
        jQuery('#updateframe').css('height',parseInt(height)+60);
    }
</script>
<iframe id="updateframe" style="position:absolute;top:0;left:0;width:100%;" src="" scrolling="auto" frameborder="0"></iframe>

4.) Érd el, hogy az iframe a megfelelő méretet vegye fel!

Ahhoz, hogy az iframe, és az azt befoglaló elem amegfelelő magasságú legyen, helyezd el az alábbi javascript kódot az űrlap “Egyedi CSS/Javascript megadása” részében.
A “link-to-your-helper.html” linket cseréld ki a te WP szerevreden levő helper.html fájl linkjére!

<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

<script type="text/javascript">
mmjQuery(document).ready(function() {
	var prevHeight	= 0;
	// Going to 'pipe' the data to the parent through the helpframe..
	var pipe		= document.getElementById('helpframe');
	refreshHeight();
	setInterval(refreshHeight, 1);
	function refreshHeight() {
		// What's the page height?
		var height = document.body.scrollHeight;
		if (height != prevHeight) {
			// Cachebuster a precaution here to stop browser caching interfering
			pipe.src	= 'link-to-your-helper.html?height='+height+'&cacheb='+Math.random();
			prevHeight	= height;
		}
	}
});
</script>

4.) Tesztelj és élvezd az eredményt 🙂

Ha becsületesen követted a leírást, akkor a lemondó űrlap működik a tagsági fiókban. A SalesAutopilot nem nyújt támogatást a Powerups kódokkal kapcsolatban, de amennyiben elakadsz, vagy egyedi megoldásra van szükséged, fordulj hozzám bizalommal!