FROM CACHE - jp_header
解決済

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

seezoo
Shopify Partner
9 1 0

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

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

 

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

 

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

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

2 件の受理された解決策

rinaflora
Shopify Staff
67 11 23

成功

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

 

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

 

 

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

 

 

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

 

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

Rinaflora | Shopify 
 - 回答は役に立ちましたか?いいね! ボタンをクリックして教えてください。 
 - 質問に対する答えは得られましたか? 回答に満足いただけたら、ベストソリューションとして承認
 - を選択してください。 - Shopify Help CenterShopify Blogも是非ご参照ください。

元の投稿で解決策を見る

NIIGAKI_HYUGA
Shopify Partner
54 23 15

成功

@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 %}

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

 

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

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください

元の投稿で解決策を見る

4件の返信4

rinaflora
Shopify Staff
67 11 23

成功

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

 

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

 

 

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

 

 

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

 

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

Rinaflora | Shopify 
 - 回答は役に立ちましたか?いいね! ボタンをクリックして教えてください。 
 - 質問に対する答えは得られましたか? 回答に満足いただけたら、ベストソリューションとして承認
 - を選択してください。 - Shopify Help CenterShopify Blogも是非ご参照ください。

seezoo
Shopify Partner
9 1 0

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

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

NIIGAKI_HYUGA
Shopify Partner
54 23 15

成功

@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 %}

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

 

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

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください
seezoo
Shopify Partner
9 1 0

新垣さま

 

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

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