楽天スマホ商品ページ　買い物かごの高さ調節について

Question

お世話になっております。
楽天スマホページの買い物かごの高さを、とあるショップさんのように低くして商品説明など見える範囲を広くしたいのですが、どのような設定をすればよいのでしょうか。
お気に入りボタンはなくなっても構いません。###HR######IMG02e671630d9aa29a3d21d291ab2e35710.jpegIMG0###

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

既にokini.cssを利用して
お気に入りボタンを挿入されているということですね。

その場合は、既に商品ページ内で読み込んでいる
okini.cssの中に、下記規則を追記してください。

= この下の行から ====================
body .cartButton>a{
padding-top: 9px !important;
padding-bottom: 9px !important;
}
= この上の行まで ====================
※「9」の数値を増減することで、ボタンの高さを調整できます。

この規則によって変更された高さに応じて
お気に入りボタンの高さを調整していただくことで、
ボタン全体の高さを変更することができます。

Answer

ありがとうございます！
とりあえず出来たのですが、元の買い物かごのボタンも小さくなってしまいますね(>_

Answer

ECマスターズの田中です。

> 元の固定されてる買い物かごのサイズが変わらず、フローティングの高さだけ変わることですが可能でしょうか。

はい、可能です。
body .cartButton>a{
を
#floatingCartContainer > .cartButton > a{
にご変更ください。

> 買い物かご上のフローティングバナーがファーストビューからではなく、ちょっとページを進んだ先でホワッと出現させたいのですが、どうすればよいでしょうか。

いただいた店舗では、
https://www.rakuten.ne.jp/gold/bunbunbee/js/detail_pop_fix.js
上記のような外部JavaScriptファイルを読み込ませることで、
スクロール量をチェックしてバナーを表示/非表示させる仕組みを
導入しております。
shさんのショップに設置される際も、
同様にJavaScriptによる仕組みを導入していただく必要がございます。

Answer

ありがとうございます！
お買い物かごの方は無事設定でき、スッキリしました。

＞上記のようなことで、外部JavaScriptファイルを読み込ませる
スクロール量をチェックしてバナーを表示/非表示させる仕組みを
導入しております。

こちらについては、で読み込むのかなと思って入力してみたのですが適応されませんでした。
やはり難しいですね。
簡単なHTMLの入力で済むのなら詳細を教えていただきたいですが、色々と設定をしないといけないのであれば諦めます(>

Answer

ECマスターズの田中です。

大変お待たせいたしました、
改めて、ご質問いただいた内容に回答させていただきます。

> 簡単なHTMLの入力で済むのなら詳細を教えていただきたいですが、色々と設定をしないといけないのであれば諦めます(>

Answer

ありがとうございます！
何度もすみません。

var target = '●●●'; /* 'の間に、ホワッと出現させたい部分を指定するセレクタを記載。例：class=なら「」と記載 */

この例：class=なら「」と記載とはどういうことでしょうか。

今商品説明文に
（◆）






を入れてフローティングバナーを表示させています。
●●●の中にはclass="bottomBannerImg" が入るのかなと思ったのですが違いますか？
それか.bottomBannerImg？？
「」の意味がわかりません；



外部JSファイルのURLは

これを上記の（◆）に入力するで合ってますでしょうか。

Answer

ECマスターズの田中です。

> この例：class=なら「」と記載とはどういうことでしょうか。

失礼いたしました、
必要な内容が抜け落ちておりましたので、元の書き込みを修正させていただきました。

imgタグに「class="bottomBannerImg"」を設定されているということですので、
●●●を「.bottomBannerImg」に入れ替えて、

var target = '.bottomBannerImg';

と修正していただく形になります。

> 外部JSファイルのURLは
> 
> これを上記の（◆）に入力するで合ってますでしょうか。

はい、合っております。
この場合、GOLDの「sp.ban」フォルダに「fb.js」というファイル名で
外部JSファイルを作成していただく形になります。

Answer

ありがとうございます！
設定しました！…が反映されません；
抜けはないと思うのですが…

入力箇所、フォルダ名に間違いはありません。
フォルダの場所も合っています。
HTMLを入力する位置でしょうか…

お手数ですが最後に確認していただけましたら幸いです…(>

Answer

ECマスターズの田中です。

実際のページを確認したところ、
楽天本来のスタイルシートによって、
強制的に常に表示された状態になっていることが分かりました。
固定バナーを商品説明文の外に出す必要がございます。

bottomBannerImgを囲むタグにclass名を付けていただき、
外部JSファイルの2行目などに、
$('.付けたclass名').insertBefore('#shopCommonText');
といった形で移動する命令を挿入していただけますでしょうか。

また、fb.cssの中で、
.bottomBannerImg への規則の中にございます
transition-delay: 0.3s;
は、fadeIn・fadeOutの動作の妨げになりますので、削除をお願いします。

Answer

ありがとうございます！
タグにclass名をつけて、jsファイルに挿入しました！
【transition-delay: 0.3s;】も消して、
商品説明文の外に出す必要があるとのことですので、カテゴリページにHTMLをいれました！

ここまで言われた通りに出来たと思います！
ただ商品ページにバナーが出てきません。
いいところまできてるとは思うのですが。。。

長引いてしまって申し訳ありません。
ここまで出来たので出来れば最後までやり遂げたいです(>

Answer

ECマスターズの田中です。

私にて、実際の商品ページを確認したところ、
外部CSSファイルもJSファイルも、HTMLタグも、
特に記載されていないように見えました。

原因を探るには、実際の商品ページに挿入された様子を
確認する必要がございますので、
お手数ですが、挿入された様子が確認できる商品ページを
ご用意いただけますでしょうか。

Answer

早々のご返信ありがとうございます！
【固定バナーを商品説明文の外に出す必要がございます。】
というのを商品説明文の中から出してという意味かと思い、カテゴリの共通パーツに入れてしまっておりました。
今商品ページ共通パーツの方へ戻したところきちんと反映されました！
長々とご対応くださり本当にありがとうございます！

楽天 スマホ商品ページ 買い物かごの高さ調節について

楽天スマホ商品ページ　買い物かごの高さ調節について