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につきましても詳しく教えていただきまして、ありがとうございました。
検証ツールでもいろいろ確認できることも教えていただきまして、ありがとうございます。
検証ツールの使い方も勉強しようと思います。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024