显示5颗星，用于添加评级而不是单选按钮

Question

默认magento将显示评级如下图像

但我想改变this：

我正在使用默认的magento代码

form.phtml [app / design / frontend / rwd / theme / template / review / form.phtml]

<?php if( $this->getRatings() && $this->getRatings()->getSize()): ?>
                <h4><?php echo $this->__('Your Rating') ?> <em class="required"></em></h4>
                <span id="input-message-box"></span>
                <table class="data-table review-summary-table ratings" id="product-review-table">
                    <col width="1" />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                    <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">1</span>
                                    <span class="rating nobr" style="width:20%;"><?php echo $this->__('1 star') ?></span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">2</span>
                                    <span class="rating nobr" style="width:40%;"><?php echo $this->__('2 star') ?></span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">3</span>
                                    <span class="rating nobr" style="width:60%;"><?php echo $this->__('3 star') ?></span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">4</span>
                                    <span class="rating nobr" style="width:80%;"><?php echo $this->__('4 star') ?></span>
                                </div>
                            </th>
                            <th>
                                <div class="rating-box">
                                    <span class="rating-number">5</span>
                                    <span class="rating nobr" style="width:100%;"><?php echo $this->__('5 star') ?></span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($this->getRatings() as $_rating): ?>
                        <tr>
                            <th><?php echo $this->escapeHtml($_rating->getRatingCode()) ?></th>
                        <?php foreach ($_rating->getOptions() as $_option): ?>
                            <td class="value"><label for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>"><input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" /></label></td>
                        <?php endforeach; ?>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
                <input type="hidden" name="validate_rating" class="validate-rating" value="" />
                <script type="text/javascript">decorateTable('product-review-table')</script>
            <?php endif; ?>

请帮我找到解决方案

提前致谢

Answer 1

我最近处理过它，我的代码看起来像这样：

<强> form.phtml

<?php foreach ($this->getRatings() as $_rating): ?>
    <tr>
        <th><?php echo $this->escapeHtml($_rating->getRatingCode()) ?>: </th>
        <?php foreach ($_rating->getOptions() as $_option): ?>
            <td class="value">
                <label for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>">
                    <input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" />
                    <i class="fa fa-star"></i>
                </label>
            </td>
        <?php endforeach; ?>
    </tr>
<?php endforeach; ?>

<强> *。CSS

.review-summary-table tbody td label input {
    display: none;
}

// default
.review-summary-table tbody td label input + .fa {
    color: #E6E6E6;
}

// hover, clicked, ...
.review-summary-table tbody td label:hover input + .fa,
.review-summary-table tbody td label input:checked + .fa,
.review-summary-table tbody td.active label input + .fa,
.review-summary-table tbody tr:hover td.tmp-active label input + .fa {
    color: #50A4CF;
}

<强> *。JS

var reviewTable = $('#product-review-table');

if (reviewTable.length > 0) {
    reviewTable.each(function() {
        $(this).find('tbody tr').each(function() {
            var row = $(this),
                tdValues = row.find('td.value');

            tdValues.each(function(index) {
                $(this).find('label').hover(function() {
                    tdValues.removeClass('tmp-active');

                    tdValues.slice(0, index + 1).addClass('tmp-active');
                }).click(function() {
                    tdValues.removeClass('active');

                    tdValues.slice(0, index + 1).addClass('active');
                });
            });
        });
    });
}