The task: In Gambio, a homepage was to be redesigned so that the bestseller display would be replaced by three sliders. The first slider uses the entire available width of the page content. This is followed by two additional sliders, each taking up 50% of the available width and arranged side by side.
The Slick Slider project from http://kenwheeler.github.io/slick/ serves as the basis for this. Including the JavaScript and CSS files from there makes it possible to display the child elements of an HTML element as a highly configurable slider.
To use the slider functionality, the CSS and JavaScript files of the Slick Slider application must be added to the template directory under usermod/css and usermod/javascript/Global respectively. Another JavaScript file is also created as "initSlider.js" in the Global directory. The HTML classes that are to be displayed as sliders are referenced there:
$(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(); } });
}
In addition to defining the slider behavior, filter functions are also implemented here. Since Gambio only allows products to be marked as bestsellers, another approach had to be found to display only one product type in a slider. Therefore, in the $.each sections, the href attribute is read from each slider element. If the requested category string is not present in this string, the element is removed from the HTML structure.
The bestseller display is defined in module/new_products_default.html. There, the div block with the class "e-container" was replaced with these lines:
<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>
By default, the images are loaded from the thumbnail directory. Since the new presentation looks better when the graphics are at least 200 pixels high, the directory path was modified by changing the prepare_data() function in the TopProductsMainContentView.inc.php file. To make this change update-safe, a directory named "TopProductsMainContentView" was created in user_classes/Overloads, containing the custom class with the modified function:
<?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); } } }
