Liquid、JavaScriptなどに関する質問
shopifyのLozyLoadの仕様について、下記条件を満たしていますでしょうか。
・intersectionObsever APIで実装しているか
・polyfillを実装しているか
・<noscript>タグを実装しているか
・LozyLoadコンテンツに構造化データをマークアップしているか
ご存知の方いましたら、教えていただければと思います。
よろしくお願いします。
解決済! ベストソリューションを見る。
成功
jizoさんのおっしゃる通り、テーマはliquidの振る舞いや基本ファイルの構成などのルール以外は、Shipify本体と分離されたファイルの集合なので、JSに関する挙動はテーマで独立しています。ですので、ShopifyとしてのLazyLoadへの対応の仕様は基本的にはありません。テーマ次第ということになりますし、ご質問の条件を満たしたテーマを自作されることも可能です。
わずかですが、以下の日本語翻訳されたブログでも、初歩的なLazyLoadについて実際にShopifyチームがどのようにテーマに応用したか記載しているので、ご参考にしてください。
https://www.shopify.jp/blog/partner-shopify-theme-team-fast-narrative-improve
公式的なものがあるのかはわかりませんが、テーマごとにそれぞれ用意していると考えています。
検索で出てくる記事には各自実装というものが目につき、以下のようにshopify partners内の2019年の記事(Slateに特化した内容ですが)にも同種の記事がありましたので、公式的なものはないという可能性が高いと思われるためです。
https://www.shopify.com/partners/blog/lazy-loading
もっとも、Slateに入っていたのなら lazysizes.js が公式に近いといえるのかもしれませんが。
Debutであれば、上記記事に記載されているのと同じ lazysizes.jsやriasが使われています。
lazysizes.jsのChangelogをみますと、v4.1.4にてIntersectionObserver APIを使ったバージョンが作成されたようですが、Debutテーマ内を検索してもIntersectionObserverの記述が見つからなかっため、おそらく使っていないバージョンのはずです。
他のテーマはわかりませんので、お使いのテーマのドキュメントかテーマ内のコード検索で特定するしかないかもしれません。
以上ですが、「公式のものはない」という根拠を見つけられておらず、推測にすぎない点をご理解ただれればと思います。
間違っていましたらどなたか訂正いただければ助かります。
成功
jizoさんのおっしゃる通り、テーマはliquidの振る舞いや基本ファイルの構成などのルール以外は、Shipify本体と分離されたファイルの集合なので、JSに関する挙動はテーマで独立しています。ですので、ShopifyとしてのLazyLoadへの対応の仕様は基本的にはありません。テーマ次第ということになりますし、ご質問の条件を満たしたテーマを自作されることも可能です。
わずかですが、以下の日本語翻訳されたブログでも、初歩的なLazyLoadについて実際にShopifyチームがどのようにテーマに応用したか記載しているので、ご参考にしてください。
https://www.shopify.jp/blog/partner-shopify-theme-team-fast-narrative-improve
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024