OpenCart Themes: Styling Effects of jQuery Plugins

Exclusive offer: get 50% off this eBook here
OpenCart 1.4 Template Design Cookbook

OpenCart 1.4 Template Design Cookbook — Save 50%

Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates

$26.99    $13.50
by Tahsin Hasan | April 2011 | Open Source Web Development

This article shows how we can add different jQuery plugins to expand the system. We also discuss about different styling effects of jQuery plugins that we can use to enhance the look and feel of our store.

In this article by Tahsin Hasan, author of OpenCart 1.4 Template Design Cookbook, we will cover:

  • Customizing the jQuery cycle plugin
  • Modifying the side column with the jQuery cycle plugin
  • Different transition effects of jQuery cycle plugin

 

OpenCart 1.4 Template Design Cookbook

OpenCart 1.4 Template Design Cookbook

Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates

        Read more about this book      

(For more resources on Opencart, see here.)

Customizing the cycle plugin

In this recipe, we use the jQuery cycle plugin with our products. We first download the jQuery cycle plugin.

Getting started

We need jQuery enabled for jQuery cycle to work with our store shop.

How to do it

Go through the following steps to customize the jQuery cycle plugin:

  1. First, download the jQuery cycle JavaScript files from http://jquery.malsup.com/cycle/download.html. We extract the downloaded compressed file. We will use the jquery.cycle.min.js. We copy this file to catalog\view\javascript\jquery.
  2. We need to add jQuery and the jQuery cycle JavaScript file into our file. For this recipe, we will add this plugin for the latest products in the home section. So, we add the following code in latest_home.tpl as we are not using the jQuery cycle plugin throughout the site:
    <script type="text/Javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="catalog/view/javascript/jquery/ jquery.cycle.min.js"></script>
  3. Then, we will modify the existing table-based structure to div-based. We remove the following code:
    <table class="list">
    //...
    </table>
  4. And in place of that we write the following:
    <div class="slideshow">
    //...
    </div>
  5. We also again remove the tr tag:
    <tr>
    //...
    </tr>
  6. And replace the td HTML tag with the following div tag:
    <td style="width: 25%;">
    //...
    </td>
  7. The required div tag is:
    <div class="slideshow-image-container">
    //...
    </div>
  8. We will initialize the jQuery cycle plugin with the following code:

    <script type="text/Javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'fade'
    });
    });
    </script>

  9. Now, go to the browser and refresh to see the effect of our change:

    OpenCart 1.4 Template Design Cookbook

  10. We center the product image. So, we add the following margin-left property to our image in the stylesheets.css file:
    .slideshow .slideshow-image-container {
    margin-left: 200px;
    }
  11. Then, the image container moves to the center of the latest product area. See the following image:

    OpenCart 1.4 Template Design Cookbook

  12. We need to do some styling to our product images. We will have a thick border around our image. So, we add these styling attributes:

    .slideshow .slideshow-image-container {
    margin-left: 200px;
    border: 10px solid #ddd;
    }

  13. This creates a border around the product image like the following:

    OpenCart 1.4 Template Design Cookbook

  14. The product image and the descriptions are all left aligned. So, we make it centered by adding the following style tag:

    .slideshow .slideshow-image-container {
    margin-left: 200px;
    text-align: center;
    padding: 10px;
    border:10px solid #ddd;
    }

  15. Now, our jQuery cycle looks like this:

    OpenCart 1.4 Template Design Cookbook

There's more...

You can also see the Accordion jQuery plugin. It is also a very popular jQuery plugin. You can add and initialize it in almost the same way. You can read the documentation of the plugin at http://plugins.jquery.com/project/accordion.

Modifying the side column with the cycle plugin

We modified the latest product block in the center column with the jQuery cycle plugin. Now, if we want to show our products on the side columns with the jQuery cycle, then this recipe will guide us to our destination.

Getting started

We need jQuery enabled for jQuery cycle to work with our store shop.

How to do it

Go through the following steps to customize the jQuery cycle plugin:

  1. To use the plugin, first, we need to add the required file links to the latest.tpl file as we are using the jQuery cycle for latest products. We add the following line in our latest.tpl file:
    <script type="text/Javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="catalog/view/javascript/jquery/jquery.cycle.all.min.js"></script>
  2. Then, like our previous recipes, we will remove the table-based style and instead, use div-based styles:
    <table cellpadding="2" cellspacing="0" style="width: 100%;">
    //...
    <tr>
    //...
    </tr>
    //..
    </table>
  3. And, we write the following tag in place of the table element:
    <div class="slideshow">
    //...
    </div>
  4. We also li tag with a div element. See the following code:
    //remove this tags
    <li>
    //...
    </li>
    //replace with the following element
    <div class="slideshow-image-container">
    //...
    </div>
  5. Now, we initialize the cycle plugin with the code below:
    <script type="text/Javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'fade'
    });
    });
    </script>
  6. If we go to the browser, then we can see the following changes:

    OpenCart 1.4 Template Design Cookbook

  7. We will add some styling to the above display. The products are displaying on the left side of the side column. To make it centered, we add margin to the style:
    .slideshow .slideshow-image-container { margin-left: 60px; }
  8. Our right column changes like this:

    OpenCart 1.4 Template Design Cookbook

  9. We add a border to our image. We do the following styling addition:
    .slideshow .slideshow-image-container {
    margin-left: 60px;
    border: 5px solid #ddd;
    }
  10. When we go to the browser, we find the following state of our right side bar:

    OpenCart 1.4 Template Design Cookbook

  11. We need to add some padding and make our text aligned to the center. So, we also add the following styles:
    .slideshow .slideshow-image-container {
    margin-left: 60px;
    border: 5px solid #ddd;
    padding:5px;
    text-align: center;
    }
  12. We refresh our browser and see our changes in action:

    OpenCart 1.4 Template Design Cookbook

