楽天スマホの買い物かごボタンのカスタマイズ

Question

スマホページのフローティングで表示される「購入手続きへ」の横に「お気に入り登録」か「商品の問い合わせ」ボタンを設置したいのですが設置方法を教えていただけませんでしょうか？宜しくお願い致します。

Answer

ECマスターズの田辺です。デザインレシピにてフローティングバナーにお気に入りボタンを追加する方法をご案内しておりますのでこちらをご覧くださいませ。https://club.ec-masters.net/index.php?design_page14まずはお気に入りボタンで設置していただき、お問い合わせボタンに変更したい場合にはお知らせください。

Answer

デザインレシピ通りにやったつもりですがボタンが二重に表記され文字化けしています。記述の内容を元に戻したのですがなぜか直りません。。。一度見て頂けませんでしょうか？

Answer

ECマスターズの田辺です。いくつか商品ページを確認したところボタンを設置した形跡がございませんが、特定のページで反映されましたでしょうか。その場合は編集されたページを教えていただいてもよろしいでしょうか。

Answer

申し訳ございません。色々と試していたところでした。現在は設置しましたが表示がされません。お手数ではございますが宜しくお願い致します。

Answer

ECマスターズの田辺です。確認させていただいたところ、デザインレシピ内の1：商品説明の上にお気に入りボタンを設置するの記述をされておりますので、買い物かご横にボタンを設置する場合は、2：固定バナーにお気に入りボタンを追加するを参考にしていただきますようお願いいたします。また、CSSファイルはURLが間違っているようで正しく読み込みができておりませんのでそちらも合わせてご確認をお願いいたします。

Answer

出来ました！有難うございます。お問い合わせボタンに変更したいのですがどうすればいいでしょうか？

Answer

ECマスターズの塚本です。> お問い合わせボタンに変更したいのですが> どうすればいいでしょうか？お問い合わせに変更されたい場合は、デザインレシピ上にもご案内されている、JavaScriptファイルのURLの部分を以下のように変更して設定されてみてください。=====================jQuery(function($){$('#floatingThirdButton').appendTo('#floatingCartContainer');$('#floatingThirdButton a').attr('href', 'https://ask.step.rakuten.co.jp/inquiry-form/?ms=500&shop_id=ショップID&itype=1&svid=101&iid=' + $("meta[property='apprakuten:item_id']").attr("content") );});=====================

Answer

実装できました！売り切れの場合は他のボタンと同じように半透明になるのですが半透明にならないように出来ますでしょうか？

Answer

ECマスターズの田辺です。赤いボタンのフローティングエリアは購入することを目的としており、売り切れの場合は楽天側で半透明になるようにシステムが組み込まれております。そのため、このエリアに入ったまま、売り切れの際に３つ目のボタンのみ使えるようにすることができませんので、お手数をおかけしますが、購入ボタンと切り離して新たに設置し直していただいてもよろしいでしょうか。１：横60px、縦52pxでお問い合わせボタンの画像を作成をお願いいたします。２：バナー設置君をつかって、https://manual.ec-masters.net/index.php?ecm-tools-manual-banarsetti・下端から 10px・右端から 10px（↓上級オプション）・スマートフォン用ページ対応でタグを作成してください。３：結果に出ているタグを２箇所変更をお願いいたします。・z-index: 9999;に「9」を２つ追加していただき、z-index: 999999;にしていただく。・最後にあるの直前に、#floatingCartContainer .cartButton {width: calc( 50% - 35px ) !important;}を追加していただく。４：今記述しているCSSファイルやJSファイルを読み込むタグは削除または非表示にしていただき、バナー設置君で作成したタグを共通説明文に貼り付けをお願いいたします。

Answer

ご返答有難うございます。URLはどのように設定すればいいでしょうか？

Answer

ECマスターズの田辺です。バナー設置君のリンク先URLにお問い合わせページのURLを入れていただくか、すでにタグを作成している場合には<a href="http://www.rakuten.co.jp/">のhttp://www.rakuten.co.jp/部分をお問い合わせページのURLにご変更いただきますようお願いいたします。

Answer

何度も申し訳ございません。「商品についての問合わせ」のURLですがhttps://ask.step.rakuten.co.jp/inquiry-form/?ms=500&shop_id=ショップID&itype=1&svid=101&iid=' + $("meta[property='apprakuten:item_id']").attr("content") になるのでしょうか？お問い合わせがどの商品か分かるようにしたいので「ショップに問合わせ」ではなく「商品についての問合わせ」にしたいです。

Answer

ECマスターズの田中です。> お問い合わせがどの商品か分かるようにしたいので「ショップに問合わせ」ではなく> 「商品についての問合わせ」にしたいです。その場合は、外部JavaScriptファイルを利用してリンク先を設定する必要がございます。最初に、下記内容をメモ帳に貼り付けてファイル名の末尾を「.js」にして、外部JSファイルとして保存し、楽天GOLDにアップロードしてください。（※6/18 10:30 ソース内容修正）（※6/18 17:00 ソース内容再修正）= この下から ================jQuery(function($){$('#fixedBanner1 a').attr('href', 'javascript:(function(){document.itemInqForm.submit();})();' );});= この上まで ================次に、下記内容を商品ページ用共通説明文に挿入していただくことで、商品についてのお問い合わせにリンクするよう設定することができます。= この下の行から ===================== この上の行まで ====================※外部JSファイルのURLは、実際のURLに置き換えてください。

Answer

上記の通り行うとお気に入りになるのですが「商品についての問合わせ」にするのにはどうすればいいでしょうか？

Answer

ECマスターズの村井です。休み明けに担当より改めて回答させていただきますので、今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。失礼いたしました、ご案内差し上げたソース内のURLが、お気に入り登録用のURLとなっておりました。ソースを正しい内容に修正いたしましたので、お手数ですが、再度ご確認いただきますようお願いいたします。（ソース内のショップID入力は不要となりましたので、　貼り付けてそのままご利用ください）

Answer

何度も申し訳ございませんが再確認をさせて下さい。ご指示の通り「バナー設置君」を使って共通説明文用に下記のように作成しJSファイルもGOLDにアップして、下記のaタグを削除して試しましたが上手くリンクしませんでした。何が理由でしょうか？やりたいことは買い物かごボタンの横に「商品についての問合わせ」ボタンを半透明にならずに表示させたいです。

Answer

ECマスターズの田中です。こちらも度々、申し訳ありません。改めて確認したところ、いただいたソースに問題はなく、私より再度ご案内差し上げたJSファイルの内容が、「ショップへの問い合わせ」にリンクする状態になっていることがわかりました。度々お手数をおかけいたしますが、再度JSファイルの内容を修正させていただきましたので、ご確認の上、再度修正を行っていただきますよう何卒よろしくお願いいたします。リンク先ではなく、ボタンの見た目に問題がある場合は改めてご返信いただきますようお願いします。

Answer

実装できました！色々と有難うございました！

楽天スマホの買い物かごボタンのカスタマイズ

カテゴリーから探す