Topangebote Slider

Deutsches Forum
1

Hallo liebe Oxid-Freunde,
ich versuche die Topangebote auf der Startseite in einen Slider einzubauen, um Platz zu sparen. Aktuell habe ich den Slider schon auf der Seite und ich befülle ihn manuell über eine CMS Seite. Schöner wäre es natürlich, wenn die Produkte automatisch über die Topangebote eingelesen werden würden. Leider scheitere ich an den entsprechenden Blöcken.
Hier meine Vorgehensweise:
zunächst habe ich ein neues Widget angelegt, das ich dann über die start.tpl einbinde. An der Stelle, wo der oxcontent “oxslide” eingelesen wird, müsste wohl der Code für die Topangebote. Hier habe ich erfolglos versucht verschiedene Blöcke aus den list, listitem tpl Dateien einzufügen.

[{block name="rootslider"}]

<div class="container-slider">
	<div class="row-slider">
			<div class="well3">
          
            <!-- Carousel
            ================================================== -->            
            <div id="myCarousel" class="carousel slide">
             
                  [{ oxcontent ident="oxslide" }]
              
                <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-2x"></i></a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-2x"></i></a>
                
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                    <li data-target="#myCarousel" data-slide-to="4"></li>
                </ol>                
            </div><!-- End Carousel --> 
        </div><!-- End Well -->
    </div>
</div>

[{/block}]

Ich wäre Euch sehr dankbar über ein Tipp, was zu tun ist.

Winterliche Grüße
Christian

2

Hallo Christian,

ich bin neu bei Oxid und möchte auch Slider auf der Startseite einbauen für “Neu im Shop” und “Angebote”.
Ich arbeite mit PROFESSIONAL EDITION 4.10.2 und Flow und bin so vorgegangen:

  1. widget/product/list.tpl in listneu.tpl dupliziert

  2. widget/product/listneu.tpl eingebunden in start.tpl
    [{if $oNewestArticles && $oNewestArticles->count()}]
    [{include file=“widget/product/listneu.tpl” …
    [{/if}]

  3. listneu.tpl aus manufacturerSlider.tpl und list.tpl neu zusammen gebastelt

[{oxscript include=“js/libs/jquery.flexslider.min.js” priority=2}]
[{oxstyle include=“css/libs/jquery.flexslider.min.css”}]

[{oxscript include=“js/newslider.js”}]

<div class=“row”>
<div id=“newSlider” class=“boxwrapper”>
<div class=“page-header”>
<h3>[{oxmultilang ident=“START_NEWEST_HEADER”}]</h3>
</div>

    &lt;div class="flexslider"&gt;
        &lt;ul class="slides"&gt;
            [{foreach from=$products item="_product" name="productlist"}]
            [{assign var="testid" value=$listId|cat:"_"|cat:$smarty.foreach.productlist.iteration}]
                    &lt;li&gt;
                [{oxid_include_widget cl="oxwArticleBox" _parent=$oView-&gt;getClassName() nocookie=1 _navurlparams=$oViewConf-&gt;getNavUrlParams() iLinkType=$_product-&gt;getLinkType() _object=$_product anid=$_product-&gt;getId() sWidgetType=product sListType=listitem_$type iIndex=$testid blDisableToCart=$blDisableToCart isVatIncluded=$oView-&gt;isVatIncluded() showMainLink=$showMainLink recommid=$recommid owishid=$owishid toBasketFunction=$toBasketFunction removeFunction=$removeFunction altproduct=$altproduct inlist=$_product-&gt;isInList() skipESIforUser=1 testid=$testid}]

                    &lt;/li&gt;
            [{/foreach}]
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;

</div>

  1. newslider.js
    (function() {

**// store the slider in a local variable
**var $window = $(window),
******flexslider = { vars:{} };
*
**// tiny helper function to add breakpoints
**function getGridSize() {
****return (window.innerWidth < 600) ? 2 :
***********(window.innerWidth < 900) ? 3 : 4;
**}
*
**$(function() {
****SyntaxHighlighter.all();
**});
*
**$window.load(function() {
****$(’.flexslider’).flexslider({
******animation: “slide”,
******animationLoop: false,
******itemWidth: 210,
******itemMargin: 40,
******minItems: getGridSize(), // use function to pull in initial value
******maxItems: getGridSize() // use function to pull in initial value
****});
**});
*
**// check grid size on resize event
**$window.resize(function() {
****var gridSize = getGridSize();
*
****flexslider.vars.minItems = gridSize;
****flexslider.vars.maxItems = gridSize;
**});
}());

Ich bin noch nicht 100pro mit der Gestaltung zufrieden, aber hoffe dass ich das per css hinkriege.

Und im Moment frage ich mich, wo ich einstellen kann WIEVIELE der neusten Artikel gezeigt werden, wenn ich in Stammdaten/performance automatisch eingestellt habe.

Bin interessiert, wie du weitergekommen bist.
Christiane

1 Like
3

https://www.ecomponents.de/module/oxid-slideshow.html

hilft auch