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

Magento Transactional Email Conditionals

kürzlich wollte ich in einer Invoice E-Mail für Bestellungen die keine Steuer ausweisen müssten eine extra Nachricht anzeigen. Das...

Zufällige Reihenfolge in Magento Kategorie Listen

Manchmal kann es sinnvoll sein, die Produkte in der Magento Kategorie Ansicht bei jedem Seiten Aufruf zufällig anzuordnen. Dies ist standardmäßig...

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...

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...

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...

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...

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