Product Reviews

Collect Product Reviews

<div>
    {{ open_form({'data-ajax-handler': 'system:onSendMessage'}) }}
        <div class="row">
            <div>
                <input type="text" class="input-sm form-control" id="contact_name" name="fields[name]" value="" placeholder="Your name"/>
                <span class="error"/><br><br>
            </div>
        </div>
        <div class="row">
            <div>
                <input type="text" class="input-sm form-control" id="contact_email" name="fields[email]" value="" placeholder="Email address"/>
                <span class="error"/><br><br>
            </div>
        </div>
        <div class="row">
            <div>
                <input type="text" class="input-sm form-control" id="subject" name="fields[subject]" value="" placeholder="Title for your review"/>
                <span class="error"/><br><br>
            </div>
        </div>
        <div class="row">
            <div>
                <textarea class="input-sm form-control" id="contact_message" name="fields[message]" value="" rows="10" placeholder="Your review"></textarea>
                <span class="error"/>
            </div>
        </div>
        <div class="row">
            <div class="rating">
            <span id="love">☆</span><span id="like">☆</span><span id="ok">☆</span><span id="dont-like">☆</span><span id="hate">☆</span>
            <p> </p>
            </div>
            <div>
            <select style="display:none" id="item_rating" name="fields[item_rating]">
                <option value="" diabled>-</option>
                <option value="1">★☆☆☆☆</option>
                <option value="2">★★☆☆☆</option>
                <option value="3">★★★☆☆</option>
                <option value="4">★★★★☆</option>
                <option value="5">★★★★★</option>
            </select>
                <span class="error"/>
            </div>
        </div>  
        </div>
        <div class="footer">
        <input type="submit" class="btn btn-important" value="Submit" style="width: 100%"/>
        <input type="text" name="hp" value="" style="display: none"/>
        <input type="hidden" name="fields[shop_customer_id]" value="{{customer.id}}"/>
        <input type="hidden" name="fields[shop_product_id]" value="{{product.id}}"/>
        <input type="hidden" name="template" value="system:product-review"/>
        <input type="hidden" name="fields[message_type]" value="review"/>
        </div>
    {{ close_form() }}
</div>

Display Product Average Rating


{% set product_rating = product.rating() %}
{% if product_rating.total_reviews %}
  {% for i in range(1, product_rating.average_int) %}★{% endfor %}
    {% if product_rating.average_int != 5 %}
        {% for i in range(1, 5 - product_rating.average_int) %}
            ☆
        {% endfor %}
    {% endif %}
     ({{ product_rating.total_reviews }})
{% else %}
    ☆☆☆☆☆ (no reviews yet)
{% endif %}

Display Reviews

<div class="reviews">
    <div>
        {% for review in product.reviews() %}
            {% if review.item_rating == 5 %}
                <div class="review-body">★★★★★</div>
            {% endif %}
            {% if review.item_rating == 4 %}
                <div class="review-body">★★★★☆</div>
            {% endif %}
            {% if review.item_rating == 3 %}
                <div class="review-body">★★★☆☆</div>
            {% endif %}
            {% if review.item_rating == 2 %}
                <div class="review-body">★★☆☆☆</div>
            {% endif %}
            {% if review.item_rating == 1 %}
                <div class="review-body">★☆☆☆☆</div>  
            {% endif %}
            <div class="review-body" style="text-align: right; font-size: 1.1rem;">
                <p>{{ review.created_at|date('M jS, Y') }}</p>
            </div>
            <div class="review-body" >
                <p><strong>{{ review.title }}</strong></p>
                <p><em>{{ review.comment }}</em></p>
            </div>
            <div class="review-body" style="text-align: right; font-size: 1.1rem;">
                <p>{{ review.from_name }}</p>
            </div>
            <hr>
        {% endfor %}
    </div>
</div>