2020/2/27
Tag : craft-cms

サイトのコンテンツに対してレビュー機能やレイティング機能をつけてみる #craftcms

レビューとかを投稿できるようにするとしたらどうやるかなぁということで、 QARR というプラグインを試してみた。

QARR
https://plugins.craftcms.com/q…

コメントプラグインを使うとか、 Guest Entries を使うとか他にも方法はありそう。

QARR プラグインでは

  • Ratings & Reviews
  • Questions & Answers

ができるという感じで書かれている。

3.4 になったからなのか自分の英語力の問題かはわからないけど、ちょっと設置方法とかわからないところがあったが、とりあえずはできたかんじ。

プラグインをインストールしたところ

ここでレビューの数や、投稿されたレビューのうち確認待ちのものとかが見れる。

レビューを投稿できるようにする

ドキュメントをみてもイマイチ使い方がわからず。。。 model ってなんだろうな。。

とりあえず /vendor/owldesign/qarr/src/templates/frontend/_reviews にサンプルっぽいテンプレートがあったのでそれを貼ってみる。

エントリー表示用のテンプレートに以下を追記する。

<form method="post" accept-charset="UTF-8">
    {{ csrfInput() }}
    {{ actionInput('qarr/reviews/save') }}
    {{ redirectInput('review-posted') }}

    <input type="hidden" name="elementId" value="{{entry.id}}">
    
    {% if currentUser %}
        <input type="hidden" name="currentUser" value="{{currentUser.id}}">
    {% endif %}

    <div>
        <label>Full Name</label>
        <input type="text" name="fields[fullName]" placeholder="Full Name" required>
    </div>

    <div>
        <label>Email Address</label>
        <input type="text" name="fields[emailAddress]" placeholder="Email Address" required>
    </div>

    <div>
        <label>Rating (1-5)</label>
        <input type="number" min="1" max="5" name="fields[rating]" value="1" placeholder="Rating (1-5)" required>
    </div>

    <div>
        <label>Feedback</label>
        <textarea name="fields[feedback]" cols="30" rows="10" placeholder="Your feedback"></textarea>
    </div>

    <button class="sumit">Submit</button>
</form>

これでこんな感じでレビューを投稿できるフォームが出た。

投稿されたレビューの確認

レビューを投稿するとこんな感じで管理画面で確認できる。

レビューの一覧はこんな感じ。

左カラムはこれはレイアウトは崩れてるんだろうか。

レビューの詳細を確認できる。

ここからレビューに対して返信もできる。

レビューを表示させる

レビューの表示は参考になりそうなテンプレートをコピペしてみたけどなんかエラーになるので dumper で中をみてみて調整した。

{% set reviews = craft.qarr.displayReviews(entry, false) %}

{{ d(reviews) }}

<div class="qarr-custom-reviews">
    <div>
        Total Reviews: {{ reviews.total }}<br>
        Average Rating: {{ reviews.averageRating }}
    </div>
    <ul>
        {% for review in reviews.reviews %}
        <li>
            <strong>{{ review }}</strong><br>
            Rated: {{ review.rating }}<br>
            Author: {{ review.author }}<br>
            Feedback: {{ review.feedback }}<br>
            {% if review.reply %}
                <ul>
                    <li>
                        Response Author: {{ review.reply.author }}<br>
                        Response: {{ review.reply }}
                    </li>
                </ul>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>

こんな感じで書いてみて、以下のような感じで表示はできた。

これが正しいのかどうかはあるけど、セットしたものに対して reviews.reviews で取り出してループさせる感じで。

とりあえずやりたいことはできそうなかんじではある。

ここにログイン判定とかユーザーの情報を自動でセットするとかしていけば色々使えそうな気はする。

レビューの星の数だけつけるようなプラグインとしては Star Ratings もありかもしれない。

Star Ratings
https://plugins.craftcms.com/s…

← 記事一覧に戻る