楽天スマホカテゴリページの表示変更について

Question

お世話になっております。

スマホの商品一覧ページを現在、2カラムで表示させているのですが、修正したい箇所があります。
・商品画像が小さいので、大きく表示させたい。
・送料無料、送料別の商品が隣り合うと段組が若干ずれが生じるので、綺麗に揃えたい。
お手数ですが、修正方法をお教え下さい。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

> ・商品画像が小さいので、大きく表示させたい。

JavaScriptを利用して、
画像URLを変更し、縮小サイズを変更していただくことで可能です。

最初に、下記の内容を
テキストエディタ（メモ帳など）に貼り付けた後、
ファイル名の末尾を「.js」にし、外部JavaScriptファイルとして保存の上、
楽天GOLD内に設置してください。
===== この下の行から ============
jQuery(function($){
$('#sCSLContainer img').each(function(){
$(this).attr('src', 
$(this).attr('src').replace("90:90","300:300")
);
});
});
===== この上の行まで ============
※「300:300」の数字を大きくすることで、
　読み込む画像のサイズを大きくすることが出来ますが、
　大きくしたぶん、読込に時間がかかりますのでご注意ください。

次に、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けてください。
===== この下の行から ============

===== この上の行まで ============
※外部JavaScriptファイルのURLは、実際のURLにご変更ください。

最後に、現在カテゴリページ共通説明文で読み込んでいる
「item-display.css」の最後に
下記規則を加えて下さい。
===== この下の行から ============
body .sCSLBox01 .inLeft img, body .sCSLBox02 .inLeft img {
    max-width: 100%;
    max-height: 100%;
}
===== この上の行まで ============
※小さく表示したい場合は、「100%」の数字を減らしてください。

> ・送料無料、送料別の商品が隣り合うと段組が若干ずれが生じるので、綺麗に揃えたい。

JavaScriptにより、
各商品を表示する高さを
調整していただく必要がございます。

先述の外部JavaScriptファイルに、
下記の内容を加えて下さい。
= この下の行から ====================
jQuery(function($){
  var rep = 0;
  $('#sCSLContainer').children('a').each(function(){
      var itemHeight = parseInt($(this).css('height'));
      if(itemHeight > rep){
          rep = itemHeight;
      };
  });
  $('#sCSLContainer').find('a .sCSLBox01, a .sCSLBox02').css({height:(rep)});
});
= この上の行まで ====================

次に、「item-display.css」の１８行目、
「#sCSLContainer > a > div」への規則に含まれる
「height: auto !important;」を削除してください。

Answer

ありがとうございます。
画像が大きく表示されました。

> ・送料無料、送料別の商品が隣り合うと段組が若干ずれが生じるので、綺麗に揃えたい。
Javascriptを加えたのですが、動作していないようです。

・カテゴリ商品一覧に遷移すると2列表示のはずが、1列表示になってしまいます。リロードをしたり、他ページに遷移すると表示が直るのですが、これは仕方ないのでしょうか。

Answer

ECマスターズの田中です。

> Javascriptを加えたのですが、動作していないようです。

私にて確認したところ、問題なく動作しているようです。
ご確認いただいた時点で反映されていないか、
キャッシュの古いページを読み込んでいる可能性がございます。
お手数ですが、再度ご確認いただけますでしょうか。

> ・カテゴリ商品一覧に遷移すると2列表示のはずが、1列表示になってしまいます。リロードをしたり、他ページに遷移すると表示が直るのですが、これは仕方ないのでしょうか。

https://forum.ec-masters.net/post_view.php?id=7720
上記URLでも同じ質問をいただいておりますが、
返信の通り、未だに原因は特定できておりません。

上記URLにて返信した内容と同様に、
カテゴリページに適用させている「item-display.css」の
先頭にある「#sCSLContainer」への規則に

display: flex;
flex-wrap: wrap;

この２行を加えていただき、
ファイルの末尾に下記規則を加えていただくことで、
１列表示されないようにしていただけると思います。

ul.ctgItemsPaginate {
margin: 15px auto;
}

Answer

ありがとうございました。無事解決しました。