Shopifyの商品説明部分に、Spearly CMSのコンテンツを埋め込む方法をご説明します。
Shopifyの編集画面を開く
まずはShopifyにログインし、適当な商品を選択します。この例では、以下の商品を対象に説明します。
商品をクリックすると、このような商品編集画面に遷移します。
「説明」の部分の右上にあるボタンをクリックして、HTML編集モードに入ります。
ShopifyのHTML編集画面にSpearly CMSの共通スクリプトタグと埋め込みタグを設置する
HTML編集画面にSpearly CMSの埋め込みタグを設置することで、ページ表示時にコンテンツも表示されます。
埋め込みタグのための共通スクリプトタグを確認する
埋め込みタグを利用するために必要な共通スクリプトタグの取得場所を確認しましょう。
共通スクリプトタグは、対象のコンテンツタイプの埋め込み方法の「共通のスクリプトタグの設置」から確認できます。
埋め込みタグをHTML編集画面に記述する
Spearly CMSのコンテンツを表示するために、HTML編集画面に共通スクリプトタグと埋め込みタグを記述します。
埋め込みタグについては、共通スクリプトタグと同様に「埋め込み方法」をご覧ください。
shopifyの場合は、エスケープのために {% raw %} と {% endraw %} で囲う必要があります。
{% raw %}
<!--- 埋め込み例 --->
<!--- 共通スクリプトタグ --->
<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>
{% endraw %}上記を参考に、HTML編集画面に共通スクリプトタグと埋め込みタグを記述します。
これだけで必要な作業は完了です。プレビューボタンをクリックして、商品ページの説明にSpearly CMSのコンテンツが表示されていることを確認しましょう。
