今回は、Liquidで定義した変数をJavaScriptで使用する方法をご紹介します。
後半ではスライダーのJSプラグイン『Swiper』にLiquidで取得した値を設定する方法もご紹介しておりますので、ご興味がある方はぜひご覧ください。

Liquidで変数を定義する

Liquidで変数を定義するにはassignを使用します。

{% assign weather = 'sunny' %}

上記のコードでは、'sunny'という値を持ったweatherという変数を定義しています。

この内容を表示する際には、以下のように記述します。

<p>{{ weather }}</p>   //結果：sunny

Liquid変数の値をJavaScriptの変数に渡す

先ほど作成したweatherという変数の値をJavaScriptのjsWeatherという変数に格納します。

<script>
    let jsWeather = {{ weather }}
</script>

記述はこれだけです。
jsWeatherの値に、先ほどご紹介したLiquid変数の値の表示方法と同じようにコードを記述します。

JavaScriptで変数を使用する

jsWeatherにはすでにLiquid変数wetherの値が格納されているので、JavaScriptのコード内で使用することができます。
例) jsWeatherの値をconsoleに表示する

<script>
    //Liquid変数weatherの値をjsWeatherに格納
    let jsWeather = {{ weather }}
    //jsWeatherの値をconsoleに表示
    console.log("It's" + jsWeather + "today!") //結果　： It's sunny today!
</script>

Liquidの変数をJavaScriptで活用する方法

ここまでの例では、イマイチ使用メリットが感じられないかと思いますが、JavaScriptにLiquid変数の値が渡せるのはとても便利です。
例えば、JSプラグインを使用する際にもカスタマイズ画面から動的に値を変更することが可能になります。
以下はLiquid変数を使用してスライダーのJSプラグイン「Swiper」に自動スライドを設定する例です。

//スライダーオートプレイ(自動スライド)のチェックボックス判定
{% if section.settings.slider_autoplay %}
  {% comment %}チェックがついていたらautoplayの値はtrue{% endcomment %}
  {% assign autoplay = true %}
{% else %}
  {% comment %}チェックがついていなかったらautoplayの値はfalse{% endcomment %}
  {% assign autoplay = false %}
{% endif %}

<script>
  // JSのautoPlay変数にLiquid変数autoplayを格納
  let autoPlay = {{ autoplay }}
  let autoPlaySlide;
  //autoPlayのチェックボックス条件分岐
  if (autoPlay) {
    //autoPlayがtrueならautoPlaySlideにオブジェクトでSwiper autoplayのパラメーターを格納
    autoPlaySlide = {
      delay: 2000,
    }
  } else {
    //autoPlayがfalseならautoPlaySlideにfalseを格納
    autoPlaySlide = false
  }

  const swiper = new Swiper('.swiper', {
　　　//中略
   //swiperのautoplayにautoPlaySlideの値を設定
    autoplay: autoPlaySlide
  });
</script>

{% schema %}
  {
    "name": "slideshow",
    "settings": [
      {
        "id": "slider_autoplay",
        "type": "checkbox",
        "label": "自動スライド",
        "default": true
      }
    ],
    "presets": [
      {
        "name": "slideshow"
      }
    ]
  }
{% endschema %}

①schemaでセクション内に自動スライドのチェックボックスを設置。
②チェックボックスの値をLiquid変数に格納。　→　JavaScript変数にLiquid変数の値を格納。
③if文を使用して、変数autoPlayの真偽値を判定。
④trueならSwiper autoplayのパラメーターを、falseならfalseを変数autoPlaySlideに格納。
⑤Swiperのautoplayの値にautoPlaySlideを指定。

少しややこしいですが、このようにShopifyのカスタマイズ画面で設定した値を動的に活用することができます。
スライダーでは、スライダースピードやその他エフェクトもカスタマイズ画面から動的に変更する実装が可能です。

また、商品情報やブログ記事情報、タグなどもLiquid変数からJavaScript変数に渡すことができるので様々な面で便利に利用できるのではないでしょうか。
ぜひ使ってみてください！


■パートナー募集について
運営元であるkraftでは一緒に活動するパートナーを募集しています。
個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。
ご興味のある方は、こちらよりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます)

具体的な内容については以下URLをご確認ください。
パートナー募集の詳細について