「このショップの人気商品ランキング」を好きな場所に表示させたい

Question

いつもお世話になっております。
楽天既存プログラムで表示されている
「このショップの人気商品ランキング」を好きな場所に表示させる事は可能でしょうか？

出来る場合htmlやcssはどのように書けば良いでしょうか？
よろしくお願いします！###HR######IMG03a42ead94f20365eb63e5cb312663eab.jpegIMG0###

Answer

ECマスターズの村井です。    
   
確認してご返答しますので、少々お待ちください。

Answer

ECマスターズの村井です。

> 「このショップの人気商品ランキング」を好きな場所に表示させる事は可能でしょうか？

添付いただいた画像を確認しますと、
スマートフォンの画面になるかと思いますが、

スマートフォンですと、お好きな場所に「このショップの人気商品ランキング」を表示させることは、
難しい仕様となりますので、ご了承くださいませ。

Answer

村井さんありがとうございます☆

＞スマートフォンですと、お好きな場所に「このショップの人気商品ランキング」を表示させることは、
難しい仕様となりますので、ご了承くださいませ。

これってスマホのタグ規制の話でしょうか？
書きたい場所はセールページになりGOLDで作成なので問題ありません。

デザインはPC表示、スマホ表示
どちらも問いません。

「自動更新のランキングを表示」させられたら何でも良いです。
コンパスのランキングもあるのですが総計ランキングっぽくて
RMS既存のリアルタイムランキングと違いが出てしまうので統一したものをセールページに置きたいです。

Answer

ECマスターズの田中です。

内部の仕組みを詳しく確認したところ、
JavaScriptを利用して、ランキングの内容を
取得・表示できることがわかりました。

楽天GOLDにテスト用ページをご用意いただき、
当返信の末尾に記載するソースを
貼り付けていただきますようお願いします。

ソース中の
 から、対応するまでが
ランキング全体を囲む枠、
 から、対応するまでが
ランキング内の各商品となっておりますので、
 
スタイルシートを利用して、
ご希望の見た目になるよう調整していただいた上で
ご利用いただきますようお願いします。

なお、他のショップにてご利用いただく場合は、ソース内にある
    sid: '345695',
の数字を、該当ショップのIDにご変更いただく必要がございますことを
予めお含みおき願います。

また、ページ内ですでにjQueryを読み込んでいる場合、重複を避けるために、
１行目の

Answer

田中さん★

いつもありがとうございます！☆

表示させる事は成功しました！
https://www.rakuten.ne.jp/gold/pyokotto/compass/sp/shop/sale2.html

どうせならページデザインと統一しようと、コンパスのcssをコピーしてみて
クラス名を書き換えたのですが、
1枚目フォーラム2がコンパスのデザイン、
コピーして書き換えてみたデザインが画像2のフォーラム1

まるまるコピーしたのになんで？？
ってなっています。

----*----*--元のコンパスのhtml--*----*----



	当店の人気アイテム
	
	
	商品一覧を見る


----*----*--あてはめてみたhtml--*----*----


	当店の人気アイテム
	

jQuery(function($){
$.ajax({
type: 'GET',
url: 'https://shopapi.ranking.rakuten.co.jp/q',
data:{
protocol: 'secure',
qt: '14',
du: '2',
offset: '10',
eid: '13',
sid: '345695',
len: '50'
},
dataType: 'jsonp',
})
.done(function(data){
console.log(data.items);
$('.rankInShop').each(function(i,rnk){
var item_tmpl = $(rnk).find('.rankInShop_item').remove();
console.log(item_tmpl);
$.each(data.items, function(i,itm){
var item = item_tmpl.clone();
console.log(item);
$(item).find('.rankInShop_img').attr('src', itm.image128url);
$.each('rank name displayprice reviewave reviewnum'.split(' '), function(i,k){
$(item).find('.rankInShop_'+k).text(itm[k]);
});
$(rnk).append(item);
});
});
});
});






商品名：
価格：
評価平均：
評価数：



----*----*--元のコンパスのcss--*----*----

#itemRanking .ranking_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#itemRanking .ranking_item {
  width: 100%;
  max-width: 100%;
}
#itemRanking .ranking_item {
  position: relative;
}
#itemRanking .ranking_item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  padding: 8px 12px;
  width: initial;
}
#itemRanking .item_rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  top: 4px;
  left: 4px;
  background: #999999;
  color: #fff;
}
#itemRanking .item_name {
  font-size: 16px;
}
#itemRanking .item_name:before {
  content: url(../img/icon_ranking.png);
  margin-right: 4px;
}
#itemRanking .item_rank {
  margin-bottom: 16px;
}
#itemRanking .item_price {
  font-size: 16px;
  text-align: right;
}

----*----*--あてはめてみたcss--*----*----

.rankInShop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.rankInShop_item {
  width: 100%;
  max-width: 100%;
  position: relative;
}

