ヤフーショッピング：サイドナビをカテゴリーごとに表示内容を変える

Question

ヤフーショッピングでサイドナビを「Yahoo!トリプルを使用し、ページにCSSを埋め込んでクラス名を振り分けることによって表示内容を変える」という方法でカテゴリーごとに表示内容を変えれるとの情報がありますが、どのような手法になるかわかりますでしょうか？
楽天でいうカテゴリーごとにヘッダー、サイドナビ、フッターを変更できるようにならないか思案中です。
宜しくお願い致します。

Answer

ECマスターズの田中です。

＞どのような手法になるかわかりますでしょうか？
実際にその手法を行われているページを確認させていただく必要がございますので、
ご存知でしたらURLをお知らせください。

私の想像できる範囲ですと、
予め、表示させたい全てのパターンをヘッダー・サイドナビ・フッターに埋めこんでおき、
各商品ごとにタグを記載して、トリプルにて予め作成しておいた
「埋めこんだパターンのうち、狙ったパターンだけを表示させる」ためのCSSを
読み込ませる、という方法が考えられます。

Answer

ありがとうございます。

予め、表示させたい全てのパターンをヘッダー・サイドナビ・フッターに埋めこんでおき、
各商品ごとにタグを記載して、トリプルにて予め作成しておいた
「埋めこんだパターンのうち、狙ったパターンだけを表示させる」ためのCSSを
読み込ませる、という方法が考えられます。

の手法で間違いないと思います。

出来ると聞いただけでどこのお店かまでが不明のためお聞きいたしました。

上記方法をご教授お願いしたいです。
よろしくお願い致します。

Answer

ECマスターズの田中です。

＞上記方法をご教授お願いしたいです。
たとえば、ヘッダー・サイドナビ・フッターの各フリースペースに、


（パターン１の内容）


（パターン２の内容）

（以下略）

このような構造でHTMLをご記載いただき、
（の代わりにをご利用いただいても結構です）


Yahoo!トリプルの中に、パターンごとに

.pattern { display: none; }
.pattern.pattern1 { display: block; }
や、
.pattern { display: none; }
.pattern.pattern2 { display: block; }
のようにご記載いただいた外部CSSファイルをご用意いただき、


各商品のフリースペースなどに、パターンごとに

や

のようにタグを書いて読み込んでいただくと、
CSSで「display: block;」と指定した部分だけが表示される、
といった具合になります。

Answer

追加で教えてください。お願いします。

各商品ページやカテゴリ、カスタムページなどはフリースペースにcssを入れることで
実装できそうです。

その作業中に
ヤフーショッピング固定情報のページ
例えば下記の会社概要
https://store.shopping.yahoo.co.jp/ショップID/info.html
や
ストア内検索結果
へcssをかけることが出来ず、すべてのヘッダーやフッターが表示されてしまいました。

こちらを打開する方法はございますでしょうか？
ご教授頂けますようお願い致します。

Answer

解決できました。ありがとうございます。

Answer

ECマスターズの田中です。

＞解決できました。
無事解決出来て何よりです。
またご質問などございましたら、フォーラムへお寄せください。