FROM CACHE - jp_header

開発中テーマで独自作成したテンプレートページのプレビュー方法

解決済

開発中テーマで独自作成したテンプレートページのプレビュー方法

te2shop
Shopify Partner
10 0 2

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

 

すでにshopifyサイトを運営中の店舗で、新規で有料テーマ(Be Yours)でのリニューアル作業を行なっています。

私自身がパートナーとしてコラボレーターアカウントで作業しております。

 

現在、コード編集を含めテーマのカスタマイズ中なんですが、作業途中のサイトをプレビューで確認してもらう際、プレビュー画面のリンクをコピーして共有する機能はあるかと思うのですが、

その画面だとデフォルトのページしかプレビュー出来ず、独自で作成したテンプレートページがプレビュー出来ません。

 

メニューのオンラインストア>テーマ>テーマライブラリー>該当の開発中テーマの「カスタマイズ」からではなく、

商品ページやブログ記事、"ページ" などで独自に作成したテンプレートのページをプレビューして確認してもらう方法はありませんでしょうか。

よろしくお願いします。

 

 

1 件の受理された解決策
st_mh
探検家
40 13 11

成功

すいません。早とちりしていました。

 

ページ内のここの部分の件ですか?

一旦、そうだとして回答しますが、間違っていたら指摘してください。

 

st_mh_0-1681203306860.png

この部分は余り触ることがなかったので、こちらでも確認しました。

 

どうもメインテーマのテンプレートのみ選択可能なようですね。

しかも、現時点でテンプレートの変更をする訳にいかないということでしょうか。

 

--

 

デザイン等確認していくに当たり、以下2通りが考えられます

  1. 条件分岐で確認
  2. メインテーマを少々操作しつつ、開発中テーマで確認

 

◎方法1

こちらは特定パラメータ付与時のみ、独自テンプレート内容を表示させる方法です。

 

そのパラメータはこちらとします「?test_template=on」。

メインテンプレートファイル内にて、以下のような条件分岐を追記します。

 

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | replace:'\/','/' | replace:'%20',' ' | replace:'\u0026','&' -%}
{%- assign get_query_value_by_key = '' -%}
{%- if pageUrl contains "?" -%}
  {%- assign pageQuerystring = pageUrl | split:'?' | last | replace:'=','&' -%}
  {%- assign tmp = pageQuerystring | split:'&' -%}
  {%- for kv in tmp -%}
      {%- if kv == 'test_template' -%}
          {%- assign get_query_value_by_key = tmp[forloop.index] -%}
          {%- break -%}
      {%- endif -%}
  {%- endfor -%}
{%- endif -%}

{% if get_query_value_by_key == 'on' %}
  テストパラメータがon
  独自テンプレート内容を記述
{% else %}
  パラメータ無し
  デフォルトテンプレート内容を記述
{% endif %}

パラメータkey名を変更する時はこちらを修正してください。{%- if kv == 'test_template' -%}

 

本公開時には、メインテーマで独自テンプレートファイルを作成し、割り当てたいページに適用させるという流れです。

 

-----

 

◎方法2

メインテーマでの調整

  • まず、新規にテンプレートファイルを作成します。名称は開発中テーマ内で作成中の独自テンプレートと同名にします。
  • 内容はメインテーマのデフォルトテンプレートと同じにしておきます。
  • テスト確認したい任意のページに対し、このテンプレートを選択します。

こちらの処理にて、テンプレート選択候補から独自テンプレートの割り当てが可能です。

この時点で、独自テンプレートの内容はデフォルトと同一ですので、メインテーマを閲覧中のお客様にとっては、表示に不備はない状態が維持できます。

 

そして、開発テーマのプレビュー中は、作成中のテンプレート内容が反映されると。

 

あとは本公開時には、メインテーマの独自テンプレートに内容をペーストすれば速やかに適用できるでしょう。

 

元の投稿で解決策を見る

4件の返信4

st_mh
探検家
40 13 11

st_mh_0-1681196883742.png

「・・・」ボタンクリック後のプレビューより、選択したテーマのプレビューが開きます。

この際、URLにパラメータ(「?_ab=0&_fd=0&_sc=1」)が付いてきますが、このパラメータ付きURLならプレビューが共有できる訳でもないと思っています。
そもそもこのパラメータにはテーマ管理IDが含まれず、どのテーマをプレビューしても同じパラメータです。

 

新規作成のテンプレートが確認出来ないという状況のようですが、このプレビューを選択する限り、テーマ内の設定やファイルが全て反映されるはずです。

 

また、閲覧中テーマの確認方法です。

headタグ内に、var Shopifyで諸々定義されています。この値の中に、テーマ名が含まれています。

コンソール画面で「Shopify.theme」と入力すればすぐ確認可能です。

st_mh_1-1681197917657.png

 

-----

このプレビューの仕様ですが、おそらくキャッシュによって、表示テーマ情報が保存されます。

そのため同一ブラウザに限り、新しいタブからでも選択したテーマのプレビューが継続されます。

 

当然ながら、別PCのブラウザ、別ブラウザ、プライベートモードでは、テーマ情報のキャッシュが共有されないため、閲覧ページはメインテーマになっているはずです。

 

先方に開発テーマを確認いただくならば、開発中テーマのプレビューを選択頂くことになるかと思います。

 

ちなみに、元のテーマ表示に戻したい時は、再度メインテーマを選びなおすと良いです。

または、キャッシュが切れるとメインテーマが表示されますが、保存期間は不明で、体感だと2~3日位です。

 

----

(追記)

追記です。
他のPC、他のブラウザを対象とした、テーマを指定する方法がありました。


