Artikel rund ums Thema Webdesign und Frontendentwicklung

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.

Sterne im Magento Bewertungs Formular

Man benötigt:

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)

{codecitation}
<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>

{/codecitation}

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

<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>
{/codecitation}
in der /template/review/form.phtml werden zwei blöcke ausgetauscht:
{codecitation}
<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>
{/codecitation}
gegen
{codecitation}
<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>
{/codecitation}

und
{codecitation}
<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>
{/codecitation}
gegen
{codecitation}
<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>
{/codecitation}

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

Details http://www.webdesign-ecommerce.de/2011/10/sterne-im-magento-bewertungs-formular.html

Was steckt hinter eyeonu webdesign Berlin?

eyeonu webdesign berlin habe ich als Freelancer gegründet. Es handelt sich nach wie vor um ein Einmannunternehmen, das sich auf Frontendentwicklung im Bereich E-Commerce Spezialisiert hat.

Neben der Umsetzung von Designs für Online-Shops gibt es aber auch immer wieder Zeitfenster für kleinere Projekte und Websites bspw. auf Basis von Joomla

Blogeinträge

Joomla ID Nummer in Urls verhindern

Ein Frage die im Zusammenhang mit Joomla URLs sehr häufig auftritt ist, warum werden eigentlich, in einigen URLs, IDs dem...

Joomla Blog als Feed ausgeben

Nicht so ganz intuitiv ist das generieren oder ausgeben eines Feedlinks für eine bestimmte Kategorie in Joomla. Folgender Maßen muss...

Check von SSL Seiten

SSL Gerade E-Commerce Seiten sollten zumindestens im Checkout eine sichere Verbindung über SSL aufgebaut werden. Meistens stellt man jedoch nach der Umstellung...

Rechtschreibprüfung für die Website online durchführen

abcEditierenZum Schreiben kleiner Textpassagen, lässt sich gut die Duden Rechtschreibprüfung verwenden. Wenn man aber eine Website auf Rechtschreibfehler überprüfen möchte...

HTML Elemente auf die volle Breite des Browsers bringen

Im modernen Webdesign, sind seit längerem Elemente beliebt, die sich über die gesamte Breite des Browsers spannen. Hat sich dies Anfangs...

Favicons in verschiedenen Größen

Die Zeiten, in denen es ausgereicht hat, ein favicon in 16x16 pixel hochzuladen, sind vorbei. Heute verlangen die verschiedenen Devices...

Kontakt Info

  office(@)eyeonu.org
  +49 (0)30 25043398
  +49 (0)30 23320770152
  Hermannstr. 56 Berlin

Our Map


zum Kontaktformular
Definicja opieki zdrowotnej http://polskaaptek.com/ najbliższego obrzęd pomocy apteka