amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法
amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信したい。また、送信結果の平均値を星マークで表示したい。調べてみるとratyというjQueryプラグインを用いることで簡単に実装できる模様。以下に実装方法とCDN呼び出し方法をメモ。
サンプル
送信サンプルページ
https://taitan916.info/sample/raty/send.php
表示サンプルページ
https://taitan916.info/sample/raty/score.php
公式サイト
https://github.com/wbotelhos/raty
CDNでの呼び出し方法
以下で呼び出せる。
<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/jquery.raty.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/jquery.raty.css">
異なるバージョンを使用したい場合は以下から探す。
https://cdnjs.com/libraries/raty
ソースコード
送信用
<?php if( $_POST['score'] ){ ?> <pre><?php var_dump($_POST);?></pre> <?php } ?> <form method="post" action="./send.php" id="send_form"> <div id="score"></div> <a href="javascript:void(0);" id="send_btn">送信</a> </form> <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/jquery.raty.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/jquery.raty.css"> <script> $(function(){ $('#score').raty({ path: 'https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/images', //画像パス number: 5, //最大星数 score : 3 //デフォルト星数 }); $('#send_btn').on('click', function(){ const score = $('#score').find('input[name=score]').val(); //星数取得 $('#send_form').submit(); return false; }) }); </script>
画像パス部分に注意。自サーバーにファイルをアップしている場合は相対パスでもOK。
尚、ratyを起動すると#score内に「<input name="score" type="hidden" value="3">」というHTMLタグが生成されるので、送信後に$_POST['score']で受け取れる。
表示用
<div> 星平均2.5 <span id="score1"></span> </div> <div> 星平均3.1 <span id="score2"></span> </div> <div> 星平均4.7 <span id="score3"></span> </div> <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/jquery.raty.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/jquery.raty.css"> <script> $(function(){ $('#score1').raty({ path: 'https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/images', //画像パス readOnly: true, //読み取り専用 number: 5, //最大星数 score : 2.5 //表示星数 }); $('#score2').raty({ path: 'https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/images', //画像パス readOnly: true, //読み取り専用 number: 5, //最大星数 score : 3.1 //表示星数 }); $('#score3').raty({ path: 'https://cdnjs.cloudflare.com/ajax/libs/raty/3.1.1/images', //画像パス readOnly: true, //読み取り専用 number: 5, //最大星数 score : 4.7 //表示星数 }); }); </script>
readOnly部分を指定しないとカーソルホバー時、送信用みたく星の値が変わってしまうので注意。
所感
満足度を星マークで送信・表示に関しては非常に簡単に実装できそう。あとは表示するためのデータが当該アイテムの平均値になると思われるが、MySQLで平均値を求めるというのはやったことない気がする。もちろん平均値を求める関数はあるみたいなので、この辺りもテスト後にメモしておきたい。
関連記事
-
-
jQueryで新しく追加した要素に対してイベントがきかない場合の対応
jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...
-
-
HTML、javascriptソースの暗号化
サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...
-
-
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...
-
-
複数のajax処理の結果をまとめて表示
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法
NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...
-
-
formでGET送信時に空のパラメータを送信しない方法(cleanQuery)
フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...
-
-
jQselectableでセレクトボックスをリッチにする
入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
CKEditor(WYSIWYGエディタ)の設置方法と日本語化
今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんま ...
-
-
jQueryでiframe内の要素を呼び出し
jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...