Sterne im Magento Bewertungs Formular

Dass Magento defaultmäßig nur normale Radioboxen und keine Sterne bei der Bewertung anzeigt dürfte vielen schon mal unangenehm aufgefallen sein.

Das kleine "Star Rating Widget" Jquery Plugin schafft aber Abhilfe.

Man benötigt:

jQuery: jquery.min.js, 24KB, Minified and Gzipped

jQuery UI (core + widget): jquery-ui.custom.js, 2KB, Minified and Gzipped

Und Natürlich jquery.ui.stars.min.js und jquery.ui.stars.min.css



Die Dateien werden beispielsweise über die local.xml des Templates geladen: (Reihenfolge der Scripts beachten)

<action method="addItem"><type>skin_css</type><name>js/jquery-ui-stars-30/jquery.ui.stars.css</name><params/></action>
<action method="addItem"><type>skin_js</type><name>js/jquery-1.5.2.js</name><params/></action> 
         <action method="addItem"><type>skin_js</type><name>js/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js</name><params/></action>
         <action method="addItem"><type>skin_js</type><name>js/jquery-ui-stars-30/jquery.ui.stars.min.js</name><params/></action>

in die /template/page/html/head.phtml
kann dann der folgende Code eingefügt werden:

<script type="text/javascript">
 //<![CDATA[
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.

jQuery('#stars-wrapper1').stars({
    cancelShow: false,
    captionEl: jQuery("#stars-cap")
});
// Code that uses jQuery's $ can follow here End ----.	


});
// Code that uses jQuery's $ can follow here End ----.

    jQuery(document).ready(function()
{
  
  });
  // Code that uses other library's $ can follow here.
   //]]>
</script>

in der /template/review/form.phtml werden zwei blöcke ausgetauscht:

<table class="data-table" id="product-review-table">
                    <col />
                    <col width="1" />
                    <col width="1" />
                    <col width="1" />
                    <col width="1" />
                    <col width="1" />
                    <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th><span class="nobr"><?php echo $this->__('1 star') ?></span></th>
                            <th><span class="nobr"><?php echo $this->__('2 stars') ?></span></th>
                            <th><span class="nobr"><?php echo $this->__('3 stars') ?></span></th>
                            <th><span class="nobr"><?php echo $this->__('4 stars') ?></span></th>
                            <th><span class="nobr"><?php echo $this->__('5 stars') ?></span></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"><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" /></td>
                        <?php endforeach; ?>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>

gegen

<ul class="data-table" id="product-review-table">
    <?php foreach ($this->getRatings() as $_rating): $i++; ?>
            <li id="stars-wrapper<?php echo $i; ?>">
        <?php foreach ($_rating->getOptions() as $_option): ?>
            <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() ?>" title="" class="radio" />
        <?php endforeach; ?>
            </li>
    <?php endforeach; ?>
</ul>

und

<script type="text/javascript">
    //<![CDATA[
        var dataForm = new VarienForm('review-form');
        Validation.addAllThese(
        [
               ['validate-rating', '<?php echo $this->__('Please select one of each of the ratings above') ?>', function(v) {
                    var trs = $('product-review-table').select('tr');
                    var inputs;
                    var error = 1;
    
                    for( var j=0; j < trs.length; j++ ) {
                        var tr = trs[j];
                        if( j > 0 ) {
                            inputs = tr.select('input');
    
                            for( i in inputs ) {
                                if( inputs[i].checked == true ) {
                                    error = 0;
                                }
                            }
    
                            if( error == 1 ) {
                                return false;
                            } else {
                                error = 1;
                            }
                        }
                    }
                    return true;
                }]
        ]
        );
    //]]>
    </script>

gegen

<script type="text/javascript">
    //<![CDATA[
        var dataForm = new VarienForm('review-form');
        Validation.addAllThese(
        [
               ['validate-rating', '<?php echo $this->__('Please select one of each of the ratings above') ?>', function(v) {
                    var trs = $('product-review-table').select('li'); 
                    var inputs;
                    var error = 1;
    
                    for( var j=0; j < trs.length; j++ ) {
                        var tr = trs[j];
                        if( j > 0 ) {
                            inputs = li.select('input'); 
    
                            for( i in inputs ) {
                                if( inputs.value > 0  ) {
                                    error = 0;
                                }
                            }
    
                            if( error == 1 ) {
                                return false;
                            } else {
                                error = 1;
                            }
                        }
                    }
                    return true;
                }]
        ]
        );
    //]]>
    </script>

Möglicherweise ist das ja für den ein oder anderen hilfreich.