“Mehr Ansichten” optimieren

Erstellt von Johannes Teitge in Home, Tipps, jQuery am 06 2nd, 2009 | 19 Kommentare


Wenn man mehrere Bild für ein Produkt hat, finde ich die Lösung für die Detailansicht von Produkten in Magento nicht die beste Wahl. Das öffnen mit einem Popupfenster gefällt mir persönlich überhaupt nicht - lieber hätte ich es mit einem Mouseover.
Beispiel: http://shop.mxperts.de/test/stempel.html

Dieses Tutorial setzt die Installation von jQuery voraus!

Mein Plan sieht so aus, dass bei einem Mouseover über eine zuätzliche Ansicht  die Vollansicht angezeigt wird. Um das zu realisieren muss ich erst mal nachsehen, wie die Thumbnails für “Mehr Ansichten” erstellt werden. Den entsprechenden Code finden wir in der Datei app/design/frontend/default/[Ihr Theme]/template/catalog/product/view/media.phtml. 

    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no, status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
        </li>
    <?php endforeach; ?>

Die Funktion $this->helper(’catalog/image’)->init ist für uns relevant. Hier werden die Vorschaubilder eingelesen. Nun brauchen wir einen Imagepreloader, der die Vollansicht der Produktbilder einliest und die Dateinamen für uns verfügbar macht. Am einfachsten läßt sich dies mit einem nicht sichtbaren DIV realisieren. Innerhalb dieses DIV’s werden die Vollansichten der zusätzlichen Produktansichten gelistet.
In der Datei app/code/core/Mage/Catalog/Helper/Image.php finden wir die Syntax.
public function init(Mage_Catalog_Model_Product $product, $attributeName, $imageFile=null)
Im Backend unter Katalog->Attribute->Attribute befinden sich die drei Attribute thumbnail, small_image und image. Also verwenden wir für unseren Preloader ‘image’  als attributeName.
Das sieht dann in der Umsetzung so aus:

<div id="image-preload" style="position:absolute;visibility:hidden;">
<?php foreach ($this->getGalleryImages() as $_image): ?>
    <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" id="color_<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
<?php endforeach; ?>
</div>

id=color_ wird im kommen Tutorial “Color-Switcher für Optionen” benötigt.

Nun werden wir mittels jQuery das Ersetzen des Produktbild realisieren. Ich verwende Firefox für die Entwicklung von jQuery-Code. Wenn Sie die beiden Plugins Firebug und Webmastertools installieren, haben Sie Werkzeuge an der Hand, die Ihnen die Arbeit sehr erleichtern. Mit Firebug bekommen Sie mit Rechtsklick->Element untersuchen direkt den HTML-Code zur angelickten Stelle angezeigt. Somit müssen Sie nicht das entsprechende Template suchen und Sie kommen sehr schnell an die verwendeten ID’s und Klassen.
firebug01
firebug02

Unser jQuery-Script sollte nun folgendes tun:
1. A-Tags (Popupfenster) der Thumbnails entfernen
2. Mouseover soll das Bild tauschen
3. Mouseout soll das Standard-Bild wieder herstellen

Die jQuery Umsetzung:
 

      jQuery(document).ready(function(){     

        jQuery.fn.galleryimageChange=function(index){
          var oldsrc = jQuery('.product-image-zoom #image').attr('src'); // Standardbild merken

          jQuery(this).mouseover(
            function()
            {
              var preload = jQuery("#image-preload img").get(index); // Bild aus unserem Preloader mit Bildposition/index auslesen
              jQuery('.product-image-zoom #image').attr('src',jQuery(preload).attr("src")); // Standardbild ersetzen
            }
          )

          jQuery(this).mouseout(
            function()
            {
             jQuery('.product-image-zoom #image').attr('src',oldsrc); // Standardbild wieder herstellen
            }
          )

        }

        jQuery(function() {
          obj = jQuery(".more-views ul li:first"); // erstes LI aus more-views

          var i = 0;
          while ( (obj != null) && (obj.html() != null) ) {
            var image = obj.find("a").html(); // IMG-Tag als Source wird zurückgegeben
            jQuery(obj).html(image); // A-Tag mit IMG-Tag überschreiben
            jQuery(obj).galleryimageChange(i); // IMG-Tag galleryimageChange zuweisen, mit Index (Position in der Aufzählung)

            obj = obj.next(); // nächstes LI oder NULL
            i++;
          }
         })   

      })

Wenn Sie möchten können Sie auch noch ein Click-Event integrieren, sodass das angeklickte Bild stehen bleibt.

          jQuery(this).click(
            function()
            {
              var preload = jQuery("#image-preload img").get(index);
              oldsrc = jQuery(preload).attr('src'); // Standard-Bild lokal überschreiben
            }
          )

Die Sourcen habe ich dokumentiert, sodass man hoffentlich alle Aktionen nachvollziehen kann.

Das Ergebnis sehen Sie hier: http://shop.mxperts.de/catalog/product/view/id/126/s/zolof-the-rock-and-roll-destroyer-lol-cat-t-shirt/category/4/ 
Das ganze kann man nun noch ausbauen - z.B. mit zuätzlicher CSS-Formatierung für den Mouseover, image-preload in CSS auslagern, alt-Tag anpassen usw.

