Bei der Gestaltung Ihrer Website Online-Geschäft , ist der visuelle Aspekt von Ihrer Website sehr wichtig. Dies ist der erste Eindruck, die Sie wollen oder nicht, Ihre potenziellen Käufer auf Ihrer Website weiter oder gehen Sie zu Ihrem Konkurrenten werden.
Wir müssen deshalb: Bildqualität, Geschwindigkeit Display, eine einfache Navigation durch Ihre Website ... aber die Präsentation der Bilder von Ihrem Produkt-Seiten ist ebenfalls wichtig. Zum Beispiel, um ein Bild eines Objekts auf einem schwarzen Hintergrund angezeigt werden, wenn darauf geklickt wird, um es zu vergrößern, können Sie es aus und bringen eine gefälligere Produkt.
Diese Funktion ist standardmäßig integriert in Prestashop , aber nicht in Magento . Die Lösung besteht darin, die lightbox.js Skript verwenden (Sie können an Beispielen sehen: Lightbox 2 ).
Ein sehr guter Artikel von Sebastian Enders erklärt, wie auf der Magento Wiki .
Also werde ich unter einer Übersetzung dieser Erklärungen mit einigen Änderungen geben:
Beginnen Sie mit dem Download der ZIP-Version von Lightbox und dekomprimieren.
Ich habe nicht mit einer neueren Version getestet, aber laut Sebastian neueren Versionen sind nicht kompatibel mit der Version des Prototyps von Magento eingesetzt.
So starten wir annehmen, dass Magento Magento in einem Ordner auf Ihrem Server installiert ist.
Kopieren Sie die Dateien in Magento lightbox
Zuerst erstellen Sie ein Verzeichnis in der Lightbox JS-Datei Magento lightbox.js und kopieren Sie die Datei, die Sie in diesem Verzeichnis entpackt.
Dann kopieren Sie die Datei in der lightbox.css / skin / frontend / default / default / css / Magento.
Erstellen Sie ein Verzeichnis / skin / frontend / default / default / images / lightbox / Magento in sie und kopieren Sie alle Dateien finden Sie in der Lightbox Bilder im Ordner entpackt.
Ändern CSS-Dateien und js lightbox
Dann öffnen Sie die Datei, die in lightbox.css / Magento / skin / frontend / default / default / css und ersetzen ist:
Hintergrund: transparent url (.. / images / blank.gif) no-repeat;
von:
Hintergrund: transparent url (/ magento / skin / frontend / default / default / images / lightbox / blank.gif) no-repeat
und:
# PrevLink: hover, # prevLink: visited: hover {background: url (.. / images / prevlabel.gif) haben 15% no-repeat;}
von:
# PrevLink: hover, # prevLink: visited: hover {background: url (/ magento / skin / frontend / default / default / images / lightbox / prevlabel.gif) haben 15% no-repeat;}
und:
# NEXTLINK: hover, # NEXTLINK: visited: hover {background: url (.. / images / nextlabel.gif) rechts 15% no-repeat;}
von:
# NEXTLINK: hover, # NEXTLINK: visited: hover {background: url (/ magento / skin / frontend / default / default / images / lightbox / nextlabel.gif) rechts 15% no-repeat;}
Öffnen Sie nun: / Magento / js / lightbox / lightbox.js, Suchen und Ersetzen:
fileLoadingImage var = "images / loading.gif";
fileBottomNavCloseImage var = "images / closelabel.gif";
von:
fileLoadingImage var = "/ Magento / skin / frontend / default / default / images / lightbox / loading.gif";
fileBottomNavCloseImage var = "/ Magento / skin / frontend / default / default / images / lightbox / closelabel.gif";
Stecken Sie den Aufruf der JavaScript-Dateien und Stylesheets in Magento lightbox
Öffnen Sie die Datei: / magento / app / design / frontend / default / default / layout / page.xml und legen Sie zwischen:
= “head” as= “head” > <block "page/html_head" name = type = "head" as= "head">
....
</ Block>
die beiden folgenden Zeilen:
<action method="addJs"> <script> Leuchtkasten / lightbox.js </ script> </ action>
<action method="addCss"> <stylesheet> css / lightbox.css </ stylesheet> </ action>
Einsetzen der Ruf nach einem Leuchtkasten in der Produktentwicklung
Öffnen Sie die Datei:
/ Magento / app / design / frontend / default / default / template / catalog / product / view / media.phtml
und ersetzen:
<? Php foreach ($ this-> getGalleryImages () as $ _Bild):?>
<li>
<A href = "#" onclick = "popWin ('<? Php echo $ this-> getGalleryUrl ($ _Bild)?>', 'Galerie', 'scrollbars = yes, width = 200, height = 200, resizable = yes ') return false; ">
<? Img src = "<php echo $ this-> helper ('catalog / Bild') -> init ($ this-> getProdukt (), 'Vorschau', $ _Bild-> getFile ()) -> Resize (68 , 68);????> "alt =" <php echo $ this-> htmlEscape ($ _Bild-> getLabel ())> "title =" <php echo $ this-> htmlEscape ($ _Bild-> getLabel ( ))?> "/>
</ A>
</ Li>
<PHP endforeach;?>
von:
<? Php foreach ($ this-> getGalleryImages () as $ _Bild):?>
<li>
<A href = "<php echo $ this-> helper ('catalog / Bild') -> init ($ this-> getProdukt (), 'Bild', $ _Bild-> getFile ());?>" Rel = "lightbox [Rotation]" title = "<? php echo $ _product-> getName ();?>">
<? Img src = "<php echo $ this-> helper ('catalog / Bild') -> init ($ this-> getProdukt (), 'Vorschau', $ _Bild-> getFile ()) -> Resize (68 , 68);?> "width =" 68 "height =" 68 "alt =" "/>
</ A>
</ Li>
<PHP endforeach;?>
Dass, wenn Sie auf ein Produkt in Magento jetzt klicken, wird in großen Buchstaben auf einem schwarzen Hintergrund angezeigt mit der Lightbox-Funktion.
Für eine korrekte Anzeige der Fotos, die ich Ihnen raten, ihre Größe auf 600 x 600 Pixel beschränken.
- Optimierungen von Fotos mit Xnview, um sie in Ihren Online-Shop integrieren Fühlen Sie sich frei, um sich für RSS-Feeds verpassen Sie keine einzige article.1ère Schritt: Vorbereiten von Bildern für die Integration in Ihr E-Commerce-Shop, sahen wir in unseren früheren Ticket: Wie man Fotos für Produkt-Info zu optimieren ...
- So bereiten Sie Ihren Online-Shop mit Magento oder Prestashop erstellen Fühlen Sie sich frei, um sich für RSS-Feeds wollen Sie keine article.Vous Start im eCommerce verpassen und Umsetzung eines Online-Shops, zwei Optionen zur Verfügung Sie: Sie haben bereits ein Geschäft und möchten Ihre Entwicklung ...
- Wie Sie Fotos für Ihr E-Commerce-Produkt Info optimieren Eine der mühsame Arbeit bei der Konzeption einer E-Commerce-Website ist, dass für das gleiche Foto von einem Produkt, das Sie zu ihm und Niedergang in verschiedenen Größen skalieren müssen. Die Software wird dann anhand dieser Größe der Thumbnail-Anzeige ein Foto ...
Artikel zum selben Thema:
Schlüsselwörter:
E-Commerce , in der Tat , schwarzer Hintergrund , Leuchtkasten , Magento , Bilder
in der Version 1.5.1.0 das nicht mehr existiert: / magento / app / design / frontend / default / default / layout / page.xml
und es könnte nicht :/ magento / app / design / frontend / default / default / template / catalog / product / view / media.phtml
Wie das? danke
Auf der neuesten Version von Magento-Dateien Pfad geändert hat, müsste jemand eine aktualisierte Version dieses Tutorials?
toll! es funktioniert super! Vielen Dank für dieses Tutorial!
Hallo, ich habe eine persönliche Thema Magento haben, können Sie mir den Vorgang. Danke
Für die Anzeige von HD-Bilder im Vollbildmodus, dass alle Bildschirme passt PhotoSupplements sehen.
http://www.photosupplements.com
Es gibt einen Vergleich vor Ort mit der Lightbox.