OpenCart Community

Posted: **Tue Jan 18, 2011 10:25 pm**

Hai All ...

This mod will add a carousel showing clickable manufacturers logo on the footer. I used jquery.jcarousel-lite.js as the base.

Tested on OC 1.4.9.1, but should work on any version

Screen shot:

Live Demo: http://cindyonlineshop.com/demo/oc/
Published Extension: http://www.opencart.com/index.php?route ... on_id=1300

Warning: Although it is safe to apply this mod, I recommend to do backup or make a copy of the updated files.

Files to be edited:
1. catalog/view/theme/default/template/common/header.tpl
2. catalog/view/theme/default/template/common/footer.tpl
3. catalog/controller/common/footer.php

Files added:
1. catalog/view/javascript/jquery/jquery.jcarousel-lite.js
2. catalog/view/javascript/jquery/footerslider.js
3. catalog/view/theme/default/stylesheet/footerslider.css
4. image/prev.png
5. image/next.png

================
Installing
================
1. Manual Modification (Recomended ... Especially for OC installation with modified header.tpl and footer.tpl)
--------------------

Steps:
1. Upload these 5 files preserving directory structure
- catalog/view/javascript/jquery/jquery.jcarousel-lite.js
- catalog/view/javascript/jquery/footerslider.js
- catalog/view/theme/default/stylesheet/footerslider.css
- image/prev.png
- image/next.png

2. Open catalog/view/theme/default/template/common/header.tpl
- Find </head>
- Add Before </head>

Code: Select all

<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/footerslider.css" />

- Save and Update

3. Open catalog/view/theme/default/template/common/footer.tpl
- Add this line on the very top (1st line of the file)

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel-lite.js"></script>
<?php if ($manufacturers){ ?>
<div class="clear"></div>
<div id="carousel_cont">
    <a href="" class="prevsmall"><img src="./image/prev.png" alt="" /></a>
    <div id="carousel_man">
        <ul><?php foreach ($manufacturers as $manufacturer){ ?>
            <li><a href="<?php echo str_replace('&', '&', $manufacturer['href']); ?>"><img src="<?php echo 

$manufacturer['manufacturer_image']; ?>" title="<?php echo $manufacturer['name']; ?>" alt="<?php echo $manufacturer['name']; 

?>" width="80px" height="80px" /></a></li>
            <?php } ?>
        </ul>
    </div>
    <a href="" class="nextsmall"><img src="./image/next.png" alt="" /></a>
    <script type="text/javascript" src="catalog/view/javascript/jquery/footerslider.js"></script>
<div class="clear"></div>
</div>
<?php } ?>

- Save And Update

4. Open catalog/controller/common/footer.php

- Find $this->id = 'footer';

- Add Before

Code: Select all

        $this->load->model('catalog/manufacturer');
        $this->load->model('tool/seo_url');
        $this->load->model('tool/image');
        
        $this->data['manufacturers'] = array();
        
        $results = $this->model_catalog_manufacturer->getManufacturers();
        
        foreach ($results as $result) {
            $this->data['manufacturers'][] = array(
                'manufacturer_image' => $this->model_tool_image->resize($result['image'],80,80),
                'name'            => $result['name'],
                'href'            => $this->model_tool_seo_url->rewrite(HTTP_SERVER . 

'index.php?route=product/manufacturer&manufacturer_id=' . $result['manufacturer_id'])
            );
        }

- Save And Update

5. Finish and Enjoy!

------------------------
2. Easy Install (Recomended for fresh install of OC or unmodified header.tpl and footer.tpl
------------------------
Just upload all the files attached preserving directory structure
-----------------------

=============================
Notes and Enhancement
=============================
1. To change the look of the carousel, open footerslider.css and play with it.
2. If you have more than 8 brands, open the footerslider.js and see comment, or just play with it, you can learn more option by reading the comment in the jquery.jcarousel-lite.js)

ENJOY!

dvio

Posted: **Wed Jan 19, 2011 12:00 am**

I found this version of jcarousel lite
https://github.com/cheald/jcarousel-lite

It's a forked version which enables autoscroll to pause on hover.
I've dropped this version into your mod and it's looking pretty.

Thanks for your contribution. I was using jcarousel but this lite version is lighter and all I require.

Posted: **Wed Jan 19, 2011 12:39 am**

jty wrote:I found this version of jcarousel lite
https://github.com/cheald/jcarousel-lite

It's a forked version which enables autoscroll to pause on hover.
I've dropped this version into your mod and it's looking pretty.

Thanks for your contribution. I was using jcarousel but this lite version is lighter and all I require.

I WAS pretty sure that I used the forked version for the exact same reason (the pause feature). Don't know why I end up using the original file :p

Thanks for pointing that out ... Editing the tuts ...

Posted: **Sat Feb 12, 2011 3:18 am**

I Need Help,
I Intalled folwing all steps but it looks very strange in my site.

Please check

www.electropt.com

Thank you

Posted: **Sat Feb 12, 2011 5:12 am**

