Liquid、JavaScriptなどに関する質問
いつもお世話になっております。
テーマ内のコードを見ていると、
解決済! ベストソリューションを見る。
成功
{% javascript %}{% endjavascript %}
上記はセクションのLiquid構文が使えるJavascriptで、scripts.js として全てをまとめた圧縮ファイルになり、 {{ content_for_header }} の1つとしてに出力されます。
(ブラウザのDevToolでNetworkから探して中を見てください)
ソース見るとdeferになっているので、DOM構築中もバックグラウンドでロードされ、DOM構築後に実行されます。
一方で<script>のほうは、それぞれのLiquidの中にあるので、ロードされる順番もバラバラだと思います。
どちらが最適なのかは設計次第だと思います。
るん 様
お世話になっております。
フルバランスのドウケです。
ご質問を確認いたしました。
最近、私も同じ疑問を持っておりました。
こちらの記事、ご参考になりませんでしょうか。
1つ目のAnswerの上段に、javascriptタグの使用例
下段に、scriptタグの使用例が記述されておりました。
https://stackoverflow.com/questions/64507365/how-does-shopifys-javascript-tag-work
なにかヒントになれば幸いです。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス
ドウケ様
いつもお世話になっております。
お返事が遅くなってしまい、申し訳ありません。
参考記事確認させていただいたのですが、私には難しくてよく理解できませんでした。
ドウケ様的にはどのような理解でしょうか?
よろしければ教えていただけると助かります。
よろしくお願いいたします。
成功
{% javascript %}{% endjavascript %}
上記はセクションのLiquid構文が使えるJavascriptで、scripts.js として全てをまとめた圧縮ファイルになり、 {{ content_for_header }} の1つとしてに出力されます。
(ブラウザのDevToolでNetworkから探して中を見てください)
ソース見るとdeferになっているので、DOM構築中もバックグラウンドでロードされ、DOM構築後に実行されます。
一方で<script>のほうは、それぞれのLiquidの中にあるので、ロードされる順番もバラバラだと思います。
どちらが最適なのかは設計次第だと思います。
ちなみに同様に
{% stylesheet %}{% endstylesheet %}
も
styles.css としてまとめられ、 {{ content_for_header }} の1つとしてに出力されます。
_osamu_iwasaki_様
ご回答ありがとうございます。
お返事が遅くなってしまい、大変申し訳ありません。
そのような違いがあるのですね。
すごく良く理解できました。
ただ勉強不足で、ネットワークでファイルを探す方法がわかりません。
よろしければそちらもお聞きして良いでしょうか?
よろしくお願いいたします。
こちらはCHROMEですが公式ヘルプご覧ください
https://support.google.com/campaignmanager/answer/2828688?hl=ja
_osamu_iwasaki_様
{% javascript %}{% endjavascript %}と<script>タグの違いについて、またCSSにつきましても詳しく教えていただきまして、ありがとうございました。
検証ツールでもいろいろ確認できることも教えていただきまして、ありがとうございます。
検証ツールの使い方も勉強しようと思います。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024