Post by dvio » 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:
Image

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

Attachments

mancar.jpg

Screenshoot - mancar.jpg (39.45 KiB) Viewed 19948 times

Last edited by dvio on Thu Jan 20, 2011 11:54 pm, edited 4 times in total.

[Free - MOD] Collapse/Expandable Modules


User avatar
New member

Posts

Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta

Post by jty » 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.

jty
Active Member

Posts

Joined
Sat Aug 30, 2008 8:19 am

Post by dvio » 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 ... :D

[Free - MOD] Collapse/Expandable Modules


User avatar
New member

Posts

Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta

Post by gsaraiva » 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

Newbie

Posts

Joined
Sun Jan 30, 2011 5:16 am

Post by dvio » 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

[Free - MOD] Collapse/Expandable Modules


User avatar
New member

Posts

Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta

Post by gsaraiva » 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

Newbie

Posts

Joined
Sun Jan 30, 2011 5:16 am

Post by gsaraiva » 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

Newbie

Posts

Joined
Sun Jan 30, 2011 5:16 am

Post by dvio » 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.

[Free - MOD] Collapse/Expandable Modules


User avatar
New member

Posts

Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta

Post by tjonnyc » 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!

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by dvio » 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.

[Free - MOD] Collapse/Expandable Modules


User avatar
New member

Posts

Joined
Thu Aug 05, 2010 8:57 pm
Location - Jakarta

Post by drnhdg » 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.

Newbie

Posts

Joined
Tue Nov 09, 2010 12:38 am

Post by Markal » 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();
}
}
?>

Attachments

Footer Manufacturer.jpg

Footer Manufacturer.jpg (37.04 KiB) Viewed 19628 times


Find the best gadgets here ---> http://www.Gadgetshunter.com


Newbie

Posts

Joined
Sun Mar 07, 2010 4:33 am

Post by 996redbull » 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

Newbie

Posts

Joined
Mon Mar 14, 2011 9:49 pm

Post by m_saraga » Sat Jun 04, 2011 7:03 am

Installed on 1.4.9.5 FANTASTIC!!! Thanks

New member

Posts

Joined
Tue May 17, 2011 1:31 am
Location - Miami, FL US

Post by m_saraga » 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

New member

Posts

Joined
Tue May 17, 2011 1:31 am
Location - Miami, FL US

Post by miradoro » Sat Aug 06, 2011 2:20 am

hi

will it work on 1.4.9.4?

New member

Posts

Joined
Tue May 03, 2011 9:43 pm

Post by miradoro » 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?

New member

Posts

Joined
Tue May 03, 2011 9:43 pm

Post by kosmetikherbal » 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

Web official Slamet Purwanto
Web partner:


User avatar

Posts

Joined
Thu Aug 04, 2011 7:45 am
Location - Cirebon, Jawa Barat, Indonesia

Post by littleme » 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!

Newbie

Posts

Joined
Tue Jul 05, 2011 2:17 am

Post by Rui16 » 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

Newbie

Posts

Joined
Wed Feb 01, 2012 9:52 pm
Who is online

Users browsing this forum: No registered users and 4 guests