勉強したことのメモ

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

  関連記事

画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...

JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...