gsaraiva wrote:I Need Help,
I Intalled folwing all steps but it looks very strange in my site.

Please check

http://www.electropt.com

Thank you

Hi, It seems that the footerslider.js didn't load some how.

Try to load it directly:

1. Open catalog/view/theme/default/template/common/footer.tpl
2. Find

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/footerslider.js"></script>

3. Replace above line with:

Code: Select all

<script type="text/javascript">
    $("#carousel_man").jCarouselLite({
        btnNext: ".next, .nextsmall",
        btnPrev: ".prev, .prevsmall",
        mouseWheel: true,
        circular: true,
        auto: 5000,
        visible: 8,
        scroll: 8,
        speed: 1000
    });
</script>

4. Save and update.

Nb:
And also try to move this line

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel-lite.js"></script>

from footer.tpl to header.tpl on the <HEAD> section, right before </HEAD>

Hope this will work

dvio

Posted: **Sat Feb 12, 2011 6:28 am**

Hello,

Thank you for the help but did not worked...
If you have any more ideas i´ll be thankful

Posted: **Sat Feb 12, 2011 6:51 am**

Ok i think it´s working now, but very fast!!!
Let me see if i can put it slower

Posted: **Sat Feb 12, 2011 6:54 am**

Glad it works, set the scroll to 8 to slide 1 page at a time.

btw, You place the

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel-lite.js"></script>

at the wrong section, you should place it before the </HEAD> tag, not before the <HEAD> tag

and you don't need to add another <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/footerslider.css" /> coz it's already there in the <HEAD> section.

Posted: **Fri Feb 18, 2011 12:29 am**

Thank you for an excellent idea!

Can you give any advice on how to duplicate the list of brands / sizes / styles in the header?

In addition to the sidebar, I would also like to make a drop-down menu in the header... but if I just copy/paste the code, I get "undefined variable" errors. Tried to use your method of copying the "manufacturers" code block into the footer, except I copied it into the header - no luck.

Any assistance would be VERY appreciated!

Posted: **Fri Feb 18, 2011 9:34 am**

tjonnyc wrote:Thank you for an excellent idea!

Can you give any advice on how to duplicate the list of brands / sizes / styles in the header?

In addition to the sidebar, I would also like to make a drop-down menu in the header... but if I just copy/paste the code, I get "undefined variable" errors. Tried to use your method of copying the "manufacturers" code block into the footer, except I copied it into the header - no luck.

Any assistance would be VERY appreciated!

Hi tjonnyc. If you want to move the carousel to the header you're also gonna need to move the mod in footer.php to header.php, modify these 2 files:
1. catalog/view/theme/default/template/common/header.tpl
2. catalog/controller/common/header.php

Here is the modified steps to place the carousel on header:
1. Upload these 5 files preserving directory structure
- catalog/view/javascript/jquery/jquery.jcarousel-lite.js
- catalog/view/javascript/jquery/footerslider.js
- catalog/view/theme/default/stylesheet/footerslider.css
- image/prev.png
- image/next.png

2. Open catalog/view/theme/default/template/common/header.tpl
- Find </head>
- Add Before </head>

Code: Select all

<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/footerslider.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel-lite.js"></script>

- Find

Code: Select all

