FROM CACHE - jp_header
解決済

遷移元のURLによって商品ページのテンプレートを出し分けたい

hiroshi117
Shopify Partner
3 0 1

一つの商品ページに関して、コレクションページから遷移した時はテンプレート1を、

コレクションページから遷移した時はテンプレート2で表示させたいと思っているのですが可能でしょうか?

 

遷移元のURLを取得できるLiquidがあれば可能かなと考えています。

 

1 件の受理された解決策

NIIGAKI_HYUGA
Shopify Partner
54 23 15

成功

初めまして。

新垣と申します。

 

結論として、遷移元のURLはLiquidでは取得できませんが、JavaScriptを用いることで取得(判別?)できます。

 

以下はリファラーを確認して遷移元のURL判別する一例です。
*添付コードは例示的なもので動作を保証していません。。

 

 

document.addEventListener('DOMContentLoaded', function() {
  var referrer = document.referrer;

  if (referrer.includes('/collections/')) {
    // コレクションページからの遷移の場合、テンプレート1を適用
    applyTemplate1();
  } else {
    // それ以外の場合、テンプレート2を適用
    applyTemplate2();
  }
});

function applyTemplate1() {
  // テンプレート1に関するコード
}

function applyTemplate2() {
  // テンプレート2に関するコード
}

 

 

一点質問なのですが、ここで言及されているテンプレート1,2は管理画面から選択する商品テーマテンプレートのことでしょうか。

その場合、テーマテンプレートを動的に変更することはできないので[テンプレート1の商品A]と[テンプレート2の商品A]の同じ商品で別テンプレートのものを2つ用意しておき、リファラーで確認したのち各URLへとリダイレクトさせる方法が考えられます。

 

また、リファラーでなくてもJavaScriptで付与したクエリパラメータを取得し遷移元を判別する方法もあります。

 

回答になっていたら幸いです。

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

元の投稿で解決策を見る

2件の返信2

NIIGAKI_HYUGA
Shopify Partner
54 23 15

成功

初めまして。

新垣と申します。

 

結論として、遷移元のURLはLiquidでは取得できませんが、JavaScriptを用いることで取得(判別?)できます。

 

以下はリファラーを確認して遷移元のURL判別する一例です。
*添付コードは例示的なもので動作を保証していません。。

 

 

document.addEventListener('DOMContentLoaded', function() {
  var referrer = document.referrer;

  if (referrer.includes('/collections/')) {
    // コレクションページからの遷移の場合、テンプレート1を適用
    applyTemplate1();
  } else {
    // それ以外の場合、テンプレート2を適用
    applyTemplate2();
  }
});

function applyTemplate1() {
  // テンプレート1に関するコード
}

function applyTemplate2() {
  // テンプレート2に関するコード
}

 

 

一点質問なのですが、ここで言及されているテンプレート1,2は管理画面から選択する商品テーマテンプレートのことでしょうか。

その場合、テーマテンプレートを動的に変更することはできないので[テンプレート1の商品A]と[テンプレート2の商品A]の同じ商品で別テンプレートのものを2つ用意しておき、リファラーで確認したのち各URLへとリダイレクトさせる方法が考えられます。

 

また、リファラーでなくてもJavaScriptで付与したクエリパラメータを取得し遷移元を判別する方法もあります。

 

回答になっていたら幸いです。

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

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

 

テンプレート1,2は管理画面から選択する商品テーマテンプレートのことでしょうか。

→はい、その通りです。

 

今回は仕様自体が変更になりまして実装の必要がなくなりました。

今後のためにも参考にさせていただきたいと思います。

有益な回答ありがとうございました。