楽天のスマホ商品ページ共通説明文にアコーディオンメニューを入れたい

Question

https://www.rakuten.ne.jp/gold/auc-will-limited/smart/index.html

こちら楽天のスマホ用トップページですが、この下の方にカテゴリメニューがあります。
「+」マークでサブカテゴリを展開できるアコーディオンメニューになっていまして、これを商品ページ、カテゴリページにも設置しようとしています。

ところが商品ページには禁止タグのせいで設置できません。

そこでiframeでトップページのメニューを引っ張ってくることにしました。
（バグを利用した裏技でiframeを設置しました）

しかしアコーディオンメニューですので、展開するサブカテゴリに応じてiframeの高さが自動で変わる必要があります。

↓そこで、このページでiframe高さ自動調整のscriptを見つけました。
https://recipe.oga-ria.com/useful_tools/3427

↓これを組み込むべく、scriptタグを楽天に入れる裏技を調べ
https://code-life.hatenablog.com/entry/2016/05/26/楽天市場RMSページでscriptタグ（禁止タグ）を有効にす

すべて組み込んで作ったのですが、それでも高さは調整されず見切れてしまいました。

こちらとしてはこの方法にこだわらずとも、トップページと共通のカテゴリメニューを設置できお客様の回遊をスムーズにできればよいのですが、このような場合どうしたらよいでしょうか。

また、共通のメニューボタンを設置したいという需要は多いと思うのですが、他の店舗様のスマホページではどうしているのでしょうか。

Answer

ECマスターズの田中です。

おそらく、高さの調整を行う仕組みにてエラーが発生しており、
その原因を調査する必要があるのですが、
iframe自体、スマートフォンでの動作は不安定になりやすく、
リアルタイムで高さを調整させると、さらに不安定になる可能性がございます。

他の楽天ショップなどで使われている方法として、
iframeを設置するのと同じ裏技で、
カテゴリメニューを表示するためのHTML、およびアコーディオンなどの仕組みを、
直接商品ページに設置していただくことで
動作が安定しやすくなります。

HTMLタグをそのまま共通説明文に記載すると
文字数制限を大きく消費してしまうので、
タグで読み込む外部JavaScriptファイルの中で
HTMLタグをページに追加する命令をご記載いただく方法がオススメです。

たとえば、
jQuery(function($){
  $('#itemDescription .blockWrap').append('HTMLソース');
});
のようにご記載いただくことで、
商品説明の末尾にHTMLソースを追加することができます。

JavaScriptの形式でHTMLソースを記載する場合、
１行に収めなければならないケースが発生しますが、
その際は、下記のような変換ツールを利用すると便利です。
https://codebeautify.org/htmlviewer/
変換が必要なソースを画面左に記載して、
JavaScriptに記載する時は「Minify」を押すと一行になり、
内容を編集する時は「Beautify」を押すと編集しやすい形式になります。

Answer

ご回答ありがとうございます！

ただ、やってみたのですが何も表示されず空欄になってしまいました。

解釈の仕方を間違っているかもしれません。

1.まずカテゴリメニューに使われているHTMLソースを別ファイルで「category.html」としてGOLDサーバーにアップ

2.category.htmlの中身を、教えていただいた変換ツールで1行に変換

3.
jQuery(function($){
$('#itemDescription .blockWrap').append('category.html');
});

と入れたらこのコードがそのまま表示されてしまったので、

4.
　　　　　　　　　　　　　　
jQuery(function($){
$('#itemDescription .blockWrap').append('https://www.rakuten.ne.jp/gold/auc-will-limited/smart/category.html');
});	
　

とscriptタグで挟みました。
scriptタグでエラーを起こさないための裏技を含めています。

これを商品ページ共通説明文に入れて更新したら、空欄になってしまいました。
例：
https://item.rakuten.co.jp/auc-will-limited/macma-aa0139/?force-site=ipn#

何かやり方が間違っていたのでしょうか？
参考までに、商品ページ共通説明文のコードを添付します。

Answer

ECマスターズの田中です。

JavaScriptのコードにて、「HTMLソース」の部分に
category.htmlのURLをご記載いただいておりますが、
この部分には、category.htmlのソースそのものをご記載いただく必要がございます。
つまり、下記のようなイメージになります。

