Sehr geehrte POWERGAP Shopbetreiber,
das als Mega-Template vorgestellte Update ist bisher immer noch selten im Einsatz. Die Erklärung liegt wohl in der Komplexität und dem nötigen JS+CSS Wissen, dass man mitbringen muss. Daher an der Stelle wie immer der Hinweis, dass solche Dinge für das POWERGAP Team relativ einfach umzusetzen sind. Das folgende Beispiel ist in ca. 15 Minuten samt Anpassung an Ihr Design gegen Auftrag umgesetzt.
Aus den vielfältigen jQuery Möglichkeiten möchten wir Ihnen heute das "Infinite Carousel" vorstellen. In Kombination mit dem Mega-Template können Sie eine schöne und moderne Slide-Show z.B. auf die Startseite oder aber auch in ein jedes Banner implementieren.
Hier ein Live-Beispiel:
Die Umsetzung:
Zunächst sollte im Feld "Javascript_Head:" bei Sonstiges > Sonstige Einstellungen eine möglichst neue Version von jQuery enthalten sein. Beispiel:
Achtung! Für einige Kunden hat POWERGAP eine Optimierung des Shops vorgenommen, wo sämtliche JS-Scripte im Hintergrund komprimiert geladen werden. In diesem Fall werden Sie im Feld "Javascript_Head:" keinen Hinweis auf jQuery finden, aber es ist dennoch schon geladen!
Im Feld "Javascript_Head:" sollte dann zusätzlich dieser Code unten angefügt werden:
Nun muss über Layout > Schriften/CSS > All (ROOT) der folgende CSS-Code angefügt werden:
Als nächste platziert man über Layout > Startseite > Infogruppen einen Infotyp "Graf/Text.." an die gewünschte Position und öffnet diesen Infotyp per Klick zum Bearbeiten. Die Höhe stellt man z.B. auf 200. Ist dann abhängig, von der Höhe der Thumbs. Dieses Beispiel im PayPal-Auslieferungs-Shop ist komplett auf Thumbs mit der Größe 160x160 Pixel eingestellt. Wer andere Größen nutzt, muss entsprechen auch das CSS anpassen.
Im Feld "Text 1:" des Infotypen wird dann folgender Code eingetragen:
In diesem Beispiel werden also 18 Artikel aus der AUG mit der Id 9 nach vk sortiert ausgegeben. Alle nötigen Informationen zum Mega-Template können Sie auf www.powergap.de/forum/index.php?topic=852 nachschlagen...
In diesem Infinite Carousel könnten theoretisch nicht nur die Thumbs, sondern auch Preise usw. mit angezeigt werden. Wir haben das nicht getestet, aber im Grunde muss dazu nur das Mega-Template entsprechend umgestaltet werden.
Wir wünschen Ihnen viel Erfolg beim Einstellen dieses netten Features!
das als Mega-Template vorgestellte Update ist bisher immer noch selten im Einsatz. Die Erklärung liegt wohl in der Komplexität und dem nötigen JS+CSS Wissen, dass man mitbringen muss. Daher an der Stelle wie immer der Hinweis, dass solche Dinge für das POWERGAP Team relativ einfach umzusetzen sind. Das folgende Beispiel ist in ca. 15 Minuten samt Anpassung an Ihr Design gegen Auftrag umgesetzt.
Aus den vielfältigen jQuery Möglichkeiten möchten wir Ihnen heute das "Infinite Carousel" vorstellen. In Kombination mit dem Mega-Template können Sie eine schöne und moderne Slide-Show z.B. auf die Startseite oder aber auch in ein jedes Banner implementieren.
Hier ein Live-Beispiel:
Die Umsetzung:
Zunächst sollte im Feld "Javascript_Head:" bei Sonstiges > Sonstige Einstellungen eine möglichst neue Version von jQuery enthalten sein. Beispiel:
<script language="javascript" type="text/javascript" src="x_jquery-1.7.1.min.js"></script>
Achtung! Für einige Kunden hat POWERGAP eine Optimierung des Shops vorgenommen, wo sämtliche JS-Scripte im Hintergrund komprimiert geladen werden. In diesem Fall werden Sie im Feld "Javascript_Head:" keinen Hinweis auf jQuery finden, aber es ist dennoch schon geladen!
Im Feld "Javascript_Head:" sollte dann zusätzlich dieser Code unten angefügt werden:
<script type="text/javascript">
$.fn.infiniteCarousel = function () {function repeat(str, num) { return new Array( num + 1 ).join( str );}
return this.each(function () {var $wrapper = $('> div', this).css('overflow', 'hidden'),$slider = $wrapper.find('> ul'),$items = $slider.find('> li'),$single = $items.filter(':first'),singleWidth = $single.outerWidth(),visible = Math.ceil($wrapper.innerWidth() / singleWidth), currentPage = 1,
pages = Math.ceil($items.length / visible); if (($items.length % visible) != 0) { $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> li');}
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); $wrapper.scrollLeft(singleWidth * visible); function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({scrollLeft : '+=' + left
}, 500, function () { if (page == 0) {$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;} else if (page > pages) {$wrapper.scrollLeft(singleWidth * visible);page = 1;}
currentPage = page;}); return false;}
$wrapper.after('<a class="arrow back"></a><a class="arrow forward"></a>'); $('a.back', this).click(function () { return gotoPage(currentPage - 1); });
$('a.forward', this).click(function () {return gotoPage(currentPage + 1);});
$(this).bind('goto', function (event, page) {gotoPage(page);}); }); };
$(document).ready(function () {$('.infiniteCarousel').infiniteCarousel();});</script>
$.fn.infiniteCarousel = function () {function repeat(str, num) { return new Array( num + 1 ).join( str );}
return this.each(function () {var $wrapper = $('> div', this).css('overflow', 'hidden'),$slider = $wrapper.find('> ul'),$items = $slider.find('> li'),$single = $items.filter(':first'),singleWidth = $single.outerWidth(),visible = Math.ceil($wrapper.innerWidth() / singleWidth), currentPage = 1,
pages = Math.ceil($items.length / visible); if (($items.length % visible) != 0) { $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> li');}
$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
$items = $slider.find('> li'); $wrapper.scrollLeft(singleWidth * visible); function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n;
$wrapper.filter(':not(:animated)').animate({scrollLeft : '+=' + left
}, 500, function () { if (page == 0) {$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;} else if (page > pages) {$wrapper.scrollLeft(singleWidth * visible);page = 1;}
currentPage = page;}); return false;}
$wrapper.after('<a class="arrow back"></a><a class="arrow forward"></a>'); $('a.back', this).click(function () { return gotoPage(currentPage - 1); });
$('a.forward', this).click(function () {return gotoPage(currentPage + 1);});
$(this).bind('goto', function (event, page) {gotoPage(page);}); }); };
$(document).ready(function () {$('.infiniteCarousel').infiniteCarousel();});</script>
Nun muss über Layout > Schriften/CSS > All (ROOT) der folgende CSS-Code angefügt werden:
.infiniteCarousel {width: 670px;position: relative;height:180px;}
.infiniteCarousel .wrapper {width: 540px;height:175px;overflow: auto;min-height: 10em;margin: 0 60px;position: absolute;top: 0;}
.infiniteCarousel ul a img {border: 1px solid #DDDDDD;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
.infiniteCarousel .wrapper ul {width: 9999px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;position: absolute;top: 0;}
.infiniteCarousel ul li {display:block;float:left;padding: 10px;height: 160px;width: 160px;}
.infiniteCarousel ul li a img {display:block;}
.infiniteCarousel .arrow {display: block;height: 36px;width: 37px;background: url(https://cdn.powergap.de/pg_arrows2.png) no-repeat 0 0;text-indent: -999px;position: absolute;top: 60px;cursor: pointer;}
.infiniteCarousel .forward {background-position: 0 0;right: 0;}
.infiniteCarousel .back {background-position: 0 -72px;left: 0;}
.infiniteCarousel .forward:hover {background-position: 0 -36px;}
.infiniteCarousel .back:hover {background-position: 0 -108px;}
.infiniteCarousel .wrapper {width: 540px;height:175px;overflow: auto;min-height: 10em;margin: 0 60px;position: absolute;top: 0;}
.infiniteCarousel ul a img {border: 1px solid #DDDDDD;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
.infiniteCarousel .wrapper ul {width: 9999px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;position: absolute;top: 0;}
.infiniteCarousel ul li {display:block;float:left;padding: 10px;height: 160px;width: 160px;}
.infiniteCarousel ul li a img {display:block;}
.infiniteCarousel .arrow {display: block;height: 36px;width: 37px;background: url(https://cdn.powergap.de/pg_arrows2.png) no-repeat 0 0;text-indent: -999px;position: absolute;top: 60px;cursor: pointer;}
.infiniteCarousel .forward {background-position: 0 0;right: 0;}
.infiniteCarousel .back {background-position: 0 -72px;left: 0;}
.infiniteCarousel .forward:hover {background-position: 0 -36px;}
.infiniteCarousel .back:hover {background-position: 0 -108px;}
Als nächste platziert man über Layout > Startseite > Infogruppen einen Infotyp "Graf/Text.." an die gewünschte Position und öffnet diesen Infotyp per Klick zum Bearbeiten. Die Höhe stellt man z.B. auf 200. Ist dann abhängig, von der Höhe der Thumbs. Dieses Beispiel im PayPal-Auslieferungs-Shop ist komplett auf Thumbs mit der Größe 160x160 Pixel eingestellt. Wer andere Größen nutzt, muss entsprechen auch das CSS anpassen.
Im Feld "Text 1:" des Infotypen wird dann folgender Code eingetragen:
<script type="text/javascript">$(document).ready(function () { $('.infiniteCarousel').infiniteCarousel(); }); </script>
<center>Für Sie persönlich ausgesucht:</center>
<div class="infiniteCarousel"><div class="wrapper"><ul>
##megatemplate##18##aug##9##vk##<li><a href="#a_link" title="#a_text_alt"><img src="#thumb" height="160" width="160" alt="#a_text_alt"></a></li>##50##
</ul></div></div><img src="img/pg_schatten_u.gif" alt="" style="margin-left:10px;">
<center>Für Sie persönlich ausgesucht:</center>
<div class="infiniteCarousel"><div class="wrapper"><ul>
##megatemplate##18##aug##9##vk##<li><a href="#a_link" title="#a_text_alt"><img src="#thumb" height="160" width="160" alt="#a_text_alt"></a></li>##50##
</ul></div></div><img src="img/pg_schatten_u.gif" alt="" style="margin-left:10px;">
In diesem Beispiel werden also 18 Artikel aus der AUG mit der Id 9 nach vk sortiert ausgegeben. Alle nötigen Informationen zum Mega-Template können Sie auf www.powergap.de/forum/index.php?topic=852 nachschlagen...
In diesem Infinite Carousel könnten theoretisch nicht nur die Thumbs, sondern auch Preise usw. mit angezeigt werden. Wir haben das nicht getestet, aber im Grunde muss dazu nur das Mega-Template entsprechend umgestaltet werden.
Wir wünschen Ihnen viel Erfolg beim Einstellen dieses netten Features!