Download: media.phtml

Ich hoffe das Tutorial hast Ihnen Spass gemacht.
Johannes Teitge

  • Twitter
  • Webnews
  • Mister-Wong
  • Facebook
  • Digg
  • BlogMarks
  • Share/Save/Bookmark

19 Kommentare to ““Mehr Ansichten” optimieren”

  1. Color-Switcher für Simple Products | Magento Experts Color-Switcher für Simple Products | Magento Experts sagt:
    3. Juni 2009 um 20:04

    [...] Tutorial benötigt das Tutorial “Mehr Ansichten” optimieren, da wir auch einen Preloader für die Bilder der Farbvarianten [...]

    Zum Antworten anmelden
  2. toox toox sagt:
    4. Juni 2009 um 01:46

    Das blöde ist nur wenn man mit vielen Produktbildern arbeitet und der Kunde einige in Vollansicht sehen will musß er immer auf die Vorschaubilder und mit der Maus wieder hoch un doppelklicken. Das fällt im eigenen Fenster Flach. Sobald man mit der Maus über das Vorschaubild geht - müsste es in voller größe erscheinen. Maus weg - Bild wieder weg.

    Zum Antworten anmelden
  3. toox toox sagt:
    5. Juni 2009 um 15:08

    oh ja, Bin gespannt aud das Tut mit der Lightbox.
    Allerdings setze ich hier immer auf simple and clean.
    Das heißt die ganzen lightboxes mit dem ganzen schnickSchnack sind alle zu überladen. Normalerweise muss der Kunde draufgehen - Bild wird größer. fertig. Alles andere finde ich unnötig mit den Vor und zurück-buttons usw. Schnell und einfach……könnte man deinen Code nicht einfach erweitern das er bei mousemove - BildVollgröße macht?

    Zum Antworten anmelden
  4. Web-Agentur Web-Agentur sagt:
    21. Juni 2009 um 21:30

    Danke … genau danach habe ich gesucht. Funktioniert das ganze auch im IE6? Bei vielen Plugins, die es z.B. für JQUERY gibt, hat der IE6 Probleme beim ausführen.

    Zum Antworten anmelden
  5. Tobias Tobias sagt:
    26. Juni 2009 um 20:11

    Ich habe die media.phtml überschrieben mit meiner, jedoch hat sich nichts geändert. Es ist alles wie vorher.

    Was habe ich vergessen/übersehen?

    Zum Antworten anmelden
  7. Brigitte sagt:
    19. Juli 2009 um 08:09

    Hallo Johannes, muss in der
    Datei app/code/core/Mage/Catalog/Helper/Image.php
    etwas ändern?? Wenn ja, wo denn genau??

    LG Brigitte

    Zum Antworten anmelden
  8. nikl sagt:
    30. Juli 2009 um 13:54

    Ich weiß zwar selbst nicht, wie soetwas passieren kann, aber diese Anpoassung hat mir gerade meinen kompletten Shop zerlegt. Ich habe nur die meia.phtml angepasst (testweise auch einfach mal die hier gepostete verwendet) und bekomme seitdem folgende Fehlermeldung:

    Warning: include(/kunden/233569_97450/shop/app/design/frontend/vit6seo/default/template/callouts/right_col.phtml) [function.include]: failed to open stream: No such file or directory in /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Template.php on line 144
    Trace:
    #0 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Template.php(144): mageCoreErrorHandler(2, ‘include(/kunden…’, ‘/kunden/233569_…’, 144, Array)
    #1 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Template.php(144): Mage_Core_Block_Template::fetchView()
    #2 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Template.php(176): Mage_Core_Block_Template->fetchView(’frontend/vit6se…’)
    #3 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Template.php(193): Mage_Core_Block_Template->renderView()
    #4 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Abstract.php(643): Mage_Core_Block_Template->_toHtml()
    #5 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Text/List.php(43): Mage_Core_Block_Abstract->toHtml()
    #6 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Abstract.php(643): Mage_Core_Block_Text_List->_toHtml()
    #7 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Abstract.php(503): Mage_Core_Block_Abstract->toHtml()
    #8 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Abstract.php(454): Mage_Core_Block_Abstract->_getChildHtml(’right’, true)
    #9 /kunden/233569_97450/shop/app/design/frontend/vit6seo/vit6seo/template/page/2columns-right.phtml(49): Mage_Core_Block_Abstract->getChildHtml(’right’)
    #10 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Template.php(144): include(’/kunden/233569_…’)
    #11 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Template.php(176): Mage_Core_Block_Template->fetchView(’frontend/vit6se…’)
    #12 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Template.php(193): Mage_Core_Block_Template->renderView()
    #13 /kunden/233569_97450/shop/app/code/core/Mage/Core/Block/Abstract.php(643): Mage_Core_Block_Template->_toHtml()
    #14 /kunden/233569_97450/shop/app/code/core/Mage/Core/Model/Layout.php(526): Mage_Core_Block_Abstract->toHtml()
    #15 /kunden/233569_97450/shop/app/code/core/Mage/Core/Controller/Varien/Action.php(347): Mage_Core_Model_Layout->getOutput()
    #16 /kunden/233569_97450/shop/app/code/core/Mage/Cms/Helper/Page.php(100): Mage_Core_Controller_Varien_Action->renderLayout()
    #17 /kunden/233569_97450/shop/app/code/core/Mage/Cms/controllers/IndexController.php(45): Mage_Cms_Helper_Page->renderPage(Object(Mage_Cms_IndexController), ‘home’)
    #18 /kunden/233569_97450/shop/app/code/core/Mage/Core/Controller/Varien/Action.php(376): Mage_Cms_IndexController->indexAction()
    #19 /kunden/233569_97450/shop/app/code/core/Mage/Core/Controller/Varien/Router/Standard.php(248): Mage_Core_Controller_Varien_Action->dispatch(’index’)
    #20 /kunden/233569_97450/shop/app/code/core/Mage/Core/Controller/Varien/Front.php(158): Mage_Core_Controller_Varien_Router_Standard->match(Object(Mage_Core_Controller_Request_Http))
    #21 /kunden/233569_97450/shop/app/Mage.php(459): Mage_Core_Controller_Varien_Front->dispatch()
    #22 /kunden/233569_97450/shop/index.php(65): Mage::run()
    #23 {main}

    Selbst nachdem ich jQuery wieder deinstalliert hab und die media.phtml mit der originalen, unveränderten Datei überspielt habe, bekomme ich weiterhin diese Fehlermeldung, was ich absolut nicht nachvollziehen kann. Wie kann es dazu kommen?

    Zum Antworten anmelden
  9. nikl sagt:
    30. Juli 2009 um 14:06

    Ich habe jetzt die page.xml und den kompletten template ordner ersetzt und jetzt geht es wieder. Ich war gerade wirklich kurz vorm durchdrehen, weiß auch immer noch nicht woran es lag…

    Zum Antworten anmelden
  10. Johannes Teitge Johannes Teitge sagt:
    30. Juli 2009 um 14:12

    Tja, ein bekannter Fehler - den habe ich immer wenn ich wieder einen Schreibfehler gemacht habe :-)

    Magento kann einem schon ganz schön nerven…

    Bei einem Fehler: failed to open stream: No such file or directory

    kann die Ursache ein Schreibfehler oder eine fehlende Defintion sein. Auch eine falsche Schreibweise des Templates & Dateien kann die Ursache sein.

    Gruß
    Johannes Teitge

    Zum Antworten anmelden
    • nikl sagt:
      30. Juli 2009 um 14:24

      Ok danke, schonmal hilfreich zu wissen, wie es zu diesen Fehlern kommt. Trotzdem seltsam, dass der Fehler weiterhin bestand, nachdem ich die verändertre Datei wieder gelöscht hatte (davor lief ja alles super) Naja, ich werd mich jetzt nochmals an die Sache wagen… :)

      Zum Antworten anmelden
  11. nikl sagt:
    30. Juli 2009 um 14:29

    [Sorry für die vielen Posts, aber es gibt ja keine Edit-Funktion :)]

    Wollte nur klarstellen, das die hier zur Verfügung gestellten Dateien auf jeden Fall funktionieren, hab die Datei jetzt nochmal unveränderrt übernommen und jetzt klappt es auch! Jetzt hoff ich nur, dass ich sie auch noch an meine Wünsche anpassen kann. Auf jeden Fall Danke für ein absolut hervorragendes Tutorial!

    Zum Antworten anmelden
  12. Hofpils sagt:
    23. Dezember 2009 um 12:02

    Hallo,

    wunderbares Tut. Es funktionierte auf Anhieb - dickes Danke an dieser Stelle.

    Ein kleines Problem tut sich leider doch auf: Das Wechseln der Bilder funktioniert nicht bei Produkten mit Attributen.

    Bei normalen Produkten läuft alles korrekt ab. Bei Produkten mit beispielsweise einer Dropdown Auswahl funktioniert es nicht.

    Bin etwas ratlos. Kann mir bitte jemand helfen?

    Danke und Gruß
    Heiko

    Zum Antworten anmelden

Kommentar erstellen

You must be logged in to post a comment.

Bitte beachten: Mxperts.de ist kein Supportforum sondern eine Informationsplattform, deshalb benutzt für Diskussionen das deutsche Forum von Magento. (Fragen/Kommentare zu den Tutorials ausgeschlossen). Außerdem gebe ich keinen kostenlosen Support zu Magento. Leider haben das einige Leser in letzter Zeit falsch Verstanden und ich bitte um Euer Verständnis. Ich denke diese Plattform ist von unserer Seite aus schon genügend Gratis-Leistung.

Kategorien

Letzte Artikel

Letzte Kommentare

 

September 2010
M D M D F S S
« Jul    
 12345
6789101112
13141516171819
20212223242526
27282930  

Links

Archiv

| Registrieren | Copyrights 2009 by TMEDIA cross communications | RSS |Powered by Wordpress