キャンセル
次の結果を表示 
次の代わりに検索 
もしかして: 

全商品表示方法について

解決済
新規メンバー
1 0 0

【質問】全商品を表示させる方法をお伺いします。

 

コレクションの中に、商品のカテゴリーをいくつか作っているのですが、その一項目に「全商品を表示」という項目を作りたいのですが、どうしても全商品を表示させることができません。

 

ショップページを見るとどうしても次のページを見るように矢印をクリックしなければならないのですが、そうではなく1ページに全商品(500品ほど)を表示させる方法はありますでしょうか?下にスクロールしていけば次々と商品が見えるようにしたいという意味です。

 

当方、ウェブサイト知識は簡単なHTML程度を理解している程度ですので、なるだけわかりやすくおしえていただければ助かります。どうぞよろしくお願いいたします。

 

0 件の「いいね!」
Highlighted

成功

観光客
9 3 7

かなり古い投稿ですので、すでに解決しておられるかもしれませんが。
コミュニティの活性化のためにも回答させていただきます。

HTMLのみの知識ということですと実装はかなりハードルが高そうですが・・・

通常collectionに含まれるプロダクトは50商品が表示限界になっているようです。

ただしこれは一回のループ内で・・・という縛りっぽいです。
当方がまだ構築中で50にも商品数が届いていなにので
まだ確実なテストできておりませんが。
collection.products のループを数カ所作った結果、同じプロダクトの情報ではありますが50を超える

プロダクトの出力が可能でした。これが実際、すべて異なるプロダクトの数が50個までという謎仕様出ない限り

複数個のcollection.products のループを設置で実現できるかもしれません。

{%- assign maxpage = collection.all_products_count | divided_by: 10 | ceil -%}
{% for i in (0..maxpage) %}
	{%- assign offset = i | times: 10 -%}
	{%- assign offset_limit = i | plus: 1 | times: 10 | minus: 1 -%}
	{% for product in collection.products offset: offset limit: 10 %}
                <!-- ここにアイテムカードをincludeする -->
  	{% endfor %}
{% endfor %}

こんな感じのコードですかね~
これは10件ずつループで回しています。
たぶんソートも効くはずです。

ただこのままもし本当に500商品とか表示すると重くて仕方がないと思うので
最初の10以降はすべてレイジーロードにするとかするなどしてパフォーマンスを考慮しないといけないとおもいます。

 

0 件の「いいね!」

コミュニティ活性のためのご回答ありがとうございます!

 

参考になりました。

 

僕もoffsetを使ったこの方法がよいと思います。

 

レイジーロードとは、Twitterなどのスクロールのように、次にスクロールした段階で、続きのoffsetからデータを描画するということですよね?

Technical Partner Manager, Japan
0 件の「いいね!」

成功

観光客
9 3 7

Twitterのフロント部分はReactを使ったSPAですね。最初投稿は3件くらいしか生成されていませんが、スクロールするとDOMツリーがどんどん生成されていくタイプです。

レイジーロードはもう少し単純なもので、HTTPリクエストが発生しそうなものをすべて一旦別の要素で置き換えます。
例えば 最も重たいのは画像ですよね。
通常 <img src="画像のURL">  となっているはずですが
<img src="" data-src="画像のURL">  のようにして、いったんリクエストされない形にしておきます。

でスクロールしていって当該の要素がウィンドウに近づいたら data-srcの中身を srcに移し替えて画像をリクエストします。

こうすることで一気に大量のリクエストが送られずに、徐々に表示されるため、体感スピードが大幅に向上します。

 

自身で書かなくても、class を当てるだけでいい ライブラリもいくつか存在します。

liquidはバックエンド言語だと思うので、APIがないとこういったリアルタイムな通信はできないんじゃないでしょうか。
なのでテーマ編集のみで実装するのであれば、ファーストビュー分を除く全てのDOMを上記のようにlazy対応しておいて
JSでスクロール監視→src書き換え とするしかないかな~と思います。

1 件の「いいね!」

なるほど。ご回答ありがとうございます。

 

>  liquidはバックエンド言語だと思うので、APIがないとこういったリアルタイムな通信はできないんじゃないでしょうか。


そうですね、liquidのデータは最初の描画時に全てデータを保持してるはずなので、リアルタイムで追加データを参照することはできないと思います。

 

 

Technical Partner Manager, Japan
0 件の「いいね!」