Die Aufgabenstellung: In Gambio sollte eine Startseite derart umgestaltet werden, so dass die Bestselleransicht durch drei Slider ersetzt wird. Dabei nutzt der erste Slider die gesamte verfügbare Breite des Seiteninhalts. Nachfolgen sollen zwei weitere Slider, die jeweils 50% der verfügbaren Breite einnehmen und nebeneinander angeordnet werden sollen.
Als Grundlage dient hierfür das Slick-Slider Projekt von http://kenwheeler.github.io/slick/. Die Einbindung der Javascript und CSS Dateien von dort ermöglichen die Darstellung der Kind-Objekte eines HTML-Objekts in einer vielseitig konfigurierbaren Sliderdarstellung.
Um die Sliderfunktionalitäten zu nutzen, müssen die CSS und Javascript-Dateien der Slick-Slider Anwendung im Templateverzeichnis unter usermod/css beziehungsweise usermod/javascript/Global eingefügt werden. Eine weiteres Javascript wird ebenfalls erstellt und als "initSlider.js" ebenfalls im Global-Verzeichnis angelegt. Dort wird auf die HTML-Klassen referenziert, die als Slider dargestellt werden sollen:
$(document).ready(function(){
var bikes = $(".slide-items #bikes .img-thumbnail");var apparel = $(".slide-items-left #apparel .img-thumbnail");var electronics = $(".slide-items-right #electronics .img-thumbnail");
$('.slide-items').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 900, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true, dots: false } }] }); //Left Slider function $('.slide-items-left').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 900, settings: { slidesToShow: 2, slidesToScroll: 1, infinite: true, dots: false } }] });
$('.slide-items-right').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 900, settings: { slidesToShow: 2, slidesToScroll: 1, infinite: true, dots: false } }] });
$.each(bikes, function(index, value) { var href = $(value).attr('href'); //extract href value of element; if(!(href.indexOf("GHOST-BIKES") >= 0)){ //if substring is not found //disable parent element $(value).parent().parent().remove(); } });
$.each(apparel, function(index, value) { var href = $(value).attr('href'); //extract href value of element; if(!(href.indexOf("BEKLEIDUNG") >= 0)){ //if substring is not found //disable parent element $(value).parent().parent().remove(); } });
$.each(electronics, function(index, value) { var href = $(value).attr('href'); //extract href value of element; if(!(href.indexOf("ELEKTRONIK") >= 0)){ //if substring is not found //disable parent element $(value).parent().parent().remove(); } });
}
Neben den Definitionen des Sliderverhaltens sind hier auf Filterfunktionen implementiert. Da Gambio nur ermöglicht, Produkte als Bestseller zu markieren, musste ein anderer Weg gefunden werden in einem Slider nur einen Produkttypen anzuzeigen. Deshalb wird in den $.each Abschnitten in jedem Sliderelement das href-Attribut ausgelesen. Ist in diesem String der gesuchte Kategoriestring nicht vorhanden, so wird das Attribut aus der HTML-Architektur entfernt.
Die Anzeige der Bestseller wird in module/new_products_default.html geregelt. Dort wurde der div-Block mit der Klasse "e-container" mit diesen Zeilen ersetzt:
<div class="e-container"> <h2 class="with-line"><span><img alt="red-arrow" src="/images/red-arrow.png"></span><span> Bestseller</span></h2> <div class="row"> <div class="slide-items" style="width:100%"> {object_product_list product_list=$module_content id_prefix="bikes" truncate_products_name=$TRUNCATE_PRODUCTS_NAME} </div> <div class="double-slide" style="width:100%;"> <div class="slide-items-left-section" style="width: 50%;"> <h2 class="with-line sub-slider"><span><img alt="red-arrow" src="/images/red-arrow.png"></span><span> Apparel Rennrad</span></h2> <div class="slide-items-left" > {object_product_list product_list=$module_content id_prefix="apparel" truncate_products_name=$TRUNCATE_PRODUCTS_NAME} </div> </div> <div class="slide-items-right-section" style="width: 50%;"> <h2 class="with-line sub-slider"><span><img alt="red-arrow" src="/images/red-arrow.png"></span><span> ELEKTRONIK</span></h2> <div class="slide-items-right" > {object_product_list product_list=$module_content id_prefix="electronics" truncate_products_name=$TRUNCATE_PRODUCTS_NAME} </div> </div> </div> </div> </div></div>
Voreingestellt ist das Laden der Bilder aus dem Thumbnail-Verzeichnis. Da die neue Darstellung besser wirkt, wenn die Grafiken über eine Höhe von mindestens 200 Pixeln haben, wurde über eine Modifikation der Funktion prepare_data() in der Datei TopProductsMainContentView.inc.php der Verzeichnispfad angepasst. Um diese Änderung updatesicher zu gestalten, wurde im Verzeichnis user_classes/Overloads ein Verzeichnis "TopProductsMainContentView" erstellt, in welcher die Benutzerdefinierte Klasse mit der modifizierten Funktion enthalten ist:
<?phpclass econcess_TopProductsMainContentView extends econcess_TopProductsMainContentView_parent{ function prepare_data() { $t_uninitialized_array = $this->get_uninitialized_variables(array('customers_status_id','languages_id') );
if(empty($t_uninitialized_array)) { $coo_products = MainFactory::create_object('GMDataObject', array('products', array('products_startpage' => 1)));
if($coo_products->get_result_count() > 0) { $t_top_products_query = $this->build_sql_query(); $t_result = xtc_db_query($t_top_products_query);
if(xtc_db_num_rows($t_result) > 0) { while($t_new_products = xtc_db_fetch_array($t_result)) { $coo_product = MainFactory::create_object('product', array($t_new_products['products_id']));
$temp = $coo_product->buildDataArray($coo_product->data); $temp['PRODUCTS_IMAGE'] = str_replace('/thumbnail_images/', '/original_images/', $temp['PRODUCTS_IMAGE']); $this->content_array['module_content'][] = $temp; //$coo_product->buildDataArray($coo_product->data);
} $this->add_thumbnail($this->content_array['module_content'][0]); $this->content_array['TEXT_ADD_TO_CART'] = TEXT_ADD_TO_CART; $this->content_array['TRUNCATE_PRODUCTS_NAME'] = gm_get_conf('TRUNCATE_PRODUCTS_NAME'); } } else { $this->build_html = false; } } else { trigger_error("Variable(s) " . implode(', ', $t_uninitialized_array) . " do(es) not exist in class " . get_class($this) . " or is/are null", E_USER_ERROR); } } }
