Categories

Ausgewählte Vorlagen

Magento. Wie bearbeitet man Slider

Ryan DeWitt Mai 29, 2012
Rating: 5.0/5. From 3 votes.
Please wait...

Dieses Tutorial zeigt Ihnen wie man das Slider im Magento-Template bearbeitet

1.Öffnen den Adminbereich und gehen auf CMS->Pages (Seiten) und öffnen die Startseite.

2. Öffnen den Inhalt Tab. Dort finden Sie den Code für Slider.

3. Der Code

 <a><img src="{{skin url='images/media/slider_img_1.png'}}" alt="" title="#htmlcaption" /></a>

zeigt den Bildname für Slider.

Verändern wir mal das Bild des Sliders.

Im Template sind die Bilder für das Slider im\skin\frontend\default\theme291\images\media Ordner. Die Bilder heißen etwa slider_img_1.png, slider_img_2.png usw. Ersetzen Sie direkt die Bilder, benutzen Sie nur den gleichen Bildname, die gleiche Abmessungen des Bildes. Laden Sie Bilder über FTP oder Hosting-Dateimanager.

Um den Bildpfad zu korrigieren, bearbeiten wir den angegebenen Code. Ersetzen Sie „slider_img_1.png“ durch Ihren eigenen Bildname. Das Ergebnis sollte so aussehen:

 <a><img src="{{skin url='images/media/slider_img_new.png'}}" alt="" title="#htmlcaption_2" /></a>

Unten sehen Sie das geänderte Bild des Sliders.

4. Den folgenden Code ist der Code von Logo, das im Slider, Text für Slider mit Prisen und Link zur Produktseite benutzt wird.

<div id="htmlcaption" class="nivo-html-caption">
<a href="'workstations/vpcsa33gx-si-laptop-computer-44.html"><img src="{{skin url='images/media/slider_product_1_logo.png'}}" alt="" /></a>
<h3>VPCSA33GX/SI<br /> Laptop Computer</h3>
<p>Intel Core i5-2430M 2.40GHz, 4GB DDR3, 128GB SSD, DVDRW, 1GB AMD Radeon HD 6630M, Backlit Keyboard, 13.3" Display, Windows 7 Professional 64-bit</p>
<span class="save-price">SAVE $499</span>
<span class="price">$1,299</span>
<button onclick="setLocation(''workstations/vpcsa33gx-si-laptop-computer-44.html')" class="button btn-cart" title="shop" type="button"><span>&nbsp;</span></button>
</div>

4.1. Verändern wir mal den Produkt-Link.
Öffnen den aktuelle Produkt auf Ihrer Seite und kopieren den Abschnitt des Links, der unten markiert ist:

4.2. Ersetzen den Link <a href="’at-nulla-pariatur-excepteur-sint-occaecat.html"> durch den Link, der wir im vorigen Schritt kopiert haben. Das Ergebnis sollte so aussehen: :

<div id="htmlcaption" class="nivo-html-caption">
<a href="'at-nulla-pariatur-excepteur-sint-occaecat.html"><img src="{{skin url='images/media/slider_product_1_logo.png'}}" alt="" /></a>
<h3>VPCSA33GX/SI<br /> Laptop Computer</h3>
<p>Intel Core i5-2430M 2.40GHz, 4GB DDR3, 128GB SSD, DVDRW, 1GB AMD Radeon HD 6630M, Backlit Keyboard, 13.3" Display, Windows 7 Professional 64-bit</p>
<span class="save-price">SAVE $499</span>
<span class="price">$1,299</span>
<button onclick="setLocation(''at-nulla-pariatur-excepteur-sint-occaecat.html')" class="button btn-cart" title="shop" type="button"><span>&nbsp;</span></button>
</div>

4.3. Um den Text verändern, bearbeiten Sie den Text im angegebenen Code. Lassen Sie bitte die gleiche Struktur des Tags um das richtige Layout zu bekommen.

4.4. In unserem Template-Slider befindet sich das Logo im folgenden Code:

 <img src="{{skin url='images/media/slider_product_1_logo.png'}}" alt="" />

4.5. Bitte machen Sie das Gleiche für alle Slides.

Das Logo verändern Sie auch so wie beim Sliderbild. Unten gibt es den veränderten Code des Sliders (für 1. Slide):

<div id="htmlcaption" class="nivo-html-caption">
<a href="{{store url='at-nulla-pariatur-excepteur-sint-occaecat.html'}}"><img src="{{skin url='images/media/slider_product_1_logo.png'}}" alt="" /></a>
<h3>VPCSA33GX/SI<br />New Product</h3>
<p>New configuration!!! 44GB DDR3, Your text Windows 7 Pro x64t</p>
<span class="save-price">SAVE $999</span>
<span class="price">$1,220</span>
<button onclick="setLocation('{{store url='at-nulla-pariatur-excepteur-sint-occaecat.html'}}')" class="button btn-cart" title="shop" type="button"><span>&nbsp;</span></button>
</div>

Das Ergebnis diese Mühe sollte dann wie folgt aussehen:

Sehen Sie jetzt das ausführliche Video-Tutorial an:

Magento. Wie bearbeitet man Slider

Magento Onlineshop
Dieser Eintrag wurde um Magento Tutorials geschrieben und edit, Magento, NivoSlider, slider markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten