Last active
June 4, 2022 20:58
-
-
Save slimndap/3d60c5b85be3eb4f5b4367b3dc277b37 to your computer and use it in GitHub Desktop.
Stager Advanced Ticketshop Integration
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| /* | |
| * Enables the 'Advanced Integration' of the Stager Ticketshop. | |
| * | |
| * This script makes is possible to embed the Stager Ticketshop in an iframe with support for: | |
| * * dynamic iframe height based on the content of the iframe content | |
| * * cross domain GTM Tracking | |
| * | |
| * For more information about the advanced integration of the Stager Ticketshop see: | |
| * https://intercom.help/stager/nl/articles/3068333-geavanceerde-integratie-van-de-ticketshop-in-eigen-website | |
| * | |
| * Feel free to contact me if you need any additional help with the integration of Stager in your website. | |
| * | |
| * Author: Jeroen Schmit <jeroen@slimndap.com> | |
| * Author URI: https://slimndap.com | |
| * Version: 1.0 | |
| * Requirements: jQuery | |
| */ | |
| jQuery(function () { | |
| var $stager_iframe, key, ref, ticketshop_url, value; | |
| $stager_iframe = jQuery('iframe#ticketshop-iframe'); | |
| if ($stager_iframe.length < 1) { | |
| // Bail if there is no Stager iframe on the page. | |
| return; | |
| } | |
| ticketshop_url = new URL($stager_iframe.data('url')); // Build ticketshop URL from Stager URL and page params. | |
| ticketshop_url.searchParams.set('minimal', 'true'); | |
| ref = new URL(window.location.href).searchParams.entries(); | |
| for (key in ref) { | |
| value = ref[key]; | |
| ticketshop_url.searchParams.set(key, value); | |
| } | |
| $stager_iframe.attr('src', ticketshop_url); // Open minimal ticketshop in iframe | |
| return window.addEventListener('message', function (event) { | |
| if (event.origin !== ticketshop_url.origin) { | |
| // Bail if event is not coming from ticket shop. | |
| return; | |
| } | |
| if (event.data.height != null) { | |
| // (height + 40) is a workaround for an issue in Stager where the height is not correctly calculated | |
| // for screens that include the fixed menu bar | |
| $stager_iframe.css('height', "".concat(event.data.height + 40, "px")); // Auto-adjust iframe height based on iframe content. | |
| } | |
| if ('childReady' === event.data) { | |
| event.source.postMessage('parentReady', event.origin); // Send event back to iframe that parent is ready. | |
| } | |
| if (event.data.event) { | |
| window.dataLayer = window.dataLayer || []; | |
| return window.dataLayer.push(event.data); // Push dataLayer message from iframe to dataLayer of parent | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" | |
| crossorigin="anonymous"></script> | |
| <script src="stager.js"></script> | |
| </head> | |
| <body> | |
| <!-- Change [organisation] and [eventid] to the corresponding values from your ticketshop. --> | |
| <iframe id="ticketshop-iframe" data-url="https://[organisation].stager.nl/web/tickets/[eventid]"></iframe> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment