ANLEITUNG: Bestseller, TOP, NEW Product-Slider-Box

[Pixelgreen]

Hallo Community,

suche für die Bestseller einen Slider, so dass nicht immer 10 gleichzeitig sondern vielleicht nur 3 oder so angezeigt werden und und dann eben durchsliden.
Gibt es hierfür schon Addons?

Vielen Dank im Voraus.

[EDIT Tomcraft 18.10.2011: Hier geht es direkt zur Anleitung von h-h-h.]
[EDIT Tomcraft 20.01.2012: Hier geht es direkt zur überarbeiteten Anleitung von werresal.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=16032.0

[h-h-h]

Als Box oder auf der Startseite?
Habe einen Box-Bestseller-Slider für einen Kunden mit dem Nivo-Slider gemacht, diesen könnte ich hier bei Bedarf veröffentlichen.

Gruß h-h-h

[Security]

Wäre auch Ich sehr dankbar, finde ich nämlich ziemlich ansprechend.

[Pixelgreen]

Genau den brauch ich.
Wäre super, wenn Du ihn veröffentlichst.

Vielen Dank im Voraus.

[h-h-h]

Hier jetzt mal die kleine Anleitung.
Das Ganze ist jetzt auch kompatibel mit einem Nivo-Startseiten-Slider und bietet die Möglichkeit auch die neusten Produkte oder Startseiten-Produkte darzustellen.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Hier sieht man jetzt zwar nicht die schicken überblende Effekte, daher schnell einbauen und testen.

boxes.php

Code: PHP  [Auswählen]

  include(DIR_WS_BOXES . 'manufacturers.php');

füge danach ein:

Code: PHP  [Auswählen]

  include(DIR_WS_BOXES . 'slider.php');

general.js.php

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

füge danach ein:

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
  $('#box-slider').nivoSlider({directionNav:false,controlNav:false,keyboardNav: false});
});
</script>

index.html

Code: PHP  [Auswählen]

{$box_SLIDER}

stylesheet.css am Ende einfügen:

Code: CSS  [Auswählen]

/* SLIDER-BOX */
#box-slider { position:relative; left: 0; display:block;overflow:hidden;max-height:180px;}
#box-slider a.nivo-imageLink { position:absolute; top:0px; left:0px; border:0; padding:0; margin:0; z-index:6; display:none; }
#box-slider img { position:relative; top:0px; left:0px;}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
.nivo-caption {position:absolute;left:0px;bottom:0px;background:#ccc;color:#000;opacity:0.8;width:100%;z-index:8;}
.nivo-caption p {padding:5px;margin:0;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}

Einstellungen - slider.php

Code: PHP  [Auswählen]

  $box_mode = 'bestsellers'; //new, bestsellers, top
  $max_slider_products = 4;

Die Produktbilder sollten die passende Größe für die Boxen haben und wenn möglich die gleiche Größe.
In der box_slider.html kann hierfür ein bisschen nachgeholfen werden, bis die Größe stimmt.

Code: PHP  [Auswählen]

{$box_data.PRODUCTS_IMAGE|replace:'thumbnail':'info'} und/oder  width="180"

Im Anhang befinden sich die restlichen Dateien, welche direkt so ins Template eingefügt werden können.
"box_slider.html", "slider.php", "jquery.nivo.slider.pack.js"

Viel Erfolg

h-h-h

[EDIT Tomcraft 18.01.2012: Code korrigiert, danke an werresal für den Hinweis.]
[EDIT Tomcraft 20.01.2012: Hier geht es zur überarbeiteten Anleitung von werresal.]

[peterpan19]

Hallo, klasse Sache, funktioniert auch einwandfrei. Aber was leider nicht funktioniert ist, dass man den dargestellten Artikel anklicken kann und so zur Artikeldetailseite kommt. Kann das noch jemand nachrüsten?  :
DANKE!

[Makrolibelle]

Hallo zusammen,
vielen Dank erste einmal das Ihr euch die Mühe gemacht habt so schöne Module zu generieren.

Eingebaut und angezeigt wird auch alles, leider funktioniert die Verlinkung zu den jeweiligen Artikeln nicht.

Code: PHP  [Auswählen]

 <a href="{$box_data.PRODUCTS_LINK}"> <img src="{$box_data.PRODUCTS_IMAGE|replace:'thumbnail':'info'}" width="180" alt="" title="{$box_data.PRODUCTS_NAME}" /></a>

Hatte auch schon in den anderen Boxen geschaut, da sieht die Verlinkung genauso aus.

Hier ein Auszug aus der Box Bestsellers:

Code: PHP  [Auswählen]

<a href="{$box_data.PRODUCTS_LINK}"><img src="{$box_data.PRODUCTS_IMAGE}" alt="" title="" /></a>

Jemand eine Idee woran das liegen kann? Für jede Idee bin ich dankbar.

[floh]

Wahrscheinlich ein Einbaufehler deinerseits. Gehe noch mal die Anleitung Schritt für Schritt durch...

Gruß

floh

[Makrolibelle]

habe nun nochmal alles überprüft auch Augenscheinlich alles soweit richtig, hoffe ich zumindest.
Die zu ändernde Dateien hab ich noch mals geprüft und die Dateien zum Hochladen erneut hochgeladen. aber irgendwie wird zwar der Slider angezeigt aber die Links zu den Produkten wollen einfach nicht funktionieren.

Meine Installation von modified eCommerce Shopsoftware ist 1.05 SP1a
Grundinstallation mit Template xtc5 und folgenden Modulen bisher implementiert.

livepreview http://www.1stalphanet.com/shopmodified eCommerce Shopsoftware/

• MODUL: MobileST - Smartphone Modul/Template für modified eCommerce Shopsoftware
• MODUL: RMA / Retoure Modul für modified eCommerce Shopsoftware
• MODUL: jQuery Autocomplete (ähnlich Ajax Search Suggest, IntelliSearch)

"/templates/xtc5/source/boxes/slider.php":
In dieser Datei habe ich alle 3 Möglichkeiten getestet: "new", "bestseller", "top" egal welche der Einstellungen ich eintrage, es will nicht gehen.

Hier die Dateien die ich angepasst habe:

"/templates/xtc5/source/boxes.php"?! bei mir Zeile 20+21:

Code: PHP  [Auswählen]

include(DIR_WS_BOXES . 'manufacturers.php');
include(DIR_WS_BOXES . 'slider.php');

"/templates/xtc5/javascript/general.js.php"?! bei mir Zeile 18-24:

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>
    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).load(function() {
      $('#box-slider').nivoSlider({directionNav:false,controlNav:false,keyboardNav: false});
    });
    </script>

"/templates/xtc5/index.html"?!

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
{php} $useragent=$_SERVER['HTTP_USER_AGENT'];
function rm_url_param($param_rm, $query='') {
    empty($query)? $query=$_SERVER['QUERY_STRING'] : '';
    parse_str($query, $params);
    unset($params[$param_rm]);
    $newquery = '';
    foreach($params as $k => $v)
        { $newquery .= '&'.$k.'='.$v; }
    return substr($newquery,1);
    }
if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{ {/php} <div id="mq" style="text-align: center; font-size: 30px; color: #fff; background: #000; padding: 20px; line-height: 46px">{$store_name}{#text_modified eCommerce Shopsoftware1#}<br/><a href="{$smarty.server.PHP_SELF}?tpl=mobile&{php}echo rm_url_param('tpl');{/php}">{#text_modified eCommerce Shopsoftware2#}</a></div> {php} } {/php}
<div id="wrap">
    <div id="header">
        <div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
        <div id="search">{$box_SEARCH}</div>
    </div>
    <div id="topmenuwrap">
        <ul id="topmenu">
            <li><a href="{$index}">{#link_index#}</a></li>
           <li><a href="{$cart}">{#link_cart#}</a></li>
           {if $account}
            <li><a href="{$account}">{#link_account#}</a></li>
           {/if}
            {if $smarty.session.customers_status.customers_status_id == '1'}            
            <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>            
           {/if}
            <li><a href="{$checkout}">{#link_checkout#}</a></li>
           {if $smarty.session.customer_id}
            <li><a href="{$logoff}">{#link_logoff#}</a></li>
           {else}
            <li><a href="{$login}">{#link_login#}</a></li>
           {/if}
        </ul>
        <div id="languages">{$box_LANGUAGES}</div>
    </div>
    <div id="breadcrumb">{$navtrail}</div>
    <div id="contentwrap"> {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
        <div id="leftcol">{$box_CATEGORIES}{$box_ADD_QUICKIE}{$box_CONTENT}{$box_INFORMATION}{$box_LAST_VIEWED}{$box_SLIDER}{$box_REVIEWS}{$box_SPECIALS}{$box_WHATSNEW}</div>
        {/if}
        <div
                {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
                        id="content"
                {else}
                        id="contentfull"
                {/if}
                 >
        {if strstr ($smarty.server.PHP_SELF, 'index')}
            {if $smarty.get.cPath==null and $smarty.get.manufacturers_id==''}
                 {if $BANNER}{$BANNER}{/if}
           {/if}
        {/if}
        {$main_content}</div>
    {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
    <div id="rightcol">{$box_CART}{$box_LOGIN}{$box_ADMIN}{$box_NEWSLETTER}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}</div>
    {/if} </div>
<p class="footer">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; 2009 by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>

"/templates/xtc5/stylesheet.css" am Ende eingefügt:

Code: CSS  [Auswählen]

  /* SLIDER-BOX */
    #box-slider { position:relative; left: 0; display:block;overflow:hidden;max-height:180px;}
    #box-slider a.nivo-imageLink { position:absolute; top:0px; left:0px; border:0; padding:0; margin:0; z-index:6; display:none; }
    #box-slider img { position:relative; top:0px; left:0px;}
    .nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
    .nivo-box {display:block;position:absolute;z-index:5;}
    .nivo-caption {position:absolute;left:0px;bottom:0px;background:#ccc;color:#000;opacity:0.8;width:100%;z-index:8;}
    .nivo-caption p {padding:5px;margin:0;}
    .nivo-caption a {display:inline !important;}
    .nivo-html-caption {display:none;}

[EDIT Tomcraft 30.11.2011: Modulnamen korrigiert und verlinkt.]

[Makrolibelle]

Hab jetzt mal die Produktbilder Thumbnails und Info auf 150x150 Pixel gesetzt. In der "stylesheet.css" die Bildgröße auch auf 150px in der "box_slider" auch auf 150px nun sollten alle Größen Angaben entsprechend angepasst sein aber irgendwie will das nicht funktionieren.

Im Anhang ist ein JPG. Auf dem linken Bild wird gerade die Box geladen und der Link ist verfügbar und auf dem rechten Bild ist die Box fertig geladen und es lässt sich nicht mehr klicken:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Hat bitte jemand mal eine Idee an was dieses Problem noch liegen könnte? So langsam geht mir echt die Kreativität flöten. 

[nicnero]

Hallo an alle

Gibt es auch eine Möglichkeit statt der Bestseller die neuesten Produkte sliden zu lassen?

Und gibt es bei den Modul Probleme mit den Hedfield Slider?

Gruß Nico

[nicnero]

Hallo

Ich habe mal das Modul verbaut und leider lief es nicht so recht. Die Überblendeffekte werden nicht richtig dargestellt. Und die Größe der Bilder bekomm ich auch nicht richtig hin und mittig wird es auch nicht angezeigt. Ist nun ein wenig viel was bei mir nicht geht. Schade hätte es gern eingebaut.

Gruß Nico

[nicnero]

Hallo und guten Morgen

Nun habe ich es hinbekommen, dass es soweit ordentlich dargestellt wird.

Torsten, die zwei Beiträge oben kannst du löschen.

Das einzige was noch nicht geht ist das mit den Links. Ein anklicken ist nicht möglich. Ich denke das es an der "box_slider.html" liegt.

Gruß Nico

[Tomcraft]

[...]
Torsten, die zwei Beiträge oben kannst du löschen.
[...]

Sinnvoller wäre ja, wenn du uns einfach schreibst, was du vorher falsch gemacht hattest?

Grüße

Torsten

[Lorenco]

Hallo zusammen,

ich habe ungefähr das gleiche Problem:
1. Die Überschrift der Box funktioniert nur bei "new", bei den anderen beiden kommt nichts als Überschrift.
2. Die Bilder erscheinen und werden auch gesildet, aber es ist kein Link vorhanden.

"box_sliders.html":

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
<h2 class="boxheader">{if $box=='new'}{#heading_whatsnew#}{elseif $box=='specials'}{#heading_specials#}{elseif $box=='bestsellers'}{#heading_best_sellers#}{/if}</h2>
<div class="boxbody">
  <div id="box-slider">
  {foreach name=aussen item=box_data from=$box_content}
    <a href="{$box_data.PRODUCTS_LINK}"><img src="{$box_data.PRODUCTS_IMAGE|replace:'thumbnail':'info'}" width="180" alt="" title="{$box_data.PRODUCTS_NAME}" /></a>
  {/foreach}
  </div>
</div>

"slider.php":

Code: PHP  [Auswählen]

<?php
/* -----------------------------------------------------------------------------------------

   modified eCommerce Shopsoftware - community made shopping
   http://www.modified eCommerce Shopsoftware.org

   Copyright (c) 2011 modified eCommerce Shopsoftware
   -----------------------------------------------------------------------------------------
   based on:
   (c) 2000-2001 The Exchange Project  (earlier name of osCommerce)
   (c) 2002-2003 osCommerce(best_sellers.php,v 1.20 2003/02/10); www.oscommerce.com
   (c) 2003 nextcommerce (best_sellers.php,v 1.10 2003/08/17); www.nextcommerce.org
   (c) 2003 XT-Commerce http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))

   Released under the GNU General Public License
   ---------------------------------------------------------------------------------------*/

  $box_mode = 'top'; //new, bestsellers, top
  $max_slider_products = 10;

  $box_smarty = new smarty;
  $box_content = '';
  $rebuild = false;

        $box_smarty->assign('language', $_SESSION['language']);
        if (!CacheCheck()) {
                $cache=false;
                $box_smarty->caching = 0;
        } else {
                $cache=true;
                $box_smarty->caching = 1;
                $box_smarty->cache_lifetime = CACHE_LIFETIME;
                $box_smarty->cache_modified_check = CACHE_CHECK;
                $cache_id = $_SESSION['language'].$current_category_id;
        }


if (!$box_smarty->is_cached(CURRENT_TEMPLATE.'/boxes/box_slider.html', $cache_id) || !$cache) {
        $box_smarty->assign('tpl_path', 'templates/'.CURRENT_TEMPLATE.'/');
        $rebuild = true;

// include needed functions
require_once (DIR_FS_INC.'xtc_row_number_format.inc.php');

$fsk_lock = '';
if ($_SESSION['customers_status']['customers_fsk18_display'] == '0') {
        $fsk_lock = ' and p.products_fsk18!=1';
}
if (GROUP_CHECK == 'true') {
        $group_check = " and p.group_permission_".$_SESSION['customers_status']['customers_status_id']."=1 ";
}
if ($box_mode=='top') {
  $slider_typ = "and p.products_startpage = '1'";
} elseif ($box_mode=='bestsellers') {
  $slider_typ = "and p.products_ordered > 0 order by p.products_ordered desc";
} elseif ($box_mode=='new') {
  $slider_typ = "order by p.products_date_added desc";
}
        $slider_product_query = "select p.products_id, p.products_price, p.products_tax_class_id, p.products_image, p.products_vpe, p.products_vpe_status, p.products_vpe_value, pd.products_name
                                   from ".TABLE_PRODUCTS." p, ".TABLE_PRODUCTS_DESCRIPTION." pd
                                  where p.products_status = '1'
                                    and p.products_id = pd.products_id
                                    and pd.language_id = '".(int)$_SESSION['languages_id']."'
                                        ".$group_check."
                                        ".$fsk_lock."
                                        ".$slider_typ."
                                  limit ".(int)$max_slider_products;
  $slider_product_query = xtDBquery($slider_product_query);
  if (xtc_db_num_rows($slider_product_query, true) >= MIN_DISPLAY_BESTSELLERS) {
          $rows = 0;
          $box_content = array ();
          while ($slider_product = xtc_db_fetch_array($slider_product_query, true)) {
                  $rows ++;
                  $image = '';
                  $slider_products = array_merge($slider_product, array ('ID' => xtc_row_number_format($rows)));
                  $box_content[] = $product->buildDataArray($slider_products);
          }
          $box_smarty->assign('box_content', $box_content);
    $box_smarty->assign('box', $box_mode);
  }
}
if (!$cache || $rebuild) {
  if (count($box_content)>0) {
    if ($rebuild)  $box_smarty->clear_cache(CURRENT_TEMPLATE.'/boxes/box_slider.html', $cache_id);
    $box_slider = $box_smarty->fetch(CURRENT_TEMPLATE.'/boxes/box_slider.html',$cache_id);
    $smarty->assign('box_SLIDER', $box_slider);
  }
} else {
  $box_slider = $box_smarty->fetch(CURRENT_TEMPLATE.'/boxes/box_slider.html', $cache_id);
  $smarty->assign('box_SLIDER', $box_slider);
}
?>

Das sind doch die beiden relevanten Dateien, oder? Sieht jemand den Fehler? Danke.