勉強したことのメモ

webプログラマが勉強したことのメモ。

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, JavaScript

  関連記事

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 ...