商品登録などのリッチエディタに独自で作って登録したテンプレートコードを挿入する仕様を実装することはできますか?

4件の返信4
junichiokamura
Community Manager
1114 257 453

テーマのカスタマイズで商品ページに行くと、標準ページの下にテンプレート作成があるので、それで商品ごとのテンプレートを作成したのちに、商品詳細でそのテンプレートを選択すれば、その商品だけ別テンプレートで表示できます。その新しく作ったテンプレートのコード内でリッチエディタのHTMLにコード挿入することは可能かと思います。

問題の内容がよくわかってないのですが、リッチエディタで作ったと部分とは、商品説明の部分をことを指してますか?

あとは、商品説明ではないですが、メタフィールドには、Liquid codeも持てますので、そちらを使った方がお望みの実装になるかもしれません。

Technical Partner Manager, Japan
mimi6520
探検家
48 0 5

説明不足で失礼しました。
おっしゃる通り、商品説明のエディタのことを指しています。


wordpressでいうところのTinyMCE Templatesのような仕組みが希望です。
事前に作った雛形コードを登録しておいて、エディタないで選択すると挿入できる仕組みになります。

junichiokamura
Community Manager
1114 257 453

商品説明のエディタに何か機能を追加することはできません。

テーマのLiquid側で整形するか、(例えば、商品説明を指摘したテンプレートに当てはめるセクションを作るとか)、管理画面の商品編集画面に、商品説明を独自に加工できるアプリを作るか(この機能のためだけにアプリを作るのはオーバースペックな気がしますが)だと思います。

Technical Partner Manager, Japan
Jizo_Inagaki
航海者
473 175 468

横から失礼します。

 

独自で作って登録したテンプレートコード

上記が理解できず自信はありませんが、単に「任意のHTMLコードを商品説明欄に入れる」ということであれば、ブラウザのブックマークレットで実現できるかなと思います。

以前別のCMS用に作成したことがあるので試作してみましたが、商品説明欄で「HTMLを表示する」ボタン(「<>」)をクリックしてHTML表示にした状態で、以下のブックマークレットを実行するとHTMLが追加されることが確認できるかと思います。

 

 

 

 

javascript&colon; (() => {
  const elem = document.getElementById('product-description');
  elem.value = elem.value + '<h1>H1見出し</h1>';
})();

 

 

 

[追記]
シンタックスハイライト内で「:」が「&colon;」に変換されるようで直せませんでした。
1行目内の「&colon;」は「:」に読み替えてください。

 

JSやブックマークレットの詳細に関しましては、Googleなどで検索したりいろいろ試作して確認いただければと思います。

 

以上ですが、趣旨が違ったり動作しない場合は申し訳ありません。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。