Der Bereich Shopware Labs ist die Plattform für alle Entwickler. Hier findet man technische Dokumentationen und zahlreiche Tipps und Tricks rund um das Thema Programmieren. In dieser Rubrik stellen außerdem die Entwickler der shopware AG neue und experimentelle Lösungsansätze vor. Neue Funktionen, die in dieser Rubrik bereitgestellt werden, sind teilweise auch für zukünftige Releases geplant. Die Funktionen können dann ohne Programmierkenntnisse zukünftig direkt im Shopware Backend konfiguriert werden oder werden über Plugins bereitgestellt. Informationen über neue, geplante Funktionen finden Sie in unserer Roadmap.
Bitte beachten Sie, dass die hier bereitgestellten Lösungsansätze nicht offiziell supportet werden und nur eingebaut werden sollten, sofern Sie über das entsprechende, technische Wissen verfügen.
Überblendeffekt für Kategorie-Banner
- shopware
- 27.01.2010
- 3.0.5
- 9
-
- Slider, Blendeffekt, Übergang
- Labs/ Tutorials
- Kein Support
Hinweis: Vor dieser Einbindung sollten Sicherungen der relevanten Daten erstellt werden.
Mit dieser Anpassung werden die Startseiten-Banner, welche Sie über "Marketing / Banner hochladen können, dynamisch und in zufälliger Reihenfolge hintereinander mit Überblendeffekt geladen.
Fügen Sie dazu in die Datei engine/core/class/inherit/myCore.php unter
$sRender['variables']['sGroup'] = $this->sSYSTEM->sUSERGROUPDATA;
folgendes ein
$sql = " SELECT img, link, link_target, description, extension FROM s_emarketing_banners WHERE categoryID = ? AND ((valid_from <= CURDATE() AND valid_to >= CURDATE()) OR (valid_from = '0000-00-00' AND valid_to = '0000-00-00')) AND img!='' ORDER BY rand() "; $sRender['variables']['sEmarketingBanners'] = $this->sSYSTEM->sDB_CONNECTION->GetAll($sql, array($this->sSYSTEM->sLanguageData[$this->sSYSTEM->sLanguage]['parentID'])); foreach ($sRender['variables']['sEmarketingBanners'] as &$banner) { if(!empty($banner["img"])) { $banner["img"] = $this->sSYSTEM->sPathBanner.$banner["img"]; } }
Nun kann im Template (Datei templates/0/de/html/index/index_home.tpl) der vorhandene Banner-Code:
{if $sBanner.link == "#" || $sBanner.link == ""}<div class="cat_banner">{else}<a href="{$sBanner.link}" class="cat_banner" {if $sBanner.link_target}target="{$sBanner.link_target}"{/if} title="{$sBanner.description}">{/if} {if $sBanner.img}<img src="{$sBanner.img}" alt="{$sBanner.description}" name="{$sBanner.description}" border="0" title="{$sBanner.description}" />{/if} {if $sBanner.link == "#" || $sBanner.link == ""}</div>{else}</a>{/if}
durch diesen ersetzt werden:
<div id="banners"> {foreach from=$sEmarketingBanners item=banner key=key} {if $banner.link == "#" || $banner.link == ""}<div class="cat_banner">{else}<a href="{$banner.link}" class="cat_banner" {if $banner.link_target}target="{$banner.link_target}"{/if} title="{$banner.description}">{/if} {if $banner.img}<img class="banner{if !$key} first{/if}" src="{$banner.img}" alt="{$banner.description}" name="{$banner.description}" border="0" title="{$banner.description}" />{/if} {if $banner.link == "#" || $banner.link == ""}</div>{else}</a>{/if} {/foreach} </div> {literal} <style type="text/css"> #banners { position:relative; top: 0; left: 0; height:298px; } #banners .banner { position:absolute; top: 0; left: 0; display: none; z-index: 100; } #banners .first { display: block; z-index: 101; } </style> <script type="text/javascript"> var news = $$('#banners .banner'); var nfx = new Fx.Elements(news, {duration: 800, transition: Fx.Transitions.linear}); var ni = 0; var nl = 1; var slider = function() { news[ni].setStyle('z-index', 101); news[nl].setStyle('z-index', 100).setStyle('display', 'block').setStyle('opacity', 1); var obj = {}; obj[ni] = {'opacity': [1, 0]}; nfx.start(obj); ni++; if(ni==news.length) ni=0; nl++; if(nl==news.length) nl=0; nd = slider.delay(10000); }; nd = slider.delay(10000); </script> {/literal}
Artikel-PDF erstellen
Erweiterung bewerten
Kommentare:
Ab Shopware 3.5 Slider
17.12.2010 09:09Von: Sebastian
Hi Thomas,
ab Shopware 3.5 gibt es standardmäßig das Plugin Slider (Recommendation). Das kannst auch in jeder Kategorie genutzt werden.
Diese Tutorial ist ja nur für ältere Versionen.
Wo Datei index_home.tpl in Version 3.5.3
16.12.2010 15:03Von: Thomas
Hallo,
wo befindet sich die hier im Tutorial angegebene Datei templates/0/de/html/index/index_home.tpl
Hab die Shopware version 3.5.3
Dankeschön!
Klappt super! Vielen Dank!
22.09.2010 09:09Von: Pit mueslidepot.de
Erst als mir klar wurde, dass er sich die Bilder nicht aus den Rubriken holt, sondern man sämtliche Banner in die Startseite laden muss, hats geklickt! Aha!
So einfach sind schöne Webseiten!
14.09.2010 15:03Von: bzo-shop.de
Klasse Erklärung, einfach zu handhaben mit Copy&Paste! So macht das Shopdesign Spaß!
DANKE!!!
Funktion auch für Banner der Kategorien
16.08.2010 16:04Von: m.h.
Hallo, wir haben das auch eingebaut, dachten aber eigentlich, das das auch mit den Kategoriebannern funktioniert - tuts aber offenbar nur für die Startseite. Wäre toll, wenn es diesen Effekt auch für die Kategorien gäbe!
In den Kategorien und Unterkategorien auch möglich?
11.06.2010 12:12Von: Peter
Kann der Überblendeeffekt auch in bei den Kategorienbanner benutzt werden? Wäre ja nett :).
Schöne Erweiterung
07.03.2010 20:08Von: xelajo onlineshop
Hab's auch eingefügt und funktioniert bestens. Tolles Tool!
Dankeschön!
Super Idee und Tutorial
10.02.2010 10:10Von: Frank
Habe das direkt einmal in meinem Shop getestet. Klappt wunderbar. Vielen Dank dafür!
Wo holt er sich die wechselnden Bilder her ?
07.02.2010 20:08Von: Designbad24.de
Er muß doch irgendwo einen Pfad haben wo er die Bilder herholt ?
Oder ballert er alle Kategoriebilder hintereinander durch ?
Artikel kommentieren
Weitere interessante Artikel:
Bestell-Nr.: SW1305
Lieferzeit ca. 5 Tage
Preise inkl. gesetzlicher
MwSt. zzgl. Versandkosten*
Preise inkl. gesetzlicher
MwSt. + Versandkosten*