Kajabiで作成した商品画面のカラムをjsで共通化する

前提

• CMSとしてKajabiを利用している（Kajabiアカウント及び編集権限がある）
• jsの置き場所としてのサーバ環境がある

要件

Kajabiにおける多くのテーマで、商品のトップページ（Product）と下層ページ（Post）はそれぞれ個別に画面レイアウトを作る必要がある

が、右カラムのサイドメニュー等、同じ商品で共通化したい要素が存在する場合に個別に編集しなければならないのは手間なので、JavaScriptを使い共通化したい要素をトップページから取得し、下層ページにも同じ要素を捩じ込む

手順

テーマは各画面htmlにjsで適応されている為、scriptタグをチェックし、該当する場合のみ同商品のProduct画面をfetchし取得したカラム要素をPostページに表示する

1. JavaScript

JavaScript

// 画面ロード時
window.addEventListener('DOMContentLoaded', function() {

	// ページのすべての<script>タグを取得
	const scripts = Array.from(document.scripts);

	// 右カラムを共通化したいテーマ（ターゲット）
	const targetThemes = [
		"Premier Product",
		"Prosper",
		"Creative",
		"Premier 1654788471",
		"Prosper 1654788768"
	];

	// ターゲットとなるテーマが含まれるかどうかを確認
	const isTargetTheme = scripts.some(script => 
		script.textContent.includes("Kajabi.theme = {") && 
		targetThemes.some(theme => script.textContent.includes(`activeThemeName: "${theme}"`))
	);

	// 該当テーマのPostページ
	if (isTargetTheme && window.location.pathname.includes('/posts/')) {

		// 現在のURL
		const currentUrl = location.href;

		// "/posts/"の直前までの部分
		const productUrl = currentUrl.split('/posts/')[0];

		fetch(productUrl)
		.then(response => {
			if (!response.ok) {
				throw new Error('Network response was not ok');
			}
			return response.text();
		})
		.then(html => {

			// HTMLをDOMに変換
			const parser = new DOMParser();
			const doc = parser.parseFromString(html, 'text/html');

			// 右カラムに必要な要素
			const banners = doc.querySelectorAll('.section__sidebar .panel');
			const container = document.querySelector('.section__sidebar.col-lg-4');
			banners.forEach((banner, index) => {
				if (index === 0) return; //最初の要素「hoge of hoge本を視聴済み」インジケーターをスキップ
				container.insertAdjacentHTML('beforeend', banner.outerHTML);
			});
		})
		.catch(error => {
			console.error('Error fetching the URL:', error);
		});
	}
});

2. 該当テーマを使用したProduct、Post画面の設定

Product Sidebarの内容を作り、Show Sidebarを有効 ✅ にしておく

Post Sidebarでは、Product Sidebarと共通化したい部分を作らずShow Sidebarを有効 ✅ にしておく

3. Kajabiに外部.jsファイル読み込み設定

先述.jsファイルをKajabiの設定（Settings > Site Details）画面のPage scriptsに設定し読み込む

以上でPreviewすると、Product Sidebarの内容がPost画面にも反映されている事が確認出来る