RMSのバグを利用したスマホページへのiframeの挿入について

Question

掲題の件、既出部分も多いかと思いますが確認させて下さい。

RMSでいうと

1-2デザイン設定　＞　2　スマートフォン デザイン設定　＞　商品ページ 共通パーツ設定
もしくはカテゴリページ 共通パーツ設定

こちらのみ出来るという認識で宜しいでしょうか。

1-1商品登録・更新　＞　2　カテゴリページ設定　＞　店舗内カテゴリ設定
各カテゴリーページの編集画面にある「スマートフォン用カテゴリ説明文」の方が
ページを開いた際に上部に当たる部分ですから
出来ればそちらにiframeで作った商品カテゴリへのリンクバナーの一覧ページを挿入したいのです。

どうしても共通説明文ですと、カテゴリー商品の検索結果一覧の下、もしくは商品の購入ボタンの下になってしまうので
PC版のページと同様に開いた画面上部に特集ページなどのリンクバナー等を設置したいと思っています。
（力技でスマホサイトの方はベタにTableタグを書いてますが文字数制限もあるので抜粋レベルになってしまってます）

元々バグを利用しているので、難しいかとは思いますが
何か良いアイディアはありませんでしょうか？

Answer

ECマスターズの田中です。


＞PC版のページと同様に開いた画面上部に特集ページなどのリンクバナー等を設置したいと思っています。

たとえば、JavaScriptを利用して、
スマートフォン用共通説明文に記載した任意のHTMLソースを
商品画像の上に移動させる方法があります。

JavaScriptは、HTMLページの中で実行できるプログラムで、
利用することでページの要素を操作することができますが、
JavaScriptを利用するために記述が必要なタグは
楽天によって禁止タグに設定されており、
今後使用できなくなる可能性があること、
また、楽天側ではJavaScriptが使われることを考えていないため、
ページのHTMLの構造が変更され、同じプログラムが使えなくなり、
改変が必要になる可能性があることを予めご承知おきください。

以上を踏まえた上で、JavaScriptを利用した移動を行われる場合は、
最初に、下記内容をメモ帳に貼り付け、ファイル名の最後に「.js」をつけて
外部JSファイルとして保存し、
楽天GOLDにアップロードしてください。

===== この下の行から ================
jQuery(function($){
$('.evtBnr').prependTo($('main'));
});
===== この上の行まで ================

楽天GOLD内への保存ができましたら、
下記HTMLタグを共通説明文、もしくはスマートフォン用商品説明文に
挿入することで、
ページ読み込み時に外部JSファイルに書いたプログラムが動作し、
商品画像上に、ご希望のHTMLソースを挿入することができます。

===== この下の行から ================


商品画像上に移動させたいHTMLソース

===== この上の行まで ================
※外部JSファイルのURL、商品画像上に移動させたいHTMLソースは、
　実際のURL、およびソースに置き換えてご利用ください。


＞1-2デザイン設定　＞　2　スマートフォン デザイン設定　＞　商品ページ 共通パーツ設定
＞もしくはカテゴリページ 共通パーツ設定
＞こちらのみ出来るという認識で宜しいでしょうか。

厳密には、各商品のスマートフォン用商品説明文、また
スマートフォン用トップページの各説明文でも可能です。

Answer

ご回答ありがとうございました。

＞1-2デザイン設定　＞　2　スマートフォン デザイン設定　＞　商品ページ 共通パーツ設定

こちらの方で教えて頂けた内容で試してみたら出来ました。
ありがとうございます。

＞1-2デザイン設定　＞　2　スマートフォン デザイン設定　＞　カテゴリページ 共通パーツ設定

ただ、こちらで出来れば一番なので
全く同一のコードをそのまんまコピーしたのですが
こちらでは出来ませんでした。
カテゴリーの共通パーツ設定では出来ない、という事でしょうか？

Answer

ECマスターズの田中です。

＞カテゴリーの共通パーツ設定では出来ない、という事でしょうか？

出来ないという事ではありません。

JSファイルに記載した
$('.evtBnr').prependTo($('main'));
この命令は、
指定したHTMLソースをタグの直後に移動させる、
という命令なのですが、
カテゴリーページにはタグがないため、
移動先が見つからず、移動できないという状態です。

たとえば、この命令を

$('.evtBnr').after($('#topFuncShopPopup'));

このように書き換えていただければ、
商品ページ・カテゴリーページ、共に、
上部ナビボタン（メニュー、カテゴリ、などが並ぶ部分）の直下に
移動させることができます。

なお、先に返信させていただいた命令に一部誤りがありましたので、
修正を行わせていただきました（prependTo('main') → prependTo($('main'))）。
失礼いたしました。

Answer

ご回答ありがとうございます。

教えて頂いた内容で別のjsファイルを作り、

jQuery(function($){
$('.evtBnr').after($('#topFuncShopPopup'));
});

こちらに書き換えて試したのですが(もちろん読み込み先jsファイルのURLも変えています)
表示場所は変わらず、今度は逆にメニュー、カテゴリ、お気に入り、閲覧履歴、購入履歴のポップアップが
上に移動させたいHTMLソースの下に表示されてしまいました。
（営業日カレンダーの上にポップアップが来てしまいました）

どこが悪いのでしょうか？

Answer

ECマスターズの田中です。

大変失礼いたしました、
移動元と対象の指定が入れ替わっておりましたので、

jQuery(function($){
$('#topFuncShopPopup').after($('.evtBnr'));
});

こちらの内容でjsファイルを作成していただくといかがでしょうか。

Answer

ご回答ありがとうございます。
なんとか出来ました。

私も命令文の内容がもう少し理解出来れば
前後逆転という事が分かったのですが
この点、お手数おかけしました。

お陰様でカテゴリー表示段階で
他のカテゴリーや売れ筋商品を紹介出来そうです
ありがとうございました。