パーソナライズされたコードインジェクションでコレクションフィールドを活用する

動的埋め込みを使用すると、CMS コレクション フィールドを使用して埋め込みコードを動的に更新できます。

動的注入により、注入されたコードでCMSコレクションフィールドをリアルタイム更新に使用できる柔軟性が得られます。これにより、インタラクティブな ソーシャルシェアボタン、eコマースプラットフォーム、ポッドキャストや音楽プラットフォーム、イベントウェブサイトなど。

ダイナミックインジェクションの主要コンポーネント

動的注入はそれぞれ若干異なりますが、すべて次のものが必要です。

  • 外部埋め込み 脚本異なる識別子 動的に表示したいコンテンツ(ツイート、Shopifyアイテム、Eventbriteイベントなど)
  • Webflow CMS コレクション 一意の識別子を入力するためのプレーンテキストフィールドを含む

ダイナミックインジェクションの開発

クリックしてツイートするボタンを作成しましょう。動的インジェクションを設定するには:

  1. コレクション内に一意の識別子用のプレーンテキストフィールドを作成し、「ツイートテキスト」という名前を付けます。
  2. 下記のコードをコピーしてください
  1. コレクションリストまたはコレクションページに埋め込み要素を挿入する
  2. コードを貼り付ける
  3. 一意の識別子「ツイートテキスト」を選択します
  4. クリック フィールドを含める
  5. 「ツイートテキスト」を選択
HTML 埋め込みコード エディターが開いて入力されています。エディターの右側にある [+ フィールドを追加] ボタンが強調表示されています。ドロップダウン テキスト メニューの [ツイート テキスト] もエディター上で強調表示されています。
よりカスタマイズされた開発に関する包括的なガイドを参照してください クリックしてツイートするボタン.

以下のガイドを参照して、動的インジェクションを活用する方法を学習してください。

認識された制約: E コマース フィールドに関連する動的インジェクションは、選択されたバリアントに基づいて自動的に更新されません。たとえば、サイトの訪問者が異なる価格の製品バリアントを選択した場合、この価格変更は動的インジェクションによって反映されず、顧客は価格変更を確認できません。

ユアン・マック