.rankInShop_item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  padding: 8px 12px;
  width: initial;
}
.rankInShop_rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  top: 4px;
  left: 4px;
  background: #999999;
  color: #fff;
}
.rankInShop_name {
  font-size: 16px;
}
.rankInShop_name {
  content: url(../img/icon_ranking.png);
  margin-right: 4px;
}
.rankInShop_rank {
  margin-bottom: 16px;
}
.rankInShop_displayprice {
  font-size: 16px;
  text-align: right;
}

----*----*----*----*----

どうしたらコンパスのデザインみたいに配置出来ますか？
よろしくお願いいたします。###HR######IMG055f57a0d76ca62a3d217af9ab268e72a.pngIMG0### ###IMG14d0dfec9a7138566597649765cdc7127.pngIMG1###

Answer

ECマスターズの伊藤です。

> どうしたらコンパスのデザインみたいに配置出来ますか？

例えば、画像に適用されている

https://www.rakuten.ne.jp/gold/pyokotto/compass/sp/shop/css/sp_style.css?1603881630
.ranking_item .item_thum img {
  display: block;
  margin: 0 auto;
}

など、適用されていないCSSが存在します。

もし、デザインをまるっきり同じにしたいのであれば、

ChromeデベロッパーツールでCSSをチェックする方法
https://nandemo-nobiru.com/2944/

をご参考に、適用されているCSSをご確認、
適用をしていただく必要がございます。

Answer

伊藤さんありがとうございます☆
さっき、あ、そっかと思い、同じとこ見つけたので足してみました！

.rankInShop_item a {
  display: block;
  width: 100%;
}
.rankInShop_item {
  display: table;
  table-layout: fixed;
  width: 100%;
  background: #f8f8f8;
  overflow: hidden;
}
.rankInShop_img {
  display: block;
  margin: 0 auto;
}
.rankInShop_name {
  font-size: 10px;
  margin-bottom: 4px;
  line-height: 1.2em;
}
.rankInShop_displayprice {
  font-size: 13px;
  font-weight: bold;
  color: #b89c59;
  letter-spacing: .5px;
}
.rankInShop_item .item_layoutLeft {
  width: 40%;
  max-width: 300px;
  margin-right: 12px;
}
.rankInShop_item .item_layoutRight {
  width: 60%;
  max-width: 300px;
  padding: 8px 0;
}

値段のデザインが少し変わりました・・。ｗ

色んなシートにランキングのcss散りばめられていたので、
コンパスと同じデザインは諦めます・・・ｗ

プログラムのコードが全く読めず、ルールも全然知らないのですが
田中さんが教えてくれたコードをテーブルにしたい時、





商品名：
価格：
評価平均：
評価数：


ここの部分をテーブルタグにハメれば良いでしょうか？
よろしくお願いします☆###HR######IMG0ee9c163b046615951fd5e321b6668da7.pngIMG0###

Answer

ECマスターズの田中です。

テーブルタグですと、
HTMLの部分を下記のようなソースに
ご変更いただければ結構です。

= この下の行から ====================





商品名：
価格：
評価平均：
評価数：



= この上の行まで ====================

Answer

田中さん☆ありがとうございます☆

値段の後ろに"円"を付けたい場合は

価格：円
ここかな？と思い書いてみたのですが出てこなくて

どこに書けばいいでしょうか？

Answer

ECマスターズの田中です。

値段の後ろに"円"を付けたい場合は、いただいた通り
価格：円
の位置に「円」をご記載いただければ結構です。

sale2.html でも問題なく表示されておりますので、

・スーパーリロードを行う
https://liginc.co.jp/web/tool/browser/47339
・プライベートブラウズ（シークレットモード）を利用する
https://support.google.com/chrome/answer/95464 （Google Chromeの場合）
・ブラウザの設定画面から、キャッシュを削除する
・普段ご利用されているブラウザ以外のブラウザ・PCで表示

などの方法で、改めて表示をご確認いただきますようお願いします。

また、sale2.htmlにて、の直前にある




以上２行は不要となりますので、削除をお願いします。

Answer

田中さん★ありがとうございます☆

あっ
何回スーパーリロードしても、スマホはシークレットで見ても、円の部分が出てこなかったのですが
違う編集かけたら無事反応しました★
あ！テーブル入れた時に

←これの〆タグ
消えてたから出なかったんですかね？？
2行削除しました！

あと、もし出来たら商品名ではなくキャッチコピーに、正式商品名を入れてるので、そっちを表示させたいのですがそれは指定不可でしょうか？？

Answer

ECマスターズの海老塚です。

休み明けに担当より確認し、ご回答させていただきます。
今しばらくお待ちいただきますようよろしくお願いいたします。

Answer

ECマスターズの田中です。

無事、円表記をご確認いただけて何よりです。

> あと、もし出来たら商品名ではなくキャッチコピーに、正式商品名を入れてるので、そっちを表示させたいのですがそれは指定不可でしょうか？？

残念ながら、取得元のデータの中に
キャッチコピーの内容が含まれていなかったため、
指定不可となります。