COLOR MEショップの商品ページに、Spearly CMSのコンテンツを埋め込む方法を説明します。
COLOR MEの編集画面を開く
まず、コンテンツを埋め込みたい商品の編集画面を開きます。
COLOR MEの「商品説明」にSpearly CMSの共通スクリプトタグと埋め込みタグを設置する
「商品説明」にSpearly CMSの埋め込みタグを設置することで、ページ表示時にコンテンツも表示されます。
埋め込みタグのための共通スクリプトタグを確認する
埋め込みタグを利用するために必要な共通スクリプトタグの取得場所を確認しましょう。
共通スクリプトタグは、対象のコンテンツタイプの埋め込み方法の「共通のスクリプトタグの設置」から確認できます。
埋め込みタグを「商品説明」に記述する
Spearly CMSのコンテンツを表示するために、「商品説明」に共通スクリプトタグと埋め込みタグを記述します。
埋め込みタグについては、共通スクリプトタグと同様に「埋め込み方法」をご覧ください。
<!--- 埋め込み例 --->
<!--- 共通スクリプトタグ --->
<script src="https://static.spearly.com/js/cms.js" defer></script>
<script>...</script>
<!--- 描画したい埋め込みタグ --->
<div cms-item cms-content-type="ab-sample" cms-content="c-asdf">
<h1>{%= ab-sample_title %}</h1>
<div>{%= ab-sample_description %}</div>
</div>上記を参考に、「商品説明」に共通スクリプトタグと埋め込みタグを記述します。
その後、商品情報を保存します。以上でコンテンツを埋め込むための作業は完了です。
実際に商品のページを確認し、コンテンツが表示されているか確認しましょう。