There is more

You can also add this plugin on the left side of our OpenCart store. Just change the position of the module from the module section of the admin panel.

 

OpenCart 1.4 Template Design Cookbook Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates
Published: March 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

 

        Read more about this book      

(For more resources on Opencart, see here.)

Different effects with the cycle plugin

We have installed the jQuery cycle with our store shop. jQuery cycle comes up with many different options and effects. We can bring attractive changes to our product images with these options and effects.

Getting started

We need jQuery enabled for the jQuery cycle to work with our store shop.

How to do it

Following is the list of available jQuery cycle options.

Let's discuss each option:

  • fx: The name of the transition effect. We can use comma-separated names, e.g.: fade, scrollUp, shuffle:
    fx:    'fade',
  • timeout: We set the time between slide transitions. It is in milliseconds and 0 to disable auto advance:
    timeout:     4000, 
  • timeoutFn: This is the callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag):
    timeoutFn: null,
  • Continuous: We can set this to true to start the next transition immediately after the current one completes:
    continuous: 0,
  • Speed: This is the speed of the transition. This can be any valid fx speed value:
    speed: 1000,
  • speedIn: This is the speed of the in transition:
    speedIn: null,
  • speedOut: This is the speed of the out transition:
    speedOut: null,
  • Next: We use this as the selector for the element to use as a click trigger for the next slide:
    next: null,
  • Prev: We use this as the selector for the element to use as click trigger for the previous slide:
    prev: null,
  • prevNextClick: Callback function for prev/next clicks: function(isNext, zeroBasedSlideIndex, slideElement)
    prevNextClick: null,
  • prevNextEvent: This is the event that drives the manual transition to the previous or next slide:
    prevNextEvent: 'click.cycle',
  • Pager: This is the selector for element to use as pager container:
    pager: null,
  • pagerClick: We can set callback function fn for pager clicks: function(zeroBasedSlideIndex, slideElement).
    pagerClick: null,
  • pagerEvent: The name of the event that drives the pager navigation:
    pagerEvent: 'click.cycle',
  • allowPagerClickBubble: This allows or prevents click event on pager anchors from bubbling:
    allowPagerClickBubble: false,
  • pagerAnchorBuilder: This is the callback function for building anchor links:
    function(index, DOMelement).

    pagerAnchorBuilder: null,
  • before: The transition callback (scope set to element to be shown):
    function(currSlideElement, nextSlideElement, options, forwardFlag).
    before: null,
  • after: This is the transition callback (scope set to element that was shown):
    function(currSlideElement, nextSlideElement, options, forwardFlag).
    after: null,
  • end: This callback is invoked when the slideshow terminates (use with autostop or nowrap options):
    function(options).
    end: null,
  • easing: This is the easing method for both in and out transitions:
    easing: null,
  • easeIn: Easing for in transition:
    easeIn: null,
  • easeOut: Easing for out transition:
    easeOut: null,
  • shuffle: We set co-ordinates for shuffle animation, e.g.: {top: 15, left: 200}.
    shuffle: null,
  • animIn: This property defines how the slide animates in:
    animIn: null,
  • animOut: This property defines how the slide animates out:
    animOut: null,
  • cssBefore: This property defines the initial state of the slide before transitioning in:
    cssBefore: null,
  • cssAfter: This property defines the state of the slide after transitioning out:
    cssAfter: null,
  • fxFn: This function is used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag).
    fxFn: null,
  • height: We set the container height:
    height: 'auto',
  • startingSlide: Zero-based index of the first slide to be displayed:
    startingSlide: 0,
  • sync: We set true if in/out transitions should occur simultaneously:
    sync: 1,
  • random: We set true for random, false for sequence (not applicable to shuffle fx):
    random: 0,
  • fit: We force slides to fi t container:
    fit: 0,
  • containerResize: We can resize the container to fit the largest slide:
    containerResize: 1,
  • pause: We set true to enable pause on hover:
    pause: 0,
  • pauseOnPagerHover: We set true to pause when hovering over the pager link:
    pauseOnPagerHover: 0,
  • autostop: We set true to end slideshow after X transitions (where X == slide count):
    autostop: 0,
  • autostopCount: This is the number of transitions. This is optionally used with autostop to define X.
    autostopCount: 0,
  • delay: The additional delay (in ms) for fi rst transition. This can be negative.
    delay: 0,
  • slideExpr: This expression is for selecting slides; if something other than all children is required:
    slideExpr: null,
  • cleartype: We set true if clearType corrections should be applied for IE.
    cleartype: !$.support.opacity,
  • cleartypeNoBg: We set true to disable extra cleartype fixing; leave false to force background color setting on slides:
    cleartypeNoBg: false,
  • nowrap: We can set true to prevent the slideshow from wrapping:
    nowrap: 0,
  • fastOnEvent: This forces fast transitions when triggered manually via pager or prev/next; value is time in milliseconds:
    fastOnEvent: 0,
  • randomizeEffects: This is valid when multiple effects are used; true to make the effect sequence random:
    randomizeEffects:1,
  • Rev: This causes animations to transition in reverse:
    rev: 0,
  • manualTrump: This causes manual transition to stop an active transition instead of being ignored:
    manualTrump: true,
  • requeueTimeout: We set the delay time for requeue. It is in milliseconds.
    requeueTimeout: 250,
  • activePagerClass: This is the class name used for the active pager link:
    activePagerClass: 'activeSlide',
  • updateActivePagerLink: We set a callback function fn. It is invoked to update the active pager link (adds/removes activePagerClass style):
    updateActivePagerLink: null

