スマホのカテゴリーページについて

Question

ご質問を失礼致します。
http://item.rakuten.co.jp/jiggys-shop/
のお店のスマホのカテゴリーページ（商品一覧）ですが、特別なツールなど使っておりますでしょうか？
弊社も『オトカテ』という外注のツールを使って、似たような感じにしているのですが、それよりも遥かに出来栄えば良いので、独自に作っているのか、外注のツールを使っているのかお調べ頂いても宜しいでしょうか。

お手数をおかけしますが宜しくお願い致します。

Answer

ECマスターズの田中です。

スマホ用カテゴリページのソースを確認したところ、
RMSの禁止タグチェックを回避するバグを利用して、
多数の外部JavaScriptファイルや外部スタイルシートファイルを利用して、
カテゴリページの見た目を整えておりました。

各ファイルの中に外注業者によるコメントなどは見当たらなかったので、
独自で作成されている可能性が高いです。

Answer

現在、独自にプログラムを作っているのですが、
カテゴリーのレイアウトは変更することが出来たのですが、画像サイズが90×90なので、画像が荒くなります。
350×350にしたいのですが、何か方法はございませんでしょうか？

http://item.rakuten.co.jp/jiggys-shop/
の方は、189×189で、200×200に解像度を変更して表示させているようです。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

スマートフォン用ページでは、Cabinet内の画像のサイズを
URLで指定しておりますので、
この部分をJavaScriptで書き換えることで、サイズを変更することができます。

具体的には、

//tshop.r10s.jp/ショップURL/cabinet/フォルダ・ファイル名?fitin=90:90

上記のように記載されている画像URLの末尾、
?fitin=90:90　を、今回の場合は　?fitin=350:350　に
ご変更いただく形になります。

まずは、画像URLを変更するための外部JavaScriptファイルを作成して、
楽天GOLDにアップロードしてください。
jiggys-shopさんの場合は、
http://www.rakuten.ne.jp/gold/jiggys-shop/sp_category_layout0215s.js
の、１６行目〜２６行目がURLを変更する処理の部分となっております。

次に、下記HTMLタグを
カテゴリページ用の共通説明文にご記載いただくことで、
サイズをご変更いただくことができます。

= この下の行から ====================

= この上の行まで ====================
※外部JavaScriptファイルのURLは、実際のURLに変更してご利用ください。

Answer

ご連絡ありがとうございます。
詳細な解説有難うございます。

無事に設定出来、画像が綺麗になりましたo(^-^)o

この度は有難うございました。

Answer

度々申し訳ございません。
『オトカテ』という外注のツールのように、
売り切れの商品は黒くなるようにしたいのですが、どうすれば可能でしょうか？
オトカテを利用している店舗
http://www.rakuten.ne.jp/gold/azu-kobe/autocate/pc.html#0000000105/
http://www.rakuten.ne.jp/gold/nello/autocate/pc.html#0000000100//?p=1&s=5

Answer

ECマスターズの田中です。

スマートフォン用カテゴリページの商品一覧には、
商品が売り切れているかどうかの情報がソースの中に掲載されていないため、
売り切れの商品を判断して、見た目を変更することができません。
例に挙げていただいた「オトカテ」のように、楽天GOLDに別途Webページをご用意いただく必要があります。

なお、PC用カテゴリページについても、
JavaScriptが使えないことと、
売り切れかどうかの情報が画像より後にあるため、
スタイルシートで画像の見た目を変更することもできないことにより、
同様に、楽天GOLDのWebページを作成していただく必要があります。

Answer

ご連絡ありがとうございます。
お調べ頂き有難うございます。

他店で独自に同じことを行っているお店はございませんでしょうか？
オトカテは参考に出来ない為、他に参考に出来るお店があるかお調べ頂けると助かります。

お手数をおかけして大変申し訳ございませんが宜しくお願い致します。

Answer

ECマスターズの田中です。

売り切れ商品が黒くなる例としていただいたのは
PC用のページのようですが、
PC用、スマートフォン用、どちらをご希望でしょうか。

PC用につきましては、
CSSだけで上手く見せる方法があるようですので、
確認の上、改めてご案内させていただきます。

スマートフォン用に関してですが、
先述の通り、情報がページ内に無いために実現が難しいこともあって、
独自に実施している事例が見つかっておりません。

こちらのフォーラムをご覧いただいている会員の皆様の中で、
実際に売り切れ商品の表示を変えている店舗について
ご存知の方がいらっしゃいましたら、
当質問への返信としてお知らせいただければ幸いです。

Answer

ECマスターズの田中です。

PC用カテゴリページにて、
CSSによって画像を商品画像の上に載せる方法がありましたので
ご案内いたします。
「売り切れ」などの旨が記載された画像ファイルと共にご利用ください。

下記タグ（もしくはその中身）を、
ヘッダー・フッタ・レフトナビ、もしくは共通説明文（大）に
挿入してください。

= この下の行から ====================

/* 売り切れ商品表示 */
span.not {
    position: absolute;
    background: url(画像URL) center no-repeat;
    display: block;
    width: 128px;
    height: 128px;
    top: calc( -128px - 2em ); /* 商品名上端から上下方向に動かす距離 */
    left: calc( (100% - 128px) / 2 ); /* 商品名左端から左右方向に動かす距離 */
    text-indent: -100%;
    overflow: hidden;
    vertical-align: middle;
    z-index: 1;
    opacity: 0.6; /* 透明度 */
}
#risFil > table:nth-child(2) tr:nth-child(2n) > td {
	position: relative;
}

= この上の行まで ====================
※画像URLは、商品画像の上に載せたい画像ファイルのURLに置き換えてください。
※「透明度」の左の数字を操作することで、載せる画像の透明度を変更できます。（0で完全に透明、1で完全に不透明）
※別途、CSSで余白を調整している場合は、「top」「left」の値を増減して位置を調整してください。
　例）top: calc( -128px - 2em - 5px );　left: calc( (100% - 128px) / 2 + 10px );

Answer

ご連絡ありがとうございます。
PCの方は早速、試してみたいと思います。
スマートフォンの方も今後、分かりましたら、お手数をおかけしますが宜しくお願い致します。

この度はお調べ頂き誠に有難うございました。