[TomatoCart] An Elegant Image Preload Service for Bootstrap Template

When a new user access your online store in his browser, most of time will be spent on loading the product images in the page and then rending them. If the network is slow, the user experience will be very bad because it’s so slower to load the product images. In this case, your user might leave your store without visiting any page on your store.

In order to enhance the user experience, we could give a width and height to the product images before the browser load and render it. When the browser start to load it, we could show an elegant spinner on the image to represent the download process. Once the image is loaded completely by your user’s browser, the spinner will fade out and the real downloaded image is shown.

Snip20141023_4

 

If you think it is useful for your store, please apply it for your bootstrap template as follows:

Step 1. Download image_preloader.zip from dropbox.

Step 2. Unzip it and copy following folds into your TomatoCart root directory.

  • admin
  • includes
  • templates

Step 3. Open templates > bootstrap > index.php with your favourite text editor and find following line:

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

— Add following code after it:

<?php if ($osC_Services->isStarted('image_preloader') && defined('SERVICES_IMAGE_PRELOADER_STATUS') && SERVICES_IMAGE_PRELOADER_STATUS == 1): ?>
<script src="templates/<?php echo $osC_Template->getCode(); ?>/javascript/image_preloader.js"></script>
<script>
(function($) {
	$('.productImage').imgPreload({spinner_src: 'images/indicator.gif', fake_delay: <?php echo SERVICES_IMAGE_PRELOADER_FAKE_DELAY; ?>, animation_duration: <?php echo SERVICES_IMAGE_PRELOADER_DURATION;?>})
})(jQuery);
</script>

<?php endif;?>

Step 4. Go to admin panel > start menu > Modules > Services to install image preloader service.

Snip20141024_1

  • Disable or enable it via the status field.
  • Set the fake delay time.
  • Set the animation duration.

After that, the elegant loading spinner will be shown on the products images in the products module, products listing and info page.

Snip20141023_15

 

Snip20141023_16

 

Done. If you need my assistance, please just contact me via support@tomatocart.com. I will provide free & professional technical support service for Arvixe user.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

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

Author Spotlight

Jack Yin

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

7 Comments on [TomatoCart] An Elegant Image Preload Service for Bootstrap Template

  1. ion dan says:

    Hi , i just didn’t knew where to ask.
    Is the tomatocart v2 project still active ? I haven’t seen any news regarding this for many months.
    Do you have a roadmap when it’s going to get out of alpha , beta and get in a working state?
    Thanks

  2. Dartco says:

    Jack, do you plan to develop and integrate Ajax Attribute filter box module to new version of TC?
    And if yes, when do you plan to do this?
    And one big issue: tomatocart.com forum still suffers from spam bots. Moderators do not work and do not kill all this crap and forum overloaded with spam crap.
    Or if you want to abandon TC, please, officially close the site, because it’s sad to see that TC just doesn’t progress in years

    • Jack Yin says:

      This is my plan for next TomatoCart version:

      Step 1. Remove mootools framework from bootstrap template. I will rewrite the features with jquery for pc.

      Step 2. Improving the bootstrap template for mobile and tablets. It means the customer could buy products effectively in the mobile devices. This is significant because the most of general users are using their phone and tablets to get information from internet.

      Step 3. Remove the glass gray template from TomatoCart core. Only one bootstrap template will be using and maintained officially in TomatoCart.

      Step 4. Clear the a few of remained bugs fixes.

      Step 5. Add new functionalities such as products filters box module(filter products with variants, price, manufacturers and attributes), multiple store and guest checkout.

      If everything goes well, the next version of TomatoCart will be released within three months.

    • Jack Yin says:

      The reason of you didn’t see TC updates is that i have to work for company to earn money. So, i have limited time on tomatocart in this year. But, i will make TomatoCart system more stable and extensible in 2015. It will also be professional for mobile eccommerce.

      • Dartco says:

        Jack, I hope that finally you will find the right direction and free time to clean up the code, fix old bugs and add features which needed features which should be the main features (I hope you remember about how autocompleter was fixed and improved usability and ergonomics ). TC is really good product with a lot of still not completed/buggy/fuzzy working features.

        As you see we have now 21.11.2014. There’s not so much time before 2015. Are you sure that you will be able to release it? Our store now is really going down because of lack of attribute/price/etc filter. I desperately started to fix old attribute filter module, because you do not update TC and it looks abandoned.

        And it’s time to move on the phpbb 3.1.1 forum (it was released recently) and stop to collect spam on the forum

        • Jack Yin says:

          This is my plan for next TomatoCart version:

          Step 1. Remove mootools framework from bootstrap template. I will rewrite the features with jquery for pc.

          Step 2. Improving the bootstrap template for mobile and tablets. It means the customer could buy products effectively in the mobile devices. This is significant because the most of general users are using their phone and tablets to get information from internet.

          Step 3. Remove the glass gray template from TomatoCart core. Only one bootstrap template will be using and maintained officially in TomatoCart.

          Step 4. Clear the a few of remained bugs fixes.

          Step 5. Add new functionalities such as products filters box module(filter products with variants, price, manufacturers and attributes), multiple store and guest checkout.

          If everything goes well, the next version of TomatoCart will be released within three months.

          • Dartco says:

            Jack, can you please do the 5th list item as the first one? Our shop looses clients (and I think not only our), we have many products and customers can’t easily filter what they want. It will be great if it will be done ASAP. The other features much more easy to implement by site admins without changes in core files

Leave a Reply

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