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