商品詳細ページで直前のURLから属するコレクションを取得して、そのコレクション内の他の商品を表示

[seezoo]

商品詳細ページに、関連商品を表示しようとしています。

直前のURLから属するコレクションを取得して、そのコレクション内の他の商品を表示します。

javascriptのdocument.referrerで直前のURLを取得し、コレクションは取得できましたが、そのjavascriptの値をliquidに渡したいのですが、うまくいきません。

そもそもjavascriptの値はliquidに渡せないのでしょうか？

その場合、直前のURLから属するコレクションを取得し、そのコレクション他の商品を表示する為の代替案はありますでしょうか？

[rinaflora · Accepted solution]

ご投稿いただきありがとうございます。

Javascriptは、高度な専門知識が必要であるためShopifyサポートの対象外となっております。英語ではありますが、開発者様用の資料はご用意しておりますので、少しでもご参考になりますと幸いです。

• Show related products on a product page - Shopifyデベロッパー資料

なお、代替案としてアプリを使いこちら実装できる可能性がございます。

• PX Related Products 
• Related Products - Relatify 
• その他類似アプリ

外部アプリは弊社開発ではなく、各アプリ開発元が運営・管理をしておりますので弊社でも機能性の詳細などを把握しておりません。まずは、各アプリのアプリストアのページにて機能説明をご確認ください。詳細な機能については実際にご利用いただくことを推奨しておりますので、1−2つほどご興味のあるアプリをご選択のうえ、無料トライアルにて仕様や動作確認をして頂ければと存じます。

実際にアプリをご利用いただく中でご質問等出てくるかと存じますが、その場合はアプリストアに記載されているお問合せ先へ貴社より直接お問い合わせいただくようお願いいたします。

[rinaflora · Accepted solution]

ご投稿いただきありがとうございます。

Javascriptは、高度な専門知識が必要であるためShopifyサポートの対象外となっております。英語ではありますが、開発者様用の資料はご用意しておりますので、少しでもご参考になりますと幸いです。

• Show related products on a product page - Shopifyデベロッパー資料

なお、代替案としてアプリを使いこちら実装できる可能性がございます。

• PX Related Products 
• Related Products - Relatify 
• その他類似アプリ

外部アプリは弊社開発ではなく、各アプリ開発元が運営・管理をしておりますので弊社でも機能性の詳細などを把握しておりません。まずは、各アプリのアプリストアのページにて機能説明をご確認ください。詳細な機能については実際にご利用いただくことを推奨しておりますので、1−2つほどご興味のあるアプリをご選択のうえ、無料トライアルにて仕様や動作確認をして頂ければと存じます。

実際にアプリをご利用いただく中でご質問等出てくるかと存じますが、その場合はアプリストアに記載されているお問合せ先へ貴社より直接お問い合わせいただくようお願いいたします。

[seezoo]

外部アプリのご提案、どうもありがとうございます。

一度、検討してみたいと思います。

[NIIGAKI_HYUGA · Accepted solution]

@seezoo 様

初めまして。新垣です。

JavaScriptはクライアントサイドで実行され、Liquidはサーバーサイドで実行されるため、JS→Liquidへ値を渡すことはできません。

代替案としては、{{ product.collections }}でその商品が属しているコレクションを全て取得することができます。

具体的な実装は要求によるのですが、「商品の属する全コレクションを取得し、そのコレクションの他の商品を全て関連商品として表示する」には、下記のコードを参考ください。

{% for collection in product.collections %}
  <h3>関連商品（{{ collection.title }}）</h3>
  <div class="related-products">
    {% for item in collection.products %}
      {% unless item.id == product.id %} // 現在の商品と一致しない場合関連商品を出力
        <div class="related-product">
          <a href="{{ item.url }}">
            <img src="{{ item.featured_image | img_url: '300x300' }}" alt="{{ item.title }}">
            <p>{{ item.title }}</p>
            <p>{{ item.price | money_with_currency }}</p>
          </a>
        </div>
      {% endunless %}
    {% endfor %}
  </div>
{% endfor %}

 表示したい属してるコレクション数や商品数を制御したい場合は、追加の制御構文が必要になります。

以上、参考になりましたら幸いです。

[seezoo]

新垣さま

わかりやすくご説明いただきありがとうございます。

ご提案頂いた代替案にて検討してみたいと思います。