$('#itemDescription .blockWrap').append('

Answer

ご案内いただきましたリンクにて、左側のボックスにコードをペースとして「minify」を押しても
// Error : Unexpected token: operator (

Answer

ECマスターズの田中です。

> ご案内いただきましたリンクにて、左側のボックスにコードをペーストして「minify」を押しても
> （中略）
> と出てしまいます。
> 何か使い方が間違っていますか？

タグから貼り付けられているかと思いますので、
との間に記載されている、
JavaScriptの文法で記載されたソースのみを貼り付けていただきますようお願いします。

> こちらへのご回答を、
> nobbykato@will-limited.jp
> にもCcでいただくようにしたいのですが可能でしょうか。

恐れ入りますが、システム上、ご登録いただいた１つ目のメールアドレスにのみ
お届けする仕様となっておりますので、
お手数をおかけしますが、ご利用のメールソフトもしくはプロバイダにて、
題名などを利用した条件による転送設定を行っていただきますようお願いします。

Answer

ご案内いただきました方法で、'

Answer

一応、商品ページ共通説明文のソースを添付いたします。
javascriptには詳しくないもので、何がいけないのかわからず…基本的な間違いがありましたらすみません。

スマホの共通説明文にトップページ同様のカテゴリメニューを設置したいというニーズは多いと思うのですが、他のショップなどでは普通どうしているのでしょうか？

高さ可変のiframeはスマホでの動作が不安定とのことで、もしどうにかうまく行っても不具合が起こりやすいのであれば避けるべきかもしれません。
他におすすめの代替案がありましたら、そちらも併せてご助言いただけましたら大変助かります。

Answer

ECマスターズの田中です。

実施していただいたとおり、タグをそのまま商品ページ共通説明文に記載されますと、
文字数オーバー、および禁止タグのチェックに引っかかってしまいます。
そのため、外部JavaScriptファイルの利用をオススメしております。

JavaScriptでは、１つのファイルとしてコードを書いておき、
それを読み込んで実行させることができます。
簡単な実例として、下記URLをご参照ください。
https://www.pazru.net/js/kihon/16.html

つまり、楽天GOLDに、外部JavaScriptファイルとして
１行にしたタグを含むコードを保存しておくことで、
商品ページ共通説明文には



というタグを書くだけで、実行させることができますので、
文字数オーバーや、禁止タグのチェックに引っかからなくすることができます。

楽天GOLDの使い方がわからない、ファイルの作り方がわからない、
など、不明な点がございましたらご返信ください。


> スマホの共通説明文にトップページ同様のカテゴリメニューを設置したいというニーズは多いと思うのですが、他のショップなどでは普通どうしているのでしょうか？

楽天自体には備わっていない機能を、RMSのバグを利用して実装する行為になりますので、
Webページ作成に詳しいスタッフや外注に作らせるか、
そのようなTipsを公開しているページが存在する場合は、ページの内容に従って導入されているのではないかと思います。


> 高さ可変のiframeはスマホでの動作が不安定とのことで、もしどうにかうまく行っても不具合が起こりやすいのであれば避けるべきかもしれません。

私よりご案内差し上げた方法では、iframeを利用しておりません。
楽天本来の機能との兼ね合いで不具合が発生する可能性も否定はできませんが、
特殊な内容のため、代替案のご案内も難しいので、
まずは一度、今回の方法による実装をお試しいただきますようお願いします。

Answer

ご案内の通り入れました。禁止タグの表示は出なかったのですが、やはり表示されません…

まずJqueryは

このように入れました。
そしてGoldの該当箇所にHTMLを1行にしたjsファイルを設置しました。
しかし商品ページには以前何も表示されないままです。

ご参考までに、商品ページのURL一例はこちら
https://item.rakuten.co.jp/auc-will-limited/if-7575-fts-45-3set/?force-site=ipn

JSファイルは添付いたします。
商品共通説明文に入れたコードは下部に全てペーストします。

すみませんがご回答をお願いいたします。

それとこちらの件、自分が勤務できる日が限られていますため、回答をメールで待っていると確認、質問にすごく時間がかかってしまいます。
すでに質問から2ヶ月近くが経過してしまっているため、早急な解決をしたいのですがお電話での質問はできないでしょうか？


商品共通説明文：

Answer

ECマスターズの田中です。

解決までに長い期間をおかけしてしまい、
申し訳ありません。

実際の導入にあたり、さらに必要となる

・「category.js」読込タグに文字コード指定を追加
・category.jsの内容を、下記構造に修正
jQuery(function($){
$('#itemDescription .blockWrap').append('HTMLソース');
});
・一部URLの相対パスを絶対パスに修正
・「jquery-1.9.1.js」読込用scriptタグを削除
・$(funciton() を jQuery(function($) に変更
・見た目に影響するページ由来のCSSを無効化
・メニュー上部に余白を追加

以上の変更点を加えたソースをご用意いたしましたので、
下記の通り、スマートフォン用共通説明文および「category.js」に
貼り付けた上で、表示をご確認いただきますようお願いします。
（両者ともに、「この下の行から」「この上の行まで」の各行は貼り付けないようご注意ください）

■１．スマートフォン用商品説明文に、下記タグを貼り付けてください。
= この下の行から ====================

= この上の行まで ====================

■２．「category.js」に、下記の内容を貼り付けていただきますようお願いします。
= この下の行から ====================
jQuery(function($){
$('#itemDescription .blockWrap').append('  ソファ一人掛け2人掛けファブリック合成皮革リクライニングソファ テーブルダイニングテーブルローテーブルバーテーブルサイドテーブル デスクデスクPCデスク ダイニングチェアダイニングチェア（1脚）ダイニングチェア（2脚セット） オフィスチェア曲げ木オフィスチェア バーチェアバーチェア（1脚）バーチェア（2脚セット） スツールスツール（1脚）スツール（2脚セット） 収納ラック・シェルフ折りたたみシェルフCD・DVDラックオープンラックボックススツールコートハンガーシューズラックスリッパラック傘立て ミラースタンドミラー大型ミラーアンティークミラー壁掛けミラー卓上ミラー 時計 キッチン用品・食器コーヒー・ティー用品 ランドリー・トイレ用品 テーブル＆チェアセットダイニング3点セットダイニング5点セットバータイプ3点セットバータイプ5点セット デザイナーズチャールズ＆レイ・イームズアルネ・ヤコブセンハンス・J・ウェグナージョージ・ネルソンイサム・ノグチボーエ・モーエンセンラース・ワーナーマックス・ビル jQuery(function($){$(".sub_menu").hide();$(".main_menu").click(function(){$("ul.sub_menu").slideUp();if($("+ul.sub_menu",this).css("display")=="none"){$("+ul.sub_menu",this).slideDown();}});});#itemDescription .main_menu img{display:initial !important;margin:0 10px 0 !important}#itemDescription #category{margin-top:1em}');
});
= この上の行まで ====================

万が一、今回の変更でも正常に動作しない場合は、
早期に解決する方法を改めて検討させていただきますので、
動作しない旨をお知らせくださいませ。

今回の処理は、RMSのバグを利用して、他ページの内容を見た目を変えずに実装する処理であり、
本来であれば、実際に適用させながら上記変更点を確認していく必要がある、
とても複雑な修正であることを、
何卒お含みおきいただきますようお願いいたします。

Answer

具体的で詳しいご案内、ありがとうございます！

ただ入れてみたのですが…やはり出力されたページには何も表示されません。
https://item.rakuten.co.jp/auc-will-limited/macma-aa0139/?force-site=ipn
商品ページのコードを見ても、カテゴリメニューのコードが見当たりません。

まだ何か間違っているのでしょうか。
JSファイルを添付します。

商品共通説明文に入れたコードは以下です。

Answer

ECマスターズの田中です。

私にて確認したところ、
添付画像のとおり、問題なく表示されておりました。

キャッシュ（過去に読み込んだページのデータ）を
表示されている可能性がございますので、
プライベートブラウズにて表示をご確認いただきますようお願いします。
https://support.apple.com/ja-jp/HT203036
（Chromeや、Android・PCなどでご覧の場合、名称・やり方が異なります）

なお、iPhone8上のSafariで確認したところ、
「ランドリー・トイレ用品」「テーブル＆チェアセット」
各メニューの最後の文字（品、ト）の直前に改行が入っておりました。
文言を修正する、スタイルシートで文字サイズを小さくする、
などの方法でご対応をお願いします。###HR######IMG0809a27a5e4e14c7b4f6381e903597a1a.jpegIMG0######BR###

Answer

ありました！
失礼いたしました、表示位置がカートの下あたりにくるものだと勝手に思っていまして、勘違いしていました。

ちなみにできればカートの下、「ショップの人気ランキング」あたりに設置したいのですが、商品ページ共通説明文の位置を入れ替えることはできないのでしょうか。

PC用ページだと共通説明文などのパーツの位置替えができたりしたので、スマホもできるかと思ったのですが見当たらず、もしあるようでしたらこちらも教えていただけますと助かります。

Answer

カテゴリ名の改行の問題、教えてくださりありがとうございます！
余白や文字サイズを調整して対応しました。ご指摘くださり、助かりました。

Answer

ECマスターズの田中です。

> ちなみにできればカートの下、「ショップの人気ランキング」あたりに設置したいのですが、商品ページ共通説明文の位置を入れ替えることはできないのでしょうか。

当メニューは「category.js」の命令により
設置する位置が決まっておりますので、

「category.js」の２行目先頭、
$('#itemDescription .blockWrap').append
を
$('#shopRankingSection').before
に修正していただくことで、
「ショップの人気ランキング」の直上に移動していただくことができます。

なお、RMS標準の機能では、入れ替えの機能はございませんので、お含みおきください。