Now, we will see addition of some effects with our store shop.

  1. First, let's see the shuffle effect in our shop. In the jQuery cycle initialization code block, we add the following code chunk:

    <script type="text/Javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'shuffle',
    delay: 20
    });
    });
    </script>

  2. In the browser, we can find the following changes:

    OpenCart 1.4 Template Design Cookbook

  3. Now, we will see the zoom effect for the cycle plugin. We need to add the following code block in our initialization:

    <script type="text/Javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'zoom',
    sync: false,
    delay: 20
    });
    });
    </script>

  4. If we go to the browser, then we can find zoom in action:

    OpenCart 1.4 Template Design Cookbook

  5. Again, we see the toss transition effect with our products. We need to add the following codes:

    script type="text/Javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'toss',
    sync: true,
    speed: 2000,
    delay: 20
    });
    });
    </script>

  6. We see the following effect in our store:

    OpenCart 1.4 Template Design Cookbook

  7. Now, let's see the effects of growY with our latest products. We add the following codes in our latest.tpl file:

    <script type="text/Javascript">
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'growY',
    sync: true,
    speed: 2000,
    delay: 20
    });
    });
    </script>

  8. And in the browser, we see the changes:

    OpenCart 1.4 Template Design Cookbook

There's more...

We can also set different transition effects. We are showing it here, so you can use your favourite options for the cycle. The following is a list of transition effects in our store shop:

  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • none
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom

You can use any of the above in the jQuery cycle. In this recipe, we will see some transition effects in action.

You can also use the other available options of the jQuery cycle in our OpenCart store. You can add them in the above mentioned way.

Summary

In this article we saw how we can add different jQuery plugins to expand the system.


Further resources on this subject:


OpenCart 1.4 Template Design Cookbook Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates
Published: March 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Tahsin Hasan

Tahsin Hasan is a software engineer from Bangladesh. He passed the Zend Certification Examination on 09 August, 2009 and has become the seventeenth Zend Certified Engineer (ZCE) from Bangladesh. This is the top-most certification on PHP from Zend, the developer of this outstanding scripting language. He is a tech enthusiastic and always keeps himself well-equipped with latest technologies. He has written another book, Opencart 1.4 Template Design Cookbook, with Packt.

Tahsin Hasan has profound knowledge of LAMP environment. His advanced understanding of database environments and Apache web server is an asset. He has proficiency in scalability and optimizing server performance. He has worked with Symfony, CakePHP, Codeigniter and Zend Framework.

Tahsin Hasan shares his ideas and knowledge on tahSin’s gaRage; the address is http://newdailyblog.blogspot.com. He welcomes everyone on his blog to discuss latest web technologies. You can get him at tahsin352@gmail.com.

Books From Packt


OpenCart 1.4: Beginner's Guide
OpenCart 1.4: Beginner's Guide

CakePHP 1.3 Application Development Cookbook
CakePHP 1.3 Application Development Cookbook

PHP 5 Social Networking
PHP 5 Social Networking

OpenAM
OpenAM

Expert PHP 5 Tools
Expert PHP 5 Tools

YUI 2.8: Learning the Library
YUI 2.8: Learning the Library

CodeIgniter 1.7 Professional Development
CodeIgniter 1.7 Professional Development

WordPress 3 Complete
WordPress 3 Complete


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
w
N
Z
H
q
9
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software