🌍

Webflow でクエリパラメータによってコンテンツを出し分ける

2021/03/22に公開

Web

nocode

webflow

tech

はじめに

Webflow でちょっとしたダイナミックコンテンツを表示する方法について検討しました。

今回のユースケースとしては、既存サービスの一部静的ページを Webflow でホスティングし、センシティブに当たらない程度のデータを既存サービスで生成するリンク等を通してURLパラメータで渡し、コンテンツの出しわけを行う場面を想定しています。

前提事項

Webflow は任意の課金プランを使用する想定です。この記事の方法では、Custom Code の機能を使用します。

実装例

<script>
  const params = new URLSearchParams(location.search)

  // A. 要素の表示・非表示を切り替える
  updateVisibleElements('segment__only-guest', params.get('isGuest') === 'true')

  // B. 渡されたパラメータを表示する
  updateVariableElements('variable__age', params.get('age'))

  function updateVisibleElements(className, visible) {
    const elements = document.getElementsByClassName(className)
    for (element of elements) {
      element.style.display = visible ? 'block' : 'none'
    }
  }

  function updateVariableElements(className, text) {
    const elements = document.getElementsByClassName(className)
    if (elements.length > 0 && !text) {
      return console.error('Required parameter not present: text in showVariableElement')
    }
    for (element of elements) {
      element.innerText = text
    }
  }
</script>

URLパラメータのパースについて

URLSearchParams を使っているので、IEには対応していません。IEに対応するには、自前でパーサーを書くなどして対応する必要があります。

Custom Code の設定

Project Settings > Custom Code からカスタムコードを編集します。
Footer Code に上記の実装例を貼り付けて保存します。

特定のページでしか使用しないことが明らかであれば、 Page settings の方で設定した方が良さそうです。

使用箇所の例

Designer 画面での基本操作については省略します。

A. 要素の表示・非表示を切り替える

ここでは例として Container を設置します。 Selector で class を設定できる要素であればなんでも大丈夫です。
JavaScriptで定義している segment__only-guest を class に設定します。

B. 渡されたパラメータを表示する

例では文章中の文言の一部を置き換えるイメージとしてやるので、 Paragraph を設置します。
Paragraph 中の一部を範囲選択すると、メニューが表示されます。🖌 のアイコンから Span で包むことができます。この XX の部分が実質デフォルト値となるため任意に設定しておきます。
Span の要素に対して variable__age を class に設定します。