Wie zur Verbesserung der Darstellung von Fotos im Leuchtkasten mit Magento

Wenn Sie Ihre Website-Design Online-Handel , visuellen Aspekt Ihrer Website ist das sehr wichtig. Dies ist der erste Eindruck, den Sie machen wollen oder nicht, Ihre potenziellen Käufer auf Ihrer Website fortsetzen oder gehen Sie zu Ihrem Wettbewerber.

Deshalb müssen wir Rechnung tragen: Bildqualität, Geschwindigkeit anzuzeigen, eine einfache Navigation durch Ihre Website ... aber die Präsentation der Bilder von Produktblättern ist ebenfalls wichtig. Zum Beispiel, zeigen ein Bild eines Gegenstandes auf einem schwarzen Hintergrund, wenn Sie darauf klicken, um es zu vergrößern, können Sie aus und haben eine angenehmere Produkt.

Diese Funktion ist in den integrierten Standard Prestashop , aber nicht in Magento . Die Lösung ist (verwenden Sie das Skript lightbox.js können Website siehe Beispiele auf der: Lightbox 2 ).

Ein sehr guter Artikel von Sebastian Enders erklärt, wie Sie auf die Wiki Magento .

Also werde ich weiter unten eine Übersetzung dieser Erklärungen mit einigen Änderungen vor:

Beginnen Sie mit dem Download der ZIP-Version von lightbox und dekomprimieren.

Ich habe es nicht mit einer neueren Version getestet, aber nach Sebastian neueren Versionen sind nicht kompatibel mit der Version des Prototyps von Magento eingesetzt.

Zunächst gehen wir davon aus, dass Magento in einem Ordner auf Ihrem Server installiert ist Magento.

Das Kopieren von Dateien in Magento lightbox

Beginnen Sie, indem Sie ein Verzeichnis in der Lightbox JS Magento-Ordner und kopieren Sie die Datei lightbox.js, dass Sie in dieses Verzeichnis entpackt.

Dann kopieren Sie die Datei in dem Verzeichnis lightbox.css / skin / frontend / default / default / css / Magento.

Erstellen Sie ein Verzeichnis / skin / frontend / default / default / images / lightbox / in Magento und kopieren Sie alle Dateien in diesem Ordner finden Sie in der Bilder-Ordner entpackt lightbox finden.

Ändern CSS-Dateien und js lightbox

Dann öffnen Sie die Datei, die in lightbox.css ist / Magento / skin / frontend / default / default / css und ersetzen:

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) Linke 15% no-repeat;)

von:

# PrevLink: hover, # prevLink: visited: hover (background: url (/ Magento / skin / frontend / default / default / images / lightbox / prevlabel.gif) Linke 15% no-repeat;)

und:

# Nextlink: hover, # nextlink: visited: hover (background: url (.. / images / nextlabel.gif) rechte 15% no-repeat;)

von:

# Nextlink: hover, # nextlink: visited: hover (background: url (/ Magento / skin / frontend / default / default / images / lightbox / nextlabel.gif) rechte 15% no-repeat;)

Nun öffnen: / Magento / js / lightbox / lightbox.js, Suchen und Ersetzen:

fileLoadingImage var = "images / loading.gif";

fileBottomNavCloseImage var = "images / closelabel.gif";

von:

fileLoadingImage var = "/ Magento / Haut / frontend / default / default / images / lightbox / loading.gif";

fileBottomNavCloseImage var = "/ Magento / skin / frontend / default / default / images / lightbox / closelabel.gif";

Legen Sie den Aufruf von JavaScript-Dateien und Stylesheets lightbox in Magento

Öffnen Sie die Datei: / magento / app / design / frontend / default / default / layout / page.xml und legen Sie zwischen:

= “head” as= “head” > "Page / html_head" <block type = name = "head" as= "head">
....
</ Block>

die beiden folgenden Zeilen:

<action method="addJs"> <script> lightbox / lightbox.js </ script> </ action>
<action method="addCss"> <stylesheet> css / lightbox.css </ stylesheet> </ action>

Einsetzen einer Aufforderung zum Leuchtkasten Produkten

Öffnen Sie die Datei:

/ Magento / app / design / frontend / default / default / template / catalog / product / view / media.phtml

und ersetzen:

von:

Denn wenn du jetzt auf ein Produkt in Magento es erscheint auf einem schwarzen Hintergrund mit der lightbox-Funktion groß.

Für eine korrekte Anzeige Ihrer Fotos, die ich schlage vor, Sie beschränken ihre Größe 600 x 600 Pixel.

Artikel zum gleichen Thema:

1. Xnview Optimierungen für Fotos mit ihnen in Ihrem Online-Shop Fühlen Sie sich frei Feed Abonnieren Sie den RSS zu verpassen Sie keine article.1ère Schritt: Vorbereiten Fotos für sie in Ihrem E-Commerce-Geschäft haben wir in unseren früheren gesehen Hinweis: Wie Sie Bilder optimieren Datenblätter ...
2. Wie PrestaShop Vorbereitung für die Erstellung Ihres Online-Shops mit Magento und Fühlen Sie sich frei Feed Abonnieren Sie den RSS zu verpassen Sie keine article.Vous wollen E-Commerce betreiben und legte einen Online-Shop, zwei Möglichkeiten Sie: Du hast bereits ein Geschäft und wollen sich entwickeln Sie Ihre ...
3. Optimierung von Produkten in Ihrem Foto-Shop mit Gimp Fühlen Sie sich frei, um RSS-Feeds abonnieren zu verpassen Sie keine article.Nous früheren Post gesehen haben, in unserer, gab es eine Notwendigkeit, um Ihre Fotos Nacharbeit der Beladung erhalten eine schnelle Seiten Ihrer eCommerce-Site und so ...