productオブジェクトを入れた配列を作り、オブジェクトの情報にアクセスする方法につきまして

[るん]

いつもお世話になっております。

カート内商品のproductオブジェクトを入れた配列を作り、その配列から情報を取り出したいと考えています。

下記のようなコードを作成しましたが商品情報を取り出すことができません。

{%- assign items_str = "" -%}
{%- for item in cart.items -%}
  {%- assign items_str = items_str | append: item.product | append: ',' -%}
{%- endfor -%}
{%- assign items_array = items_str | split: ',' -%}
{%- for item in items_array -%}
  {{ item.title }}
{%- endfor -%}

最後のfor文を

{%- for item in items_array -%}
  {{ item }}
{%- endfor -%}

と変更すると、ProductDropと表示されるので、商品オブジェクト自体は配列に入れられてるかなとは思うのですが、商品情報にアクセスするには、どのようにコードを書けば良いでしょうか？

よろしくお願いいたします。

[株式会社フルバランス]

るん　様

お世話になっております。

フルバランスのドウケです。

ご質問を確認いたしました。

Liquid Objectへのアクセス、少しややこしいですよね。

前提として、Liquidの仕様上、オブジェクト形式では出力しようとすると〇〇Dropと表示されてしまいます。

そのため、今回の「ProductDrop」については、item.titleやitem.availableとすることでProduct内の各プロパティを出力できるようになります。

ご参考になりましたでしょうか。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス　ドウケ

[るん]

株式会社フルバランス

ドウケ様

ご回答ありがとうございます。

私もitem.titleやitem.availableでアクセスできるかと思い、試してみたのですがなぜか何も表示できませんでした。

理由などわかりますでしょうか？

よろしくお願いいたします。

[株式会社フルバランス · Accepted solution]

るん　様

お世話になっております。

早速ご確認いただきありがとうございます。

推測ですが、appendを使用できるのがstring型ですので、item.product（オブジェクト）を対象としている箇所で、追加できていないのかもしれません。

ご要件に合うかわかりませんが、liquid内であれば以下のようにすることで、カート商品にアクセスすることが可能です。

  {%- for item in cart.items -%}
    {{ item.product.title }}
  {%- endfor -%}

また、〇〇DropとでないようJSでアクセスしやすい配列を作ることも可能です。

<script>
  const productArray = [];
  {%- for item in cart.items -%}
    productArray.push({
      title: "{{item.product.title}}",
      available: "{{ item.product.available}}"});
  {%- endfor -%}
  console.log(productArray)
</script>

ご参考になれば幸いです。

どうぞよろしくお願いいたします。

フルバランス　ドウケ

[るん]

株式会社フルバランス

ドウケ様

お世話になっております。

＞推測ですが、appendを使用できるのがstring型ですので、item.product（オブジェクト）を対象としている箇所で、追加できていないのかもしれません。

こちら納得しました。

確かにそうかもしれません。

やっぱり

{%- for item in cart.items -%}
    {{ item.product.title }}
 {%- endfor -%}

のように一気にアクセスするしかなさそうですね。

JSで配列を作る方法も教えていただきまして、ありがとうございます。

これでしたら必要な情報を配列にあらかじめ保存しておけば、いろいろ使えそうです。

参考になりました。

ありがとうございます。