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

日本語 ディスカッション 技術的なQ＆A
1

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

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

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

2

初めまして。

新垣と申します。

結論として、遷移元の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]の同じ商品で別テンプレートのものを２つ用意しておき、リファラーで確認したのち各URLへとリダイレクトさせる方法が考えられます。

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

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

3

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

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

→はい、その通りです。

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

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

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

1 Like