In the previous article, I have shown a scrollable new products module to you. Now, I will teach you how to integrate a similar module for featured products. Please have a look at the following video demonstration.

If you like this module, please doing following steps to apply it for your bootstrap template.

Step 1. Download the package for this module at https://www.dropbox.com/s/xnvspizos6ipt1s/scrollable-features-products.zip?dl=0

Step 2. Unzip the package and copy the templates fold into the tomatocart root directory.

Step 3. Open templates > bootstrap > modules > content > feature_products.php.

— Find following code snippet:

<?php 
    if (sizeof($products)) {
?>
    <!-- module new_products start //-->
    <div class="moduleBox">
        <h6><?php echo $osC_Box->getTitle(); ?></h6>
        
        <ul class="products-list grid clearfix">
        <?php 
            foreach ($products as $product) {
                $osC_Product = new osC_Product($product['products_id']);
        ?>
            <li class="clearfix">
            	<?php 
            	    if ($product['is_specials'] === TRUE) {
            	?>
            		<div class="specials-banner"></div>
            	<?php   
            	    } else { 
            	?>
            		<div class="featured-banner"></div>
            	<?php   
            	    }
            	?>
                <div class="left">
                    <?php echo osc_link_object(osc_href_link(FILENAME_PRODUCTS, $product['products_id']), $product['products_image'], 'id="img_ac_featureproductsmodule_' . $product['products_id'] . '"'); ?> 
                    <h3><?php echo osc_link_object(osc_href_link(FILENAME_PRODUCTS, $product['products_id']), $product['products_name']); ?></h3>
                    <p class="description"><?php echo strip_tags($osC_Product->getDescription()); ?></p>
                </div>
                <div class="right">
                    <span class="price"><?php echo $osC_Product->getPriceFormated(true); ?></span>
                    <span class="buttons visible-desktop">
                        <a id="ac_featureproductsmodule_<?php echo $product['products_id']; ?>" class="btn btn-small btn-info ajaxAddToCart" href="<?php echo osc_href_link(FILENAME_PRODUCTS, $product['products_id'] . '&action=cart_add'); ?>">
                        	<i class="icon-shopping-cart icon-white "></i> 
                        	<?php echo $osC_Language->get('button_buy_now'); ?>
                        </a>
                        <br />
                        <?php echo osc_link_object(osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), $product['products_id'] . '&action=wishlist_add'), $osC_Language->get('add_to_wishlist'), 'class="wishlist"'); ?>
                        <?php
                          if ($osC_Template->isInstalled('compare_products', 'boxes')) {
                              echo '<br />' . osc_link_object(osc_href_link(basename($_SERVER['SCRIPT_FILENAME']), osc_get_all_get_params() . '&cid=' . $product['products_id'] . '&' . '&action=compare_products_add'), $osC_Language->get('add_to_compare'), 'class="compare"');
                          }
                        ?>
                    </span>
                </div>
            </li>
        <?php 
            }
        ?>
        </ul>
    </div>
    
    <!-- module new_products end //-->
<?php 
    }
?>

Replace it with following code:

<?php 
    if (sizeof($products)) {
?>
    <!-- module features products start //-->
    <div class="moduleBox">
        <h6><?php echo $osC_Box->getTitle(); ?></h6>

        <div class="content scroll-feature-products">
            <div class="prev hidden-phone hidden-tablet"><i class="icon-chevron-left"></i></div>
            <div class="next hidden-phone hidden-tablet"><i class="icon-chevron-right"></i></div>

            <div class="frame">
                <ul class="slidee">
                    <?php 
                        foreach ($products as $product): 
                            $osC_Product = new osC_Product($product['products_id']);
                    ?>
                    <li class="clearfix">
                         <?php 
                               if ($product['is_specials'] === TRUE):
                           ?>
                                   <div class="specials-banner"></div>
                           <?php   
                               elseif ($product['is_featured'] === TRUE):  
                           ?>
                                   <div class="featured-banner"></div>
                           <?php   
                               endif;
                           ?>

                        <?php echo osc_link_object(osc_href_link(FILENAME_PRODUCTS, $product['products_id']), $product['products_image'], 'id="img_ac_newproductsmodule_' . $product['products_id'] . '"'); ?> 
                        <div class="price text-error"><?php echo $osC_Product->getPriceFormated(true); ?></div>
                    </li>
                    <?php 
                        endforeach; 
                    ?>
                </ul>
            </div>

            <div class="scrollbar">
                <div class="handle">
                    <div class="mousearea"></div>
                </div>
            </div>
        </div>
    </div>
<?php 
    }
?>

Step 4.  Open index.php under templates > bootstrap fold.

— Find following code snippet:

<!-- touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="templates/<?php echo $osC_Template->getCode(); ?>/images/apple-touch-icon-144-precomposed.png">

Add following code before 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>

Done. Please try it by youself.

Final word

If you need any my assistance, please contact me via following email address:

Email: waring3yin@icloud.com

I will do utmost to give you a reply as soon as possible.

Looking for quality TomatoCart hosting? Check out Arvixe Web Hosting