[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を動かすのは結構クセモノですね!

 

◆Shopifyモーダルセクションテンプレート参考一覧

 

 

私はこのスキルを身につけて不労所得を得ています

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

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

HTML/CSSだけで自動収益化 1万円達成

関連記事

[Dialogflow]ダイアログフローでハローワールド

[Python] Tweepyのme()でエラー出た時の解決法

【Shopify】商品ページでスクロールするとカート追加ボタンが追従してくる方法

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

Shopifyで複数モーダルを作る方法

Pythonで未来予測 JupiterLabでProphetのライブラリエラー解...