基本形式は以下です。

ttps://ドメイン/?_ab=0&_fd=0&_sc=1&preview_theme_id=00000

preview_theme_idの値に、開発中テーマのIDを設置します。

このURLを開いたブラウザでは、自動的に表示テーマが保存されます。

実際に同PCですが、シークレットモード、メインではないブラウザにて、テーマが切り替わったことを確認しました。

 

IDの調べ方は、上にも書いた通り、テーマのプレビュー後にコンソール画面で「Shopify.theme.id
」で必要な情報が取得できます。

 

先方に確認しただくに当たり、上記URLを送付すれば即確認可能です。携帯端末からも可能ですね。

ただし、自動的に開発テーマの表示状態が保存されるので、いつでも戻せるよう、メインテーマID付きのURLも用意しておくと良いかと思います。

te2shop
Shopify Partner
10 0 2

ご丁寧にありがとうございます。

 

 


@st_mh さんは書きました:

st_mh_0-1681196883742.png

「・・・」ボタンクリック後のプレビューより、選択したテーマのプレビューが開きます。

この際、URLにパラメータ(「?_ab=0&_fd=0&_sc=1」)が付いてきますが、このパラメータ付きURLならプレビューが共有できる訳でもないと思っています。
そもそもこのパラメータにはテーマ管理IDが含まれず、どのテーマをプレビューしても同じパラメータです。

 


↑ここでのプレビューのURLでは共有出来ないことは存じておりますが、共有する際はここではなく、、
このプレビューを開いた後に画面下に表示される「Share preview」ボタンを押下して表示されるリンクを共有しております。

FireShot Capture 065.png

 

FireShot Capture 065-2.png

 

 

 

 

 

 

 

 

ここのリンクで共有する場合でしたら、別のPCでもブラウザでも当然キャッシュ関係なく、表示画面で記載の通り2日間です。

 

しかしながら、最初の質問の通り、割り当てられているデフォルトのページしかプレビュー出来ず、独自で作成したテンプレートページがプレビュー出来ません。

公開前のテーマなので、既存のページを作成したテンプレートに割り当てることも出来ず、何か方法があればと思い質問しました。

もし方法があるようでしたら教えていただければ幸いです。

質問が下手で申し訳ありません。

 

st_mh
探検家
40 13 11

成功

すいません。早とちりしていました。

 

ページ内のここの部分の件ですか?

一旦、そうだとして回答しますが、間違っていたら指摘してください。

 

st_mh_0-1681203306860.png

この部分は余り触ることがなかったので、こちらでも確認しました。

 

どうもメインテーマのテンプレートのみ選択可能なようですね。

しかも、現時点でテンプレートの変更をする訳にいかないということでしょうか。

 

--

 

デザイン等確認していくに当たり、以下2通りが考えられます

  1. 条件分岐で確認
  2. メインテーマを少々操作しつつ、開発中テーマで確認

 

◎方法1

こちらは特定パラメータ付与時のみ、独自テンプレート内容を表示させる方法です。

 

そのパラメータはこちらとします「?test_template=on」。

メインテンプレートファイル内にて、以下のような条件分岐を追記します。

 

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | replace:'\/','/' | replace:'%20',' ' | replace:'\u0026','&' -%}
{%- assign get_query_value_by_key = '' -%}
{%- if pageUrl contains "?" -%}
  {%- assign pageQuerystring = pageUrl | split:'?' | last | replace:'=','&' -%}
  {%- assign tmp = pageQuerystring | split:'&' -%}
  {%- for kv in tmp -%}
      {%- if kv == 'test_template' -%}
          {%- assign get_query_value_by_key = tmp[forloop.index] -%}
          {%- break -%}
      {%- endif -%}
  {%- endfor -%}
{%- endif -%}

{% if get_query_value_by_key == 'on' %}
  テストパラメータがon
  独自テンプレート内容を記述
{% else %}
  パラメータ無し
  デフォルトテンプレート内容を記述
{% endif %}

パラメータkey名を変更する時はこちらを修正してください。{%- if kv == 'test_template' -%}

 

本公開時には、メインテーマで独自テンプレートファイルを作成し、割り当てたいページに適用させるという流れです。

 

-----

 

◎方法2

メインテーマでの調整

  • まず、新規にテンプレートファイルを作成します。名称は開発中テーマ内で作成中の独自テンプレートと同名にします。
  • 内容はメインテーマのデフォルトテンプレートと同じにしておきます。
  • テスト確認したい任意のページに対し、このテンプレートを選択します。

こちらの処理にて、テンプレート選択候補から独自テンプレートの割り当てが可能です。

この時点で、独自テンプレートの内容はデフォルトと同一ですので、メインテーマを閲覧中のお客様にとっては、表示に不備はない状態が維持できます。

 

そして、開発テーマのプレビュー中は、作成中のテンプレート内容が反映されると。

 

あとは本公開時には、メインテーマの独自テンプレートに内容をペーストすれば速やかに適用できるでしょう。

 

te2shop
Shopify Partner
10 0 2

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

 

昨晩、どうにか自己解決出来たのですが、まさに回答いただいた「方法2」のやり方でした。

大変ご丁寧に説明いただきありがとうございました!

 

でも、結構イレギュラーな方法ですよね。

個人的には、新テーマに切り替える時など、クライアント様、特に運営担当者ではなく管理画面を触らないようなオーナー様などにプレビュー画面を見ていただく際には、結構必要になりそうな事だと思ったんですが、どうなんでしょうかね。

 

ともあれ、二つも方法を探っていただきありがとうございました。