項目選択肢別在庫に画像を表示したい

Question

お世話になっております。

以下の投稿を参考に、項目選択肢別在庫に画像を追加しようと試みました。
https://forum.ec-masters.net/post_view.php?id=8507

しかし、画像の表示がされません。
商品販売説明文に入れたタグは以下の通りです。
ご確認いただき、どのようにすれば表示されるかご教示いただけますようお願いいたします。

Accepted Answer

ECマスターズの伊藤です。

> まずは、PCページの項目選択肢の画像につきましてご指摘いただきありがとうございます。
> 私もここはなんだか変だな、と感じていたものの、これ以上求めるのは贅沢だと思い諦めておりました。
> ご教示いただけて、すごく嬉しかったです！

気になる点がございましたら、お気軽にご質問くださいませ。
中には修正できないものもございますが、
修正できるものは、お答えしております。


> スマホの項目選択肢画像ですが、おっしゃるとおりお買い物かごに追加した時に表示される部分です。

表示箇所のご確認ありがとうございました。
下記　〜 を
スマートフォン用商品説明文に入れていただきますと
スマホでも項目選択肢に画像を表示していただけます。

2項目のみ、例で記述しておりますので、
他の画像を追加して、ご登録をお願いいたします。


/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dt:before {
background-image: url(https://image.rakuten.co.jp/dreamsupply/cabinet/design/giftitems/lemonade-1.jpg);
}

/* 2項目目 */
.itemSelectPopUp dl:nth-of-type(2) dt:before {
background-image: url(https://image.rakuten.co.jp/dreamsupply/cabinet/design/giftitems/lime-1.jpg);
}

/* 以下略。項目を増やす際は、複製の上、nth-of-type(*)の数字と画像URLを修正してください。 */

.itemSelectPopUp dl {
height: 80px;
}
.itemSelectPopUp dt:before {
display: inline-block;
position: absolute;
content: "";
left: 0;
width: 80px;
height: 80px;
background-size: auto 80px;
background-repeat: no-repeat;
}
.itemSelectPopUp label {
padding: 0 34px 0 0px;
}
.itemSelectPopUp dt {
min-height: 80px;
height: 80px;
text-indent: 80px;
}
body .itemSelectPopUp dt span:after,
body .itemSelectPopUp dl.opened dt span:after{
top: 33px;
}

Answer

ECマスターズの田中です。

各画像URLの末尾が、半角の
"
ではなく、全角の
”
になっていることが原因で文法エラーが発生しておりますので、
"
への置換をお試しいただきますようお願いします。

Answer

田中様

お忙しいところご対応をありがとうございます。
早速全角「”」を半角「"」に修正してみたのですが、やはり表示がされません。

他に原因は考えられますか？

Answer

ECマスターズの田中です。

それでは、原因を調べるために
実際の商品ページを拝見する必要がございますので、
いただいたスタイルシートが実際に適用されている商品ページのURLを
お知らせいただきますようお願いします。

Answer

田中様

以下のページです。
https://item.rakuten.co.jp/dreamsupply/giftbox/

よろしくお願いいたします。

Answer

ECマスターズの田中です。

いただいた商品ページでは、
縦軸ではなく、横軸のみを利用して
項目選択肢別在庫が設定されておりました。

その場合、スタイルシートを横軸用に変更する必要がありますので、
タグの中身を下記のように書き換えていただきますようお願いします。



/* 選択肢名前に画像出す - 横軸専用
---------------------------------- */
.floating-cart-sku-table tr:first-child td.inventory_choice_name span:before {
content: "";
display: block;
width: 100px; /*画像の幅*/
height: 100px; /*画像の高さ*/
background-size: 100px; /*画像の幅*/
margin-bottom: 4px;
}
/* 1項目目 */
.floating-cart-sku-table tr:first-child td.inventory_choice_name:nth-child(2) span:before {
background-image:url("１項目目用の画像URL");
}
/* 2項目目 */
.floating-cart-sku-table tr:first-child td.inventory_choice_name:nth-child(3) span:before {
background-image:url("２項目目用の画像URL");
}

/* 以下略。項目を増やす際は、複製の上、nth-child(*)の数字と画像URLを修正してください。 */

Answer

田中様

ありがとうございます。原因がわかりましたので、項目選択肢側を縦軸に作り変えました。

ところで、スマホページも同様に項目選択肢に画像をつけるのは、かなり難しいですか？
ここに書いてある方法はチンプンカンプンな状態では、難しいですよね？
↓
https://forum.ec-masters.net/post_view.php?id=8507

Answer

ECマスターズの伊藤です。

> ところで、スマホページも同様に項目選択肢に画像をつけるのは、かなり難しいですか？
> ここに書いてある方法はチンプンカンプンな状態では、難しいですよね？

ご覧頂いている内容がご理解いただけないようでしたら
貼り付けて、画像部分だけ修正していただければ
ご登録できるようご案内致しますので、ご安心ください。

画像を表示させたい箇所は
商品をかごに追加　をクリックした際に表示される
下記の箇所でよろしいでしょうか。
＝＝＝＝＝
画像　レモネード 
画像　ライム
画像　ソーダ
：
：
＝＝＝＝＝

また、先程ご対応いただきました、PCで版の画像ですが
高さが足りず、画像の下が切れています。

商品説明文に入れていただきました
height: 100px; /*画像の高さ*/
を
height: 142px; /*画像の高さ*/
に修正していただきますと、
画像が切れずに表示されますので
よろしければご対応くださいませ。

Answer

伊藤様

お世話になります。

まずは、PCページの項目選択肢の画像につきましてご指摘いただきありがとうございます。
私もここはなんだか変だな、と感じていたものの、これ以上求めるのは贅沢だと思い諦めておりました。
ご教示いただけて、すごく嬉しかったです！
早速修正しましたら、画像全体が表示されて、とても気持ちがよいです。
ありがとうございます！！

スマホの項目選択肢画像ですが、おっしゃるとおりお買い物かごに追加した時に表示される部分です。
かなりパソコンについては出来が悪いですが、足を引っ張らないように頑張りますのでご教示いただけましたら大変助かります！！

Answer

伊藤様

おはようございます。
昨日は遅くまでご対応いただきありがとうございました。

スマホ商品ページにタグを入力しましたら、成功いたしました！
大満足です。
ありがとうございました！！