diff --git a/components/globals/GlobalScriptInjections.vue b/components/globals/GlobalScriptInjections.vue index b15fdc0..2af4929 100644 --- a/components/globals/GlobalScriptInjections.vue +++ b/components/globals/GlobalScriptInjections.vue @@ -21,6 +21,7 @@ const injectScript = (scriptString: string, scriptType: string) => { const matches = scriptString.match(scriptTagRegex); if (!matches) { console.error('GlobalInjections.vue: Invalid script string'); + // console.log(scriptString); return; } diff --git a/components/view-components/RegistrationSection.vue b/components/view-components/RegistrationSection.vue index bdb6963..dd46baa 100644 --- a/components/view-components/RegistrationSection.vue +++ b/components/view-components/RegistrationSection.vue @@ -30,7 +30,13 @@ const formatDeadlineString = computed(() => { } }); -onMounted(() => { +const pretixRef = ref(null); +const observer = ref(null); +const invokePretix = () => { + window.PretixWidget.buildWidgets(); +}; + +onBeforeMount(() => { if (props.data?.event_shop_url && props.data?.field_pretix_widget_type) { // Inject a script dynamically if needed. const script = document.createElement('script'); @@ -45,6 +51,29 @@ onMounted(() => { document.head.appendChild(link); } }); + +onMounted(() => { + if (typeof window !== 'undefined') { + observer.value = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting) { + invokePretix(); + observer.value?.disconnect(); + } + }); + + if (pretixRef.value) { + observer.value.observe(pretixRef.value); + } + + return () => { + observer.value?.disconnect(); + }; + } +}); + +onBeforeUnmount(() => { + observer.value?.disconnect(); +});