デザインレシピの「スライドバナーの作成方法とスマートフォン画面で上部にもってくる」カテゴリーページ対応

Question

お世話になります。

デザインレシピの「スライドバナーの作成方法とスマートフォン画面で上部にもってくる」をアレンジして商品画像の上を挿入して、うまくいったのでトップページとカテゴリーページを試してみたところ、カテゴリーページは上部に表示されませんでした。


デザインレシピページ内の「どのようなことが起こっているかというと…」をみると、上部に画像があるものでないとできないと思いましたが、

カテゴリーページでも同じように上部に表示する方法、記述をお知らせ頂きますとありがたいです。

Answer

ECマスターズの田辺です。

＞カテゴリーページでも同じように上部に表示する方法、
＞記述をお知らせ頂きますとありがたいです。

デザインレシピの
「スライドバナーの作成方法とスマートフォン画面で上部にもってくる」では、
商品ページにある商品画像の上に
スライドバナーを表示させる方法をご案内しておりますので、
トップページとカテゴリページでは対応しておりません。

トップページの場合は、トップ説明文に
スライドバナーのをご記入いただき、
必要であればトップページの「並び順の設定」にて位置をご変更くださいませ。

カテゴリページの場合、例えば「カテゴリを絞り込む」の上に表示させたい場合には、
#itemImageSlider（商品画像）ではなく
#sCLContainer（カテゴリを絞り込む）の指定が必要ですので、

アップロードしていただいたJavaScriptファイルに
以下の記述を書き加えいただきますようお願いいたします。

＝この下から＝＝＝＝＝＝＝＝＝
jQuery(function($){
$('#sCLContainer').before($('.iframeBefore'));
});
＝この上まで＝＝＝＝＝＝＝＝＝

Answer

遅くなりましたが、ご返信ありがとうございます。


カテゴリーページの


「カテゴリを絞り込む」の上に表示

「カテゴリ説明文」に画像、記述がない場合は、上部に表示されるのですが、



「カテゴリ説明文」に画像、記述がある場合は、その下に表示されてしまいます。

ソースを調べて、下記の通り　sCLContainer　の部分の書き換えたものを加えてみましたが

変わらずでした。

ご伝授頂ければと思います。


jQuery(function($){
$('#sCLContainer').before($('.iframeBefore'));
});


↓新しく加えたもの↓


jQuery(function($){
$('#categorydescription').before($('.iframeBefore'));
});

jQuery(function($){
$('#ctgBreadcrumbs').before($('.iframeBefore'));
});

Answer

ECマスターズの田辺です。

書き換えていただいた
ctgBreadcrumbsの先頭に「#」をつけていただきましたが、
確認させていただいたところクラス名として使われておりましたので
「.」へのご変更をお願いいたします。

誤）#ctgBreadcrumbs
正）.ctgBreadcrumbs

こちらでグレグラ山田さんのご希望の位置へ移動されるはずですので
ご確認くださいませ。

Answer

できました！

感激です！

ありがとうございました！