Eigenes JavaScript im LiveCanvas Pagebuilder nutzen

Eigenes JavaScript im LiveCanvas Pagebuilder nutzen
JavaScriptLiveCanvasPagebuilderWordPress

Als überzeugter Bootstrap Nutzer ist LiveCanvas meine erste Wahl unter den vielen WordPress Pagebuildern. Ein Manko, das sich fast alle Pagebuilder teilen, ist die schlechte integration von eigenem JavaScript.

LiveCanvas ist hier leider keine Ausnahme. Integrierst du beispielsweise einen selbstentwickelten Slider mittels Shortcode, wird das JavaScript im Pagebuilder nicht ausgeführt. Ich habe hier einen kleinen Workaround für dich, wie deinen Slider und JavaScript generell auch in LiveCanvas nutzen kannst.

JavaScript in LiveCanvas einschleusen

Zunächst müssen wir unsere JavaScript Datei in LiveCanvas einschleusen. Dies passiert über die functions.php deines Themes. Verwendest du das hauseigene LiveCanvas Theme „Picostrap“, verwende bitte das Child Theme picostrap5-child-base.

if (isset($_REQUEST['lc_page_editing_mode']) && true == $_REQUEST['lc_page_editing_mode']) {
	wp_enqueue_script('livecanvas', your-js-file-path, '', '1.0', true);
}

Hier prüfen wir, ob wir uns im LiveCanvas Editor befinden und laden das entsprechende Script. Korrigiere noch den Pfad zu deiner JavaScript Datei.

JavaScript in LiveCanvas ausführen

Das war es auch schon fast. Nun müssen wir unser Script noch zum laufen bringen. Den folgenden Code musst du in die zu ladende JavaScript Datei einfügen.

function check_livecanvas_is_ready() {
	let livecanvas_container = document.querySelector('#lc-main');

	if (!livecanvas_container) {
		setTimeout(() => {
			check_livecanvas_is_ready();
		}, 200);
	} else {
		setTimeout(() => {
			livecanvas_is_ready();
		}, 3000);
	}
}
check_livecanvas_is_ready();

function livecanvas_is_ready() {
	// Your code here...
}

Die Funktion check_livecanvas_is_ready() ruft sich selbst so lange auf, bis der LiveCanvas HTML-Container #lc-main geladen ist. Ist dies der Fall wird die Funktion livecanvas_is_ready() mit einer Verzögerung von 3 Sek. aufgerufen, Die Verzögerung ist ein Erfahrungswert, um sicher zu gehen, dass auch wirklich alles geladen ist.  In dieser Funktion platzierst du nun deinen eigenen Code, um ihn in LiveCanvas auszuführen.

Schreibe einen Kommentar