顯示5星爲增加收視率，而不是單選按鈕

Question

默認的Magento將顯示收視率如下圖像

，但我想改變像this：

我是使用默認的magento代碼

形式。 PHTML [應用程序/設計/前端/ RWD /主題/模板/審查/ 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'); 
       }); 
      }); 
     }); 
    }); 
}