[TomatoCart] A professional scrollable new products module for mobile device

In this article, I will share a professional scrollable new products module both to you. It works greatly both in mobile, tablet and PC device. I have recorded a video demonstration for it.

As you can, it works like the module in the amazon. You could drag the scrollbar, click the previous / next button, swipe in the phone / tablet to view the items.

Snip20150924_2

How to integrate this module into your store?

Step 1. Download the package at https://www.dropbox.com/s/hz505jc7xj90xdd/scrollable-new-products.zip?dl=0

Step 2. Unzip the package and copy the templates fold in your tomatocart root directory to override the original files.

Step 3. Open index.php under template > bootstrap directory to edit:

— Find following code snippet:

<?php if ($osC_Services->isStarted('debug') && defined('SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT') && SERVICE_DEBUG_SHOW_CSS_JAVASCRIPT == 1) { ?>
    <link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/css/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/css/stylesheet.responsive.css" />
    <link rel="stylesheet" type="text/css" href="ext/autocompleter/Autocompleter.css" />
    <?php } else { ?>
    <link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/css/all.min.css" />
    <?php } ?>

Add following code after it:

<link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/css/scroll.css" />

— Find following code snippet:

<script type="text/javascript">
  jQuery.noConflict();
</script>

Add following code after it:

<script type="text/javascript" src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/sly.js"></script>
<script type="text/javascript">
  jQuery(function($) {
    $('.frame').sly({
        horizontal: 1,
        itemNav: 'forceCentered',
        smart: 1,
        activateMiddle: 1,
        activateOn: 'click',
        scrollBy: 1,
        clickBar: 1,
        speed: 300,
        mouseDragging: 1,
        touchDragging: 1,
        scrollBar: '.scrollbar',
        elasticBounds: 1,
        dragHandle: 1,
        dynamicHandle: 1,
        speed: 200,
        moveBy: 600,
        prev: $('.prev'),
        next: $('.next')
    }); 
  });
</script>

That’s it. This module is useful for your store in the mobile device. You should apply it for your store. Please try it.

Lookign for quality TomatoCart hosting? Check out Arvixe Web Hosting

Tags: , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *