Module Adjustment in OpenCart: Adjusting layout

In this recipe, we will adjust the layout structure of the featured block. We will apply different style properties to the HTML tags. Currently, the block is table-based and we will convert it to div-based structure.

1. Getting started

In the featured tpl file, the default layout is table-based. We will make it div based. For that, notice the featured products are showing in a list. We can use ul li tags for this purpose.

2. How to do it…

1. First, we will remove the table By table tags I mean table, tr, td. Now, you will see that there is a foreach loop to print out the featured products. We will place the ul tag to wrap the foreach loop.

<ul id=”featured”>

<?php foreach ($products as $product) { ?>

// …

<?php } ?>

</ul>

2. Here // … means other We named the id attribute as featured.
3. And now, place the li tag within the foreach loop; just after the start of the loop.

<?php foreach ($products as $product) { ?>

<li>

// …

</li>

<?php } ?>

4. We want to show the product image on the right side and its description on the left For that we bring the image tag just after the product description. We will wrap the image tag with span and the product description with another span; we can also write styles on the stylesheets.css; like the following:

<span class=”featured-description”><a href=”<?php echo str_

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

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

<?php if ($display_price) { ?>

<br />

<?php if (!$product[‘special’]) { ?>

<span style=”font-size: 11px; color: #900;”><?php echo

$product[‘price’]; ?></span>

<?php } else { ?>

<span style=”font-size: 11px; color: #900; text- decoration: line-through;”><?php echo $product[‘price’]; ?></ span> <span style=”font-size: 11px; color: #F00;”><?php echo

$product[‘special’]; ?></span>

<?php } ?>

<?php } ?></span><span class=”featured-image”><a href=”<?php echo str_replace(‘&’, ‘&amp;’, $product[‘href’]);

?>”><img style=”border: 1px solid #ddd; padding: 3px;” src=”<?php echo $product[‘image’]; ?>” alt=”<?php echo $product[‘name’]; ?>”

/></a></span>

5. Now, we will apply some styles to our feature Go to catalog\view\theme\ shop\stylesheet and open up our css file stylesheet.css. We will add the style attribute here.
6. For the featured ID attribute, we will add some padding to the See the following code block:

#featured { padding : 5px;}

7. Also, we will apply the following styles in the li tag:

#featured li {padding: 10px 0px; }

8. At this stage, our featured block becomes like this:

9. We will show product description on the left side and image on the right So, now, we will apply the following style to the span class featured-description and featured-image:

.featured-description {float: left; padding-right: 5px;}

.featured-image img{border: 1px solid #ddd; padding: 3px;}

10. Now, our block becomes like this:

11. On mouse over, we are going to change the style like this:

#featured li:hover { background-color: #f7f7f7;}

12. And it becomes the following when we hover the It has a slight gray background color:

13. Now, we will change our text Also, change text color and hover text effect. Use the following code for this:

#featured li a { text-decoration: none; color: #3FCDFF; }

#featured li a:hover { color: #FFC62F; }

14. You can change the text color to your favorite one and also the text hover Our feature block now becomes the following:

15. When we hover our text links, it becomes like this:

16. We may also add some hover style to our eatured product If we can enlarge our image with some css style, then it will be more eye catching to our visitors. We will apply the following style:

.featured-image img:hover{ border: 1px solid #BFBFBF; padding: 7px;}

17. So, when we hover on the product image, it will become larger:

18. So, our complete css stylesheet for the feature block is like the following:

/* —- start of featured block—- */

#featured { list-style-type: none; padding: 0px; margin: 0px; padding : 5px;}

#featured li { padding: 10px 0px; border-top: 1px solid #eee;}

#featured li:hover { background-color: #f7f7f7;}

#featured li a { text-decoration: none; color: #3FCDFF; }

#featured li a:hover { color: #FFC62F; }

.featured-description { float: left; padding-right: 5px;}

.featured-image img{ border: 1px solid #ddd; padding: 3px;}

.featured-image img:hover{ border: 1px solid #BFBFBF; padding: 7px;}

/* —- end of featured block—- */

3.  See also

There are many more modules available in OpenCart. We can adjust those layouts also. But not all modules can be placed on the left and right columns.

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