Dynamic Content in OpenCart: Displaying products vertically

We have seen the horizontal carousel so far. In this recipe, we will see how we can use the vertical carousel. We make the carousel horizontal for the home module of the latest products. Because on the left and right column, we have less space, we can use the vertical carousels there. It will utilize our space.

1. Getting started

Open the latest.tpl file in our favourite editor under catalog\view\theme\shop\ template\module.

2. How to do it

To add the vertical carousel, we will follow these steps:

1. First, we will add the required stylesheet and JavaScript files. As this is a new recipe, we are adding jCarousel again:

<script type=”text/javascript” src=”catalog/view/javascript/ jQuery/jcarousel/lib/jquery.jcarousel.js”></script>

<link rel=”stylesheet” type=”text/css” href=”catalog/view/ javascript/jquery/jcarousel/skins/tango/skin.css” />

2. You need to remove the table structure and replace it with ul See the following code block:

<table cellpadding=”2″ cellspacing=”0″ style=”width: 100%;”>

//…

</table>

3. Remove it and replace it with:

<ul id=”latestcarousel” class=”jcarousel-skin-tango”>

//…

</ul>

4. Also, we will remove the following code:

<tr>

<td valign=”top” width=”1″>

//…

</td>

</tr>

5. We replace it with:

<li>

//…

</li>

6. We need to initialize the jCarousel with the following code:

<script type=”text/javascript”> jQuery(document).ready(function() {

jQuery(‘#latestcarousel’).jcarousel({

scroll: 1,

vertical: true, visible: 3,

auto: 1, rtl: true,

wrap: ‘circular’

});

});

</script>

7. Here, we use the previous options as described Additionally, we use the vertical option. By setting this to true, we convert our carousel from horizontal to vertical.

8. We will see our carousel in action in the browser:

9. Now, we will change the width of our For the vertical carousel, we need to set the width differently. We will change the width to auto in the following code:

.jcarousel-skin-tango .jcarousel-container-vertical {

width: auto;

height: 245px;

padding: 40px 20px;

}

10. This makes our carousel like this:

11. The product images are on the left We increase the width of the carousel. So, the images will be placed in the center:

.jcarousel-skin-tango .jcarousel-clip-vertical {

width: 135px;

height: 245px;

}

12. This makes our carousel look like this:

13. Our navigational button is slightly left justified. We will place it at the We change the left attributes to 63px.

.jcarousel-skin-tango .jcarousel-next-vertical {

position: absolute;

bottom: 5px;

left: 63px;

width: 32px;

height: 32px;

cursor: pointer;

background: transparent url(next-vertical.png) no-repeat 0 0;

}

14. If we refresh our browser, we see the changes:

15. We will change the previously downloaded horizontal buttons to Open up the image with GIMP and create the duplicate image. Right click on the image.

Then, go to Image | Transform | Rotate 90 clock-wise. Save the image as next-vertical.png.

16. Again, open up our downloaded horizontal buttons and create the duplicate Right click on the image. Then, go to Image | Transform | Rotate 90 Anti-clock-wise. And, save the image as prev-vertical.png:

17. We are going to show the product image on the left side and the product description on the right We make the following code adjustment:

<li><div style=”float: left;”><a href=”<?php echo str_

replace(‘&’, ‘&amp;’, $product[‘href’]); ?>”><img src=”<?php echo

$product[‘image’]; ?>” alt=”<?php echo $product[‘name’]; ?>” /></ a></div>

<div style=”float: right;”><a href=”<?php echo str_

replace(‘&’, ‘&amp;’, $product[‘href’]); ?>”><?php echo

$product[‘name’]; ?></a>

//…

<?php } ?></div>

18. As our product display width is small, we need to widen the We change the following code:

.jcarousel-skin-tango .jcarousel-item { width: 125px;

height: 200px;

}

19. Then, our vertical carousel becomes like this:

20. We add border and padding top property to our We add the following code for this styling:

.jcarousel-skin-tango .jcarousel-item-vertical {

margin-bottom: 10px;

border: 1px solid #ddd; padding-top: 10px;

}

21. We also add a hover effect to our border:

.jcarousel-skin-tango .jcarousel-item-vertical:hover{

border: 1px solid #aaa;

}

22. When we go to the browser, we find our changes:

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.