<script type="text/javascript"><!-- 
function getURLVar(urlVarName) {

- Add before above code

Code: Select all

<?php if ($manufacturers){ ?>
<div class="clear"></div>
<div id="carousel_cont">
    <a href="" class="prevsmall"><img src="./image/prev.png" alt="" /></a>
    <div id="carousel_man">
        <ul><?php foreach ($manufacturers as $manufacturer){ ?>
            <li><a href="<?php echo str_replace('&', '&', $manufacturer['href']); ?>"><img src="<?php echo $manufacturer['manufacturer_image']; ?>" title="<?php echo $manufacturer['name']; ?>" alt="<?php echo $manufacturer['name']; ?>" width="80px" height="80px" /></a></li>
            <?php } ?>
        </ul>
    </div>
    <a href="" class="nextsmall"><img src="./image/next.png" alt="" /></a>
    <script type="text/javascript" src="catalog/view/javascript/jquery/footerslider.js"></script>
<div class="clear"></div>
</div>
<?php } ?>

- Save And Update

4. Open catalog/controller/common/header.php

- Find $this->id = 'header';

- Add Before

Code: Select all

        $this->load->model('catalog/manufacturer');
        $this->load->model('tool/seo_url');
        $this->load->model('tool/image');
        
        $this->data['manufacturers'] = array();
        
        $results = $this->model_catalog_manufacturer->getManufacturers();
        
        foreach ($results as $result) {
            $this->data['manufacturers'][] = array(
                'manufacturer_image' => $this->model_tool_image->resize($result['image'],80,80),
                'name'            => $result['name'],
                'href'            => $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/manufacturer&manufacturer_id=' . $result['manufacturer_id'])
            );
        }

- Save And Update

4. Finish

NB: If you need to set the margins, just modify the css file included.

Posted: **Mon Feb 28, 2011 4:39 am**

Hi dvio, this is great, many thanks for this! If I wanted to change this to display the categories and the respective images instead of the manufacturers would this be an easy change to make? Could you point me in the right direction? Thanks.

Posted: **Tue Mar 01, 2011 2:46 am**

Hello Devio,

Many thanks for your reply.

I have modified the footer.php according to your suggestion. However, the manufacturers' images do not load up and the width is also not right. I have included an image for your easy understanding.

Please check what I could do next.

Thanks a million!
Markal

p.s. Here below is the footer.php of my template

<?php
class ControllerCommonFooter extends Controller {
protected function index() {
$this->language->load('common/footer');

$this->data['text_powered_by'] = sprintf($this->language->get('text_powered_by'), $this->config->get('config_store'), date('Y', time()));

$this->data['text_home'] = $this->language->get('text_home');
$this->data['text_special'] = $this->language->get('text_special');
$this->data['text_account'] = $this->language->get('text_account');
$this->data['text_login'] = $this->language->get('text_login');
$this->data['text_logout'] = $this->language->get('text_logout');
$this->data['text_cart'] = $this->language->get('text_cart');
$this->data['text_checkout'] = $this->language->get('text_checkout');

$this->data['home'] = $this->url->http('common/home');
$this->data['special'] = $this->url->http('product/special');
$this->data['account'] = $this->url->https('account/account');
$this->data['logged'] = $this->customer->isLogged();
$this->data['login'] = $this->url->https('account/login');
$this->data['logout'] = $this->url->http('account/logout');
$this->data['cart'] = $this->url->http('checkout/cart');
$this->data['checkout'] = $this->url->https('checkout/shipping');

$this->load->model('catalog/manufacturer');
$this->load->model('tool/seo_url');

$this->data['manufacturers'] = array();

$results = $this->model_catalog_manufacturer->getManufacturers();

foreach ($results as $result) {
$this->data['manufacturers'][] = array(
'manufacturer_image' => $result['image'],
'name' => $result['name'],
'href' => $this->model_tool_seo_url->rewrite(HTTP_SERVER .

'index.php?route=product/manufacturer&manufacturer_id=' . $result['manufacturer_id'])
);
}
$this->id = 'footer';

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/footer.tpl')) {
$this->template = $this->config->get('config_template') . '/template/common/footer.tpl';
} else {
$this->template = 'default/template/common/footer.tpl';
}

if ($this->config->get('google_analytics_status')) {
$this->data['google_analytics'] = $this->config->get('google_analytics_code');
} else {
$this->data['google_analytics'] = '';
}

$this->render();
}
}
?>

Posted: **Mon Mar 14, 2011 9:54 pm**

I have just installed Carousel on v1.4.9.3, however no images are showing - It is a fresh install of OpenCart using the default theme.
http://www.pixeda.co.uk/store/

Any help appreciated.

Mike

Posted: **Sat Jun 04, 2011 7:03 am**

Installed on 1.4.9.5 FANTASTIC!!! Thanks

Posted: **Sat Jun 25, 2011 7:17 am**

I have had it working on my OC 1.4.9.5 and as I stated, it's awesome; however I have a question: all of a sudden, on ie 9, the carousel is adding a blank space under the brands, which makes it look bad. I have tested on Firefox, Safari, Chrome and they all work absolutely great, but on ie 9, I get this.. Any idea on how I can get this corrected, or that is something that I will have to live with until the improve the explorer? My site is semodelproducts.com.

Again, Thanks

Posted: **Sat Aug 06, 2011 2:20 am**

hi

will it work on 1.4.9.4?

Posted: **Sat Aug 06, 2011 2:26 am**

also...can we have 2 carousels on home page? one for manufacturers and another one for featured products?

Posted: **Fri Aug 12, 2011 7:04 am**

miradoro wrote:hi

will it work on 1.4.9.4?

Actually i installed this extension on my Kosmetik Herbal store. But i fount a problem. the manufacturer logo is disappear. I also use the same oc as you use, oc 1.4.9.4. I just send a message to devio. I hope we can resolved the problem soon

Thanks

Posted: **Fri Nov 11, 2011 5:31 am**

Hello there,

I have a question regarding the size of the manufacturer logos. I changed the size from 80x80 to 160X160, the boxes changes sixe but not the images. Could this be changed or does the logo need to be 80x80?

Thanks, great mod!

Posted: **Wed Feb 01, 2012 10:59 pm**

hello, okay? I am a user prestashop, and was looking for a module manufacturers in the slide, and I came across this, you can adapt a module for prestashop 1.4.5.1 version? I am willing to give a small donation if necessary.

greetings
Rui Ribeiro

OpenCart Community

[HOW TO] Add Manufacturer Carousel on Footer

[HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel at Footer

Re: [HOW TO] Add Manufacturer Carousel at Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Images are not showing

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer

Re: [HOW TO] Add Manufacturer Carousel on Footer