Liquid、JavaScriptなどに関する質問
Liquid内で、
collection.products
で、例えば「大きいサイズ」というタグが付いている商品のみを抽出したいです。
以下のようなLiquid では上手く抽出できませんでした。「tags」が配列なのが問題なのかもしれませんが、
原因がわかる方ご教示いただけますでしょうか
<やりたいこと>
whereは配列を新規作成するためのものです。
用例は以下です。
{% assign kitchen_products = collection.products | where: "type", "kitchen" %}
※変数「kitchen_products」に、現在表示しているcollectionの商品から、type kitchenを含むものを格納
{% for product in kitchen_products %}
{{ product.title }}
{% endfor %}
※for文で配列を出力(例ではタイトルのみ)
(参考:https://shopify.github.io/liquid/filters/where/)
ーー
新規に変数を作らないならば、for文の中で振り分けを行います。
{% for product in collection.products %}
{% if product.tags contains '大きいサイズ' %}
出力したい情報
{% endif %}
{% endfor %}
product.tagsは配列ではなくstring型です。
実際{{ product.tags }} で、登録しているタグが全て結合された文字列で出力されます。
そこで、その文字列の中から任意のタグ名が含まれていれば出力という方法を取っています。
ーー
ちなみに、以下URLであれば、「①任意のコレクション」から、さらに「②任意のタグ」で絞り込めます。
https://ドメイン/collections/①コレクション名/②大きいサイズ
上2つの方法では、ページャーが機能しなさそうです。(少々手を桑れば可能かもしれませんが)
商品の一覧出力を考えているならばこちらがシンプルです。
早速のご回答、ありがとうございました。
product.tagsは配列ではなくstring型です。
そこで、その文字列の中から任意のタグ名が含まれていれば出力という方法を取っています。
→ありがとうございました。こちら認識が異なっておりました。
ちなみに、以下URLであれば、「①任意のコレクション」から、さらに「②任意のタグ」で絞り込めます。
https://ドメイン/collections/①コレクション名/②大きいサイズ
→ありがとうございます。はい、こちらで出来ることは存じておりますが、Liquid内で行う必要があり、今回の質問に至りました。
上2つの方法では、ページャーが機能しなさそうです。(少々手を桑れば可能かもしれませんが)
商品の一覧出力を考えているならばこちらがシンプルです。
→おっしゃるとおり、ページャーの pagenate by 句に影響してしまうため、どうしようかと考えております。
それがなければ、通常の
{% for product in collection.products %}
{% if product.tags contains '大きいサイズ' %}
出力したい情報
{% endif %}
{% endfor %}
で提示いただいた、forとifで対応が可能です。
もし、「少々手を桑れば可能かもしれませんが」の部分で良い案がございましたら、是非ご教示下さいませ。
やり方の草案です。
こちらは開発状況を合わせることが出来ないため、以下の方法で出来ない場合、別途質問を投げた方が良いでしょう。
また、ページネーションを使用せず、アプリを使用しているため、実際出来ているか確認が取れていません。
ーー
■やり方
まず、collection-template.liquidあたりに、商品情報を出力させる記述があると思います。
{% for product in collection.products %}
①{% include 'product-list', product: product %}
{% endfor %}
collection.productsというのはコレクション内の全商品を指します。
これをループで順々に処理しているわけですね。
※①部分に差があるかもしれませんが、ここは気にしなくて大丈夫です。
ページネーションも同様に、コレクション内の全商品を参照しています。
こちらもcollection-template.liquidあたりにあるかと思います。
{% paginate collection.products by limit %}
{% include 'pagination' %}
{% endpaginate %}
この処理を流用し、ループ対象を「大きいサイズ」商品リストに書き換えるだけで、一覧の出力が可能となります。
そんな「大きいサイズ」商品リストの取得方法ですが、whereでは出来そうもありませんでした。
そこでもっと楽に、任意のコレクションを取得するのが良いでしょう。
未作成であれば、タグ「大きいサイズ」のコレクションを新規作成してください。
{% product in collections["取得したいコレクションのハンドル名"].products %}
※liquidは配列のフィルタリングにクセがあります。
concatとifを用いて、タグ「大きいサイズ」を含む配列を1つずつ結合する位しか思い浮かびませんでした。
※処理に時間がかからないのは特定コレクションの取得です。その上、コードも短く済むのでconcatは使わない方が無難と思います。
(concatの参考:https://shopify.dev/api/liquid/filters#concat)
■出力案1
ページ内にて、通常の商品一覧とは別に「大きいサイズ」リストを出力させるなら以下です。
*商品リスト
{% for product in collections["取得したいコレクションのハンドル名"].products %}
{% include 'product-list', product: product %}
{% endfor %}
*ページネーション
{% paginate collections["取得したいコレクションのハンドル名"].products by limit %}
{% include 'pagination' %}
{% endpaginate %}
■出力案2
特定条件で「大きいサイズ」リストを、それ以外では全リストを出力させるなら、その条件を追記します。
*条件
{% if 条件式 %}
{% comment %}特定条件下で使用する、「大きいサイズ」商品リスト{% endcomment %}
{% assign custom_collection_prodcts = collections["取得したいコレクションのハンドル名"].products %}
{% else %}
{% comment %}通常時の全商品リスト{% endcomment %}
{% assign custom_collection_prodcts = collections.products %}
{% endif %}
*商品リスト
{% for product in custom_collection_prodcts %}
{% include 'product-list', product: product %}
{% endfor %}
*ページネーション
{% paginate custom_collection_prodcts by limit %}
{% include 'pagination' %}
{% endpaginate %}
こちらの記述を採用する場合、もしかしたら他にも「collections.products」を「custom_collection_prodcts」に書き換える必要があるかもしれません。
範囲がどこまで波及するかは、こちらでは明言できないです。
ご丁寧に詳しく教えていただきありがとうございます。
どの方法も検討したのですが、やはり
・コレクションを専用に作るのはある理由でできない(説明ができず申し訳ありません)
・Liquidで「大きいサイズ」タグがついているもの(又は、メタフィールドで「大きいサイズ」がtrueのものでもOK)をLiquidのcollection.products で抽出して表示したい
・上記の場合でも、条件に合わなかった商品を「商品カウント数」にも「ページネーション」にも含まず表示したい
(例:通常のコレクション表示の場合、商品が全100件で、ページネーションが20商品ごと、「大きいサイズ」タグがついているのが内とびとびで22商品だった場合、「全22商品」という件数も取得でき、1ページ目にはしっかり20商品が表示されている状態が理想)
というのが要件となるので、やはり collection.products の段階で絞り込みをする必要があります。
一旦collection.products を回して、条件に合う商品を別のcustom_collection配列に追加し、
custom_collectionを再度回して、件数やページネーションを表示する といったことができればよいのですが、custom_collection配列を作成する という工程自体がLiquidではできなさそうですね。。
liquidでページネーション含めて実装するより
.../collections/all/大きいサイズ
で絞り込み表示をしたほうが楽な気がしました。
オンラインストアを運営する中で、商品の返品や交換は重要なプロセスとなります。Shopify管理画面を通して簡単に返品や交換が行えることをご存知でしょうか?希望する場合は、お客...
By Mirai Sep 15, 2024Shopifyの請求書の支払いが失敗したという通知を受け取って驚いたことはありますか。初めての支払いでエラーが発生したり、これまで何の問題もなく支払いできていたのに突然失敗し...
By Minami_ Sep 8, 20242023年2月、Shopifyはcheckout.liquidを廃止し、Checkout Extensibilityに移行することを発表いたしました。この新しいチェックアウト...
By JasonH Aug 15, 2024