[Shopify]モーダル作りたいけどJS動作しない

Shopifyのページでモーダルを表示したいと思い、JavaScriptでコードを書いたのですが上手く表示されず数日悩んでいました。。。ようやくモーダルを表示させることができたので忘れないように残しておきます!

AssetにJSファイルを作る

Shopifyのコード編集にある「Asset」に「popup.js」ファイルを作成。

ここがポイントだった!

JSファイルを作るまでは簡単なのですが、それをページに埋め込むのに「<script>」を入れて動作してませんでした。

ここにAssetを挿入する書き方が記載されていました!

https://shopify.dev/docs/themes/liquid/reference/filters/url-filters

「{{ ‘popup.js’ | asset_url | script_tag }}」をページに入れるだけでした!

「popup.js」はAssetで追加したファイルです。Assetは「asset_url」で指定してあげて、「script_tag」を記載する。この「script_tag」がなければ動きません。

「Templates」に「pages」フォーマットで「popup.liquid」を作成しました。そのページにHTMLとCSSを記載し、一番下に「{{ ‘popup.js’ | asset_url | script_tag }}」を入れたらモーダル表示ができました!

ShopifyでJSを動かすのは結構クセモノですね!

34歳から始めるオンライン学習

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

関連記事

[flutter]実機でデバッグする方法

[Flutter]へっぽこプログラミング!またエラー出た!

[Dialogflow]JSでダイアログフローを動かしてみる

[Flutter]棒グラフ作ってみる

Progate(プロゲート)完了したら何したらいい?

[Flutter]Providerを使ってみる