Jump to content

Products Carousel Free Prestashop 1.6 module


Recommended Posts

  • Replies 263
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Responsive Products Carousel Module Prestashop 1.6 module:  themeszonecarousel.zip version: 0.9.5 by https://themes.zone   update 0.9.5: Added options provided by @myselfidem update 0.9.4: Fixed fe

Hello,   How to duplicate themeszonecarousel ?   I've made like this :   1 - Rename the main folder : themeszonecarousel2   2 - Rename : themeszonecarousel.php as themeszonecarousel2.php   3

Hello, thanks for this free module, it's realy cool.   Here is how i used Hook to have 3 different themeszonecarousel on my home page:   1 - Add custom hook in /themes/yourtheme/index.tpl   add the f

Posted Images

Hello,

 

At first save your original style.css file and you can try mine attached given before (post #195).

 

The path where is located the style.css file is :

 

.\modules\themeszonecarousel\css\style.css

 

Tip : compare your file with mine and adapt to your needs ;-)

 

Using Firebug with Firefox can help !

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

ok  !
 
well done!
just edited length of the title bar and color
for the height of the carousel didnt found where to edit ..but it seems ok now
just a question would edit size and color of the owl button next and previous
with firebug i have found location but into the lines there are not circle size and color ..can you indicate me how to edit ?

www.ciboecoccole.com

Share this post


Link to post
Share on other sites

Hello,

 

You can try these changes Inside : style.css file :

.tz-carousel .title_block { /* titre et couleur du bloc */
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background: #993698;
    border: 1px solid #7a2979;
    border-bottom: none;
    border-image: none;
    border-radius: 5px;
    border-width: 1px 1px medium;
    font-family: "Open Sans",sans-serif;
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    line-height: 20px;
    margin: 0 0 16px;  /*20px;*/
    padding: 14px 20px 17px;
    position: relative;
    text-transform: none;
    width: 71.5%;
    margin-left: 15px;
}

And about buttons color :

.owl-buttons .owl-prev, .owl-buttons .owl-next {
    background-color: #993698 !important; 

Hope that can help !

 

Friendly

 

*Edit : I think you can disable the button "In stock"

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hola:

 

Gran trabajo¡¡¡¡

 

¿hay alguna manera de poner que el orden en que se muestran los productos sea aleatorio?

 

Gracias

 

Hello:
 
Great job
 
Is there any way to put the order in which the products are displayed is random?
 
Thank you

Share this post


Link to post
Share on other sites
  • 2 weeks later...
  • 2 weeks later...
Thank you Theme Zones for a great module, it works well in 1.6.1.1 .  Thanks also to myselfidem for all the extra bits & fixes! It's a joy to see you all working together to help the Presta community.

I do have one thing to ask.. after hunting and changing many things, and that is what piece of code do I change to alter the "product container" ?  I think that's what it is? I'm using the default theme with the home featured module above the carousel. But the carousel isn't the same width as the home featured module (looks about 20px smaller), and so in responsive mode the styling change differently, with the "add to cart" & "More" buttons side by side in the home featured module, but on top of each other in the caousel. I'd like them to look the same all of the time.

 

How do I match the carousel width to the one of the home featured module? It would be much appreciated, thank you. Matt.

Share this post


Link to post
Share on other sites

Hello,

 

Maybe you can try this hook.tpl file using PS 1.6.1.1 and let us know if this work !

 

This new hook.tpl file match the product-list.tpl file for PS 1.6.1.1

 

I only removed the "quick-view-wrapper-mobile".

 

However I think it's needed to improve the hook.tpl and style.css files to do the job, about size image and tabs position !

hook.zip

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hi Myselfidem & All ,  that hook.tpl file did the trick!  (in keeping both the carousel & homefeatured module layouts the same in responsive mode)

 

Tested & works in default template - 1.6.1.1

 

Thank you very much.   Cheers, Matt.

Share this post


Link to post
Share on other sites

Great module! Thank you!

Is there a way to put on sale or/and discounted (price-drop) products to this carousel? I saw that this could be in php file, but I don't know the code...

Share this post


Link to post
Share on other sites

Hello,

 

I suggest to add a new feature to disable the Quick View only on the ThemesZoneCarousel.

 

Adding some code :

 

themeszonecarousel.php :

protected function initConfig() {
 $config['tzc_quick_view'] = true;  (on line 77)
 
 --------------------------------------
 
 public function hookDisplayHome($params) {
 
  'tzc_quick_view' => $config['tzc_quick_view'] ? true : false, (on line 143) 
  
  ------------------------------------
  
 public function renderForm() {
   
   array(  (from line 306)
       'type' => 'switch',
       'label' => $this->l('Show Quick View'),
       'name' => 'tzc_quick_view',
       'is_bool' => true,
       'desc' => $this->l('Should the Quick View button be displayed?'),
       'values' => array(
             array(
                  'id' => 'active_on',
                          'value' => true,
                          'label' => $this->l('Yes')
                     ),
                            array(
                                'id' => 'active_off',
                                'value' => false,
                                'label' => $this->l('No')
                            )
                        ),
                    ),
                    
-------------------------------------

  public function postProcess() {
  
   $config['tzc_quick_view'] = Tools::getValue('tzc_quick_view');  (on line 498)                 

Inside : hook.tpl :

{if isset($quick_view) && $tzc_quick_view}

Now we can add Quick View for all product except for ThemeZoneCarousel !

 

Tested and works fine for me.

 

If needed here is the new French tanslated file.

 

Friendly

 

Please cand you upload the correct themeszonecarousel.php and hook.tpl for applying theses changes.

 

I've tried and it doesn't work for me.

Share this post


Link to post
Share on other sites

Misunderstanding :) I want to show prices-drop products in carousel. In admin we can select best sellers, homecategory, one category. Here I need to select products who have discounted price. Or if it's too hard, on sale products are good too. Can you solve it?

Share this post


Link to post
Share on other sites

Yes, this is a solution. Or I can put it to homefeatured. But it's not automatic for discounted products  ;) I think it's not impossible to put some code to themeszonecarousel.php to find on sale or discounted products. I will look after, but if somebody has the solution, please write it here :) I'm not a php [spam-filter]...

Share this post


Link to post
Share on other sites

I have another problem with products carousel.

 

On the HomePage, when I used "Quick View" on any featured product the popup with product information jump and the Product Carousel block is above this popup hiding the Quick View.

 

Is there any way that this block is always on the bottom for quick view is displayed correctly?

 

Here is a screenshot of my problem: 
http://imgur.com/o1V50z3

 

 

EDIT: I found the solution. I had removed z-index: 10000 !important; from style.css in the folder of the module and now is displaying correctly.

Edited by snowlis (see edit history)

Share this post


Link to post
Share on other sites

Excelente Trabajo,

 

Me gustaría extender al modulo para mostrar mas de una categoría, me podría orientar. 

 

Gracias

 

 

----------------------------

 

Great Job!

 
I would like to extend the module to display more than one category, could guide me.
 
Thank you

 

 

Prestashop 1.6.0.14

Share this post


Link to post
Share on other sites
  • 2 weeks later...
 Hi i am using Themes Zone Manufacturers Slider for prestashop_1.6.0.14 .

All is ok but it slides with interval and i want to slide it continuously on pc,mobile,tablet.Please help me to solve this problem. There is no option to do this . Thank you

Edited by razaro
Using Caps (see edit history)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

 

Responsive Products Carousel Module Prestashop 1.6 module
version: 0.9.5

by https://themes.zone

 

update 0.9.5: Added options provided by @myselfidem

update 0.9.4: Fixed featured products bug (typo indeed), added functionality kindly provided by @myselfidem

update 0.9.3: Added fixes kindly provided by @myselfidem and functionality to hide Buttons and Qty

update 0.9.2: Small CSS Fix.

update 0.9.1: Added functionality, now you can also chose a category to display in the carousel.

 

LIVE DEMO

 

Please share it with others:

@ThemesZone

 

Help and Support at https://themes.zone

 

The live demo is down ;/ 

Anyone has it working, so i can take a look? 

Share this post


Link to post
Share on other sites
  • 4 weeks later...

Hello.Congrats for this nice module.I would like to appply this module to another hook than can applied by default. Can i do that?Could you explain to me the procedure to do this?

 

 

Thank you very much.

Share this post


Link to post
Share on other sites

Hello

 

Well the problem is that you can only have one instance of the module on the page so far, for now to achieve what you need you'd have to duplicate and rename the module for each of the 5 blocks. So you will have to duplicate and rename the module to show categories, featured, products, recent, products, best sellers and specials. This way you will get 5 separate modules that can be separately configured :(

 

 

No, Unfortunately it will take renaming the folder, the name of the module in the code and config XML files, renaming configuration variables in the code so it will take some knowledge.

 

hi themezone, thanks for this great module.

i use 3 column layout and i've duplicate this module to get 2 categories displayed, on homepage.. one placed on displayhome and the other one placed on right column. only carousel on home that appear, the one on right column just showing tittle block no slide. but in other page carousel on the right column is normally displayed. do i need to change id and class to get this duplicate working with other carousel hooked in same page ? can you tell me what variables that supposed to be change ?

 

thanks :)

 

 

==== edit ====

i already solve my problem.. its true i need to change class and id as well in all file include js and css.

many thanks for this module

Edited by grayscale-03 (see edit history)

Share this post


Link to post
Share on other sites
  • 4 weeks later...

Hello,

 

Here is a tip to change the order's products Inside themeszonecarousel

 

Inside the file themeszonecarousel.php

 

Change this line  (line 175):

 

 

$products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10));

To

 

$products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10), 'position', 'DESC');

 

You can now use 'DESC' or 'ASC' if you want !

 

Friendly

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hi, This module is very nice, but i would ask you

what i have to do to make image's hover effect?

 

Unfortunately i'm not a web master but only a web designer, so i take to change code but is very difficult for me :D

 

 

 

Thank you

Share this post


Link to post
Share on other sites

         Hello! I downloaded and installed this module and hooked it to the "displayHome". I set the module to show products from a specific category. All setting are set to "Yes". All good for now.

         In the Front-Office, the module is shown, but I have no "Add to cart" button or "More button". Also, the navigation isn't shown. Moreover, products with special prices are strangely shown with both of the normal and special price, with the same style. When I click on a product from the carousel, nothing happens (I expect a redirect to the product page)

         I use Prestashop 1.6.1.4 with SportsTheme template. I attached a print screen of the carousel, but here is the website, for a live preview (it is used only for test, so don't wonder the diffrences between domain name and site content): Weddingsites

 

        Any help would be kindly appreciated! Thank you, and Keep up the Good Work!

post-1186982-0-07070500-1454937008_thumb.png

Share this post


Link to post
Share on other sites
  • 2 months later...

Hello, thanks for this free module, it's realy cool.
 
Here is how i used Hook to have 3 different themeszonecarousel on my home page:
 
1 - Add custom hook in /themes/yourtheme/index.tpl
 

add the folowing lines at end of file

<div>{hook h='displayHomeCarouselCat1'}</div>
<div>{hook h='displayHomeCarouselCat2'}</div>
<div>{hook h='displayHomeCarouselNewProducts'}</div>

2 - Add 3 hook functions in /modules/themeszonecarousel/themeszonecarousel.php

    public function hookDisplayHomeCarouselCat1($params) 
    	{
        $config = json_decode(Configuration::get($this->name), true);

        $product_set = array();
  		
 		$title = "Carousel Categorie 1";  // Carousel title
 		$cat_id = 42;  //  <- the category id you want to display
 		$product_set = $this->getProducts($cat_id); // set of product for your carousel
 		
        $this->smarty->assign(array(
            'items_wide' => $config['items_wide'],
            'items_desktop' => $config['items_desktop'],
            'items_desktop_small' => $config['items_desktop_small'],
            'items_tablet' => $config['items_tablet'],
            'items_mobile' => $config['items_mobile'],
            'items_set' => $config['items_set'],
            'items_number' => $config['items_number'],
            'slide_speed' => $config['slide_speed'],
            'title' => $title,
            'products' => $product_set,
            'tzc_autoplay' => $config['tzc_autoplay'] ? 'true' : 'false',
            'tzc_nav' => $config['tzc_nav'] ? 'true' : 'false',
            'tzc_but_show' => $config['tzc_but_show'] ? true : false,
            'tzc_more_show' => $config['tzc_more_show'] ? true : false,
            'tzc_qty_show' => $config['tzc_qty_show'] ? true : false,
            'tzc_new_show' => $config['tzc_new_show'] ? true : false,
            'cat_id' => $cat_id,
            'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
            'type_product' => 'carousel_cat1',  // <- variable used in the top of hook.tpl to set the good id
        ));

        return $this->display(__FILE__, 'hook.tpl'); 		
        }

    public function hookDisplayHomeCarouselCat2($params) 
    	{
        $config = json_decode(Configuration::get($this->name), true);

        $product_set = array();
  		
 		$title = "Carousel Categorie 2";  // Carousel title
 		$cat_id = 26;  //  <- the category id you want to display
 		$product_set = $this->getProducts($cat_id); // set of product for your carousel
 		
        $this->smarty->assign(array(
            'items_wide' => $config['items_wide'],
            'items_desktop' => $config['items_desktop'],
            'items_desktop_small' => $config['items_desktop_small'],
            'items_tablet' => $config['items_tablet'],
            'items_mobile' => $config['items_mobile'],
            'items_set' => $config['items_set'],
            'items_number' => $config['items_number'],
            'slide_speed' => $config['slide_speed'],
            'title' => $title,
            'products' => $product_set,
            'tzc_autoplay' => $config['tzc_autoplay'] ? 'true' : 'false',
            'tzc_nav' => $config['tzc_nav'] ? 'true' : 'false',
            'tzc_but_show' => $config['tzc_but_show'] ? true : false,
            'tzc_more_show' => $config['tzc_more_show'] ? true : false,
            'tzc_qty_show' => $config['tzc_qty_show'] ? true : false,
            'tzc_new_show' => $config['tzc_new_show'] ? true : false,
            'cat_id' => $cat_id,
            'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
            'type_product' => 'carousel_cat2', // <- variable used in the top of hook.tpl to set the good id
        ));

        return $this->display(__FILE__, 'hook.tpl'); 		
        }

    public function hookDisplayHomeCarouselNewProducts($params) 
    	{
        $config = json_decode(Configuration::get($this->name), true);

        $product_set = array();
 
 		
 		$title = "Our new products";  // Carousel title
 		$cat_id = 2; // root cat 
 		$product_set = $this->FeaturedProducts($config['items_number']); // new products set
 		
        $this->smarty->assign(array(
            'items_wide' => $config['items_wide'],
            'items_desktop' => $config['items_desktop'],
            'items_desktop_small' => $config['items_desktop_small'],
            'items_tablet' => $config['items_tablet'],
            'items_mobile' => $config['items_mobile'],
            'items_set' => $config['items_set'],
            'items_number' => $config['items_number'],
            'slide_speed' => $config['slide_speed'],
            'title' => $title,
            'products' => $product_set,
            'tzc_autoplay' => $config['tzc_autoplay'] ? 'true' : 'false',
            'tzc_nav' => $config['tzc_nav'] ? 'true' : 'false',
            'tzc_but_show' => $config['tzc_but_show'] ? true : false,
            'tzc_more_show' => $config['tzc_more_show'] ? true : false,
            'tzc_qty_show' => $config['tzc_qty_show'] ? true : false,
            'tzc_new_show' => $config['tzc_new_show'] ? true : false,
            'cat_id' => $cat_id,
            'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
            'type_product' => 'new_product', // <- variable used in the top of hook.tpl to set the good id        ));

        return $this->display(__FILE__, 'hook.tpl');
		
        }

3 - Register hooks
 

modify install method of /modules/themeszonecarousel/themeszonecarousel.php

 

change

    public function install() {

        return  parent::install() &&
                $this->initConfig() &&
                $this->registerHook('displayHeader') &&
                $this->registerHook('displayCarousel') &&
                $this->registerHook('displayHome');
    }

 by

    public function install() {

        return  parent::install() &&
                $this->initConfig() &&
                $this->registerHook('displayHeader') &&
                $this->registerHook('displayCarousel') &&
                $this->registerHook('displayHomeCarouselCat1') &&
                $this->registerHook('displayHomeCarouselCat2') &&
                $this->registerHook('displayHomeCarouselNewProducts');
    }

Note: I had my custom hook but i also removed the displayhome hook !

 

Reset ( or uninstall + install again) the module

 

4 - Modify modules/themeszonecarousel/views/templates/hook/hook.tpl
 

Change

<!-- Products list -->
<ul id="owl_slider">

 by

<!-- Products list -->
<ul id="{if $type_product == "carousel_cat1"}owl_slider_carousel_cat1{/if}{if $type_product == "carousel_cat2"}owl_slider_carousel_cat1{/if}{if $type_product == "new_product"}owl_slider_carousel_new_product{/if}" class="owl-carousel product_list grid">

Replace the javascript section at the end of file

    <script>

        $(document).ready(function() {

            var owl_slider_carousel_cat1 = $("#owl_slider_carousel_cat1");
            var owl_slider_carousel_cat2 = $("#owl_slider_carousel_cat2");
            var owl_slider_carousel_new_product = $("#owl_slider_carousel_new_product");
                        
            owl_slider_carousel_cat1.owlCarousel({

                items : {$items_wide}, //10 items above 1000px browser width
                itemsDesktop : [1000,{$items_desktop}], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,{$items_desktop_small}], // 3 items betweem 900px and 601px
                itemsTablet: [600,{$items_tablet}], //2 items between 600 and 0;
                itemsMobile : {$items_mobile}, // itemsMobile disabled - inherit from itemsTablet option
                autoPlay: {$tzc_autoplay},
                navigation: {$tzc_nav},
                navigationText: false,
                pagination: false

            });

            owl_slider_carousel_cat2.owlCarousel({

                items : {$items_wide}, //10 items above 1000px browser width
                itemsDesktop : [1000,{$items_desktop}], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,{$items_desktop_small}], // 3 items betweem 900px and 601px
                itemsTablet: [600,{$items_tablet}], //2 items between 600 and 0;
                itemsMobile : {$items_mobile}, // itemsMobile disabled - inherit from itemsTablet option
                autoPlay: {$tzc_autoplay},
                navigation: {$tzc_nav},
                navigationText: false,
                pagination: false

            });


            owl_slider_carousel_new_product.owlCarousel({

                items : {$items_wide}, //10 items above 1000px browser width
                itemsDesktop : [1000,{$items_desktop}], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,{$items_desktop_small}], // 3 items betweem 900px and 601px
                itemsTablet: [600,{$items_tablet}], //2 items between 600 and 0;
                itemsMobile : {$items_mobile}, // itemsMobile disabled - inherit from itemsTablet option
                autoPlay: {$tzc_autoplay},
                navigation: {$tzc_nav},
                navigationText: false,
                pagination: false

            });

        });
    </script>

Then you should have 3 diffrents carousels on you homepage
 
Hopes It will help
 
Sébastien

Edited by polykodesas (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites
  • 3 weeks later...

Hello apologize for my English.
I have a problem with this module, when I save the module configuration I get the following error.
Notice on line 232 in file /home/public_html/tienda/cache/smarty/compile/98/c8/6f/98c86fde55dfadf8cf6e4fdad952d2de51cacb2c.file.form.tpl.php
[8] Undefined offset: 1

Notice on line 232 in file /home/public_html/tienda/cache/smarty/compile/98/c8/6f/98c86fde55dfadf8cf6e4fdad952d2de51cacb2c.file.form.tpl.php
[8] Undefined offset: 2

Notice on line 232 in file /home/public_html/tienda/cache/smarty/compile/98/c8/6f/98c86fde55dfadf8cf6e4fdad952d2de51cacb2c.file.form.tpl.php
[8] Undefined offset: 3

Notice on line 232 in file /home/public_html/tienda/cache/smarty/compile/98/c8/6f/98c86fde55dfadf8cf6e4fdad952d2de51cacb2c.file.form.tpl.php
[8] Undefined offset: 5

Notice on line 232 in file /home/public_html/tienda/cache/smarty/compile/98/c8/6f/98c86fde55dfadf8cf6e4fdad952d2de51cacb2c.file.form.tpl.php
[8] Undefined offset: 6

Any idea how I can fix it?
Thank you.

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Hello,

 

im trying to edit this module themeszonecarousel/views/templates/hook/hook.tpl file but for some reason i cant save any changes i made and the same thing with this module css files. HELP!

Edited by krypi (see edit history)

Share this post


Link to post
Share on other sites
  • 4 weeks later...

Great module, thank you.

 

I'm looking to modify it so that it includes the price class and is able to be divided into the default bootstrap theme tabs.
Can someone please help me find a way to do so?
 
Thank you in advance!

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Can anyone explain how i can add a second slider on a CMS page? I currently have the slider set on this page:

http://grafomantestsite.be/nl/content/13-webshop

 

But i want to add another one at the bottom of the page with the newest products.

 

Thanks in advance!

 

Grafoman.

 

Edit: removed a question i managed to solve myself

post-1010307-0-56513900-1467021421_thumb.png

Edited by JackiiBE (see edit history)

Share this post


Link to post
Share on other sites
  • 1 month later...
  • 3 weeks later...
  • 2 weeks later...

hello ,

 

Thank you very much, this is a great module!

 

But I have a problem...

 

[EDIT]

 

I installed it and enabled it and when I choose any other option about the products that will be displayed it works great, but not when I choose a category a category that contains subcategories.

 

Is there any way that we can add this functionality ?

 

I work on 1.6.0.9 version of prestashop with modez-digital as a theme.

 

thanks again

Edited by artimidi (see edit history)

Share this post


Link to post
Share on other sites
  • 2 weeks later...
  • 2 months later...
  • 1 month later...
  • 1 month later...
  • 4 weeks later...

good module!

if you want random products, put:

 

<div style="display:none">{shuffle($products)}</div>

 

in hook.tpl file 

 

after:

{if isset($products) && $products}

 

thanks again for good module

  • Like 1

Share this post


Link to post
Share on other sites
  • 2 months later...

Hello, thanks for this free module, it's realy cool.

 

Here is how i used Hook to have 3 different themeszonecarousel on my home page:

 

1 - Add custom hook in /themes/yourtheme/index.tpl

 

add the folowing lines at end of file

<div>{hook h='displayHomeCarouselCat1'}</div>
<div>{hook h='displayHomeCarouselCat2'}</div>
<div>{hook h='displayHomeCarouselNewProducts'}</div>

2 - Add 3 hook functions in /modules/themeszonecarousel/themeszonecarousel.php

    public function hookDisplayHomeCarouselCat1($params) 
    	{
        $config = json_decode(Configuration::get($this->name), true);

        $product_set = array();
  		
 		$title = "Carousel Categorie 1";  // Carousel title
 		$cat_id = 42;  //  <- the category id you want to display
 		$product_set = $this->getProducts($cat_id); // set of product for your carousel
 		
        $this->smarty->assign(array(
            'items_wide' => $config['items_wide'],
            'items_desktop' => $config['items_desktop'],
            'items_desktop_small' => $config['items_desktop_small'],
            'items_tablet' => $config['items_tablet'],
            'items_mobile' => $config['items_mobile'],
            'items_set' => $config['items_set'],
            'items_number' => $config['items_number'],
            'slide_speed' => $config['slide_speed'],
            'title' => $title,
            'products' => $product_set,
            'tzc_autoplay' => $config['tzc_autoplay'] ? 'true' : 'false',
            'tzc_nav' => $config['tzc_nav'] ? 'true' : 'false',
            'tzc_but_show' => $config['tzc_but_show'] ? true : false,
            'tzc_more_show' => $config['tzc_more_show'] ? true : false,
            'tzc_qty_show' => $config['tzc_qty_show'] ? true : false,
            'tzc_new_show' => $config['tzc_new_show'] ? true : false,
            'cat_id' => $cat_id,
            'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
            'type_product' => 'carousel_cat1',  // <- variable used in the top of hook.tpl to set the good id
        ));

        return $this->display(__FILE__, 'hook.tpl'); 		
        }

    public function hookDisplayHomeCarouselCat2($params) 
    	{
        $config = json_decode(Configuration::get($this->name), true);

        $product_set = array();
  		
 		$title = "Carousel Categorie 2";  // Carousel title
 		$cat_id = 26;  //  <- the category id you want to display
 		$product_set = $this->getProducts($cat_id); // set of product for your carousel
 		
        $this->smarty->assign(array(
            'items_wide' => $config['items_wide'],
            'items_desktop' => $config['items_desktop'],
            'items_desktop_small' => $config['items_desktop_small'],
            'items_tablet' => $config['items_tablet'],
            'items_mobile' => $config['items_mobile'],
            'items_set' => $config['items_set'],
            'items_number' => $config['items_number'],
            'slide_speed' => $config['slide_speed'],
            'title' => $title,
            'products' => $product_set,
            'tzc_autoplay' => $config['tzc_autoplay'] ? 'true' : 'false',
            'tzc_nav' => $config['tzc_nav'] ? 'true' : 'false',
            'tzc_but_show' => $config['tzc_but_show'] ? true : false,
            'tzc_more_show' => $config['tzc_more_show'] ? true : false,
            'tzc_qty_show' => $config['tzc_qty_show'] ? true : false,
            'tzc_new_show' => $config['tzc_new_show'] ? true : false,
            'cat_id' => $cat_id,
            'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
            'type_product' => 'carousel_cat2', // <- variable used in the top of hook.tpl to set the good id
        ));

        return $this->display(__FILE__, 'hook.tpl'); 		
        }

    public function hookDisplayHomeCarouselNewProducts($params) 
    	{
        $config = json_decode(Configuration::get($this->name), true);

        $product_set = array();
 
 		
 		$title = "Our new products";  // Carousel title
 		$cat_id = 2; // root cat 
 		$product_set = $this->FeaturedProducts($config['items_number']); // new products set
 		
        $this->smarty->assign(array(
            'items_wide' => $config['items_wide'],
            'items_desktop' => $config['items_desktop'],
            'items_desktop_small' => $config['items_desktop_small'],
            'items_tablet' => $config['items_tablet'],
            'items_mobile' => $config['items_mobile'],
            'items_set' => $config['items_set'],
            'items_number' => $config['items_number'],
            'slide_speed' => $config['slide_speed'],
            'title' => $title,
            'products' => $product_set,
            'tzc_autoplay' => $config['tzc_autoplay'] ? 'true' : 'false',
            'tzc_nav' => $config['tzc_nav'] ? 'true' : 'false',
            'tzc_but_show' => $config['tzc_but_show'] ? true : false,
            'tzc_more_show' => $config['tzc_more_show'] ? true : false,
            'tzc_qty_show' => $config['tzc_qty_show'] ? true : false,
            'tzc_new_show' => $config['tzc_new_show'] ? true : false,
            'cat_id' => $cat_id,
            'homeSize' => Image::getSize(ImageType::getFormatedName('home')),
            'type_product' => 'new_product', // <- variable used in the top of hook.tpl to set the good id        ));

        return $this->display(__FILE__, 'hook.tpl');
		
        }

3 - Register hooks

 

modify install method of /modules/themeszonecarousel/themeszonecarousel.php

 

change

    public function install() {

        return  parent::install() &&
                $this->initConfig() &&
                $this->registerHook('displayHeader') &&
                $this->registerHook('displayCarousel') &&
                $this->registerHook('displayHome');
    }

 by

    public function install() {

        return  parent::install() &&
                $this->initConfig() &&
                $this->registerHook('displayHeader') &&
                $this->registerHook('displayCarousel') &&
                $this->registerHook('displayHomeCarouselCat1') &&
                $this->registerHook('displayHomeCarouselCat2') &&
                $this->registerHook('displayHomeCarouselNewProducts');
    }

Note: I had my custom hook but i also removed the displayhome hook !

 

Reset ( or uninstall + install again) the module

 

4 - Modify modules/themeszonecarousel/views/templates/hook/hook.tpl

 

Change

<!-- Products list -->
<ul id="owl_slider">

 by

<!-- Products list -->
<ul id="{if $type_product == "carousel_cat1"}owl_slider_carousel_cat1{/if}{if $type_product == "carousel_cat2"}owl_slider_carousel_cat1{/if}{if $type_product == "new_product"}owl_slider_carousel_new_product{/if}" class="owl-carousel product_list grid">

Replace the javascript section at the end of file

    <script>

        $(document).ready(function() {

            var owl_slider_carousel_cat1 = $("#owl_slider_carousel_cat1");
            var owl_slider_carousel_cat2 = $("#owl_slider_carousel_cat2");
            var owl_slider_carousel_new_product = $("#owl_slider_carousel_new_product");
                        
            owl_slider_carousel_cat1.owlCarousel({

                items : {$items_wide}, //10 items above 1000px browser width
                itemsDesktop : [1000,{$items_desktop}], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,{$items_desktop_small}], // 3 items betweem 900px and 601px
                itemsTablet: [600,{$items_tablet}], //2 items between 600 and 0;
                itemsMobile : {$items_mobile}, // itemsMobile disabled - inherit from itemsTablet option
                autoPlay: {$tzc_autoplay},
                navigation: {$tzc_nav},
                navigationText: false,
                pagination: false

            });

            owl_slider_carousel_cat2.owlCarousel({

                items : {$items_wide}, //10 items above 1000px browser width
                itemsDesktop : [1000,{$items_desktop}], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,{$items_desktop_small}], // 3 items betweem 900px and 601px
                itemsTablet: [600,{$items_tablet}], //2 items between 600 and 0;
                itemsMobile : {$items_mobile}, // itemsMobile disabled - inherit from itemsTablet option
                autoPlay: {$tzc_autoplay},
                navigation: {$tzc_nav},
                navigationText: false,
                pagination: false

            });


            owl_slider_carousel_new_product.owlCarousel({

                items : {$items_wide}, //10 items above 1000px browser width
                itemsDesktop : [1000,{$items_desktop}], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,{$items_desktop_small}], // 3 items betweem 900px and 601px
                itemsTablet: [600,{$items_tablet}], //2 items between 600 and 0;
                itemsMobile : {$items_mobile}, // itemsMobile disabled - inherit from itemsTablet option
                autoPlay: {$tzc_autoplay},
                navigation: {$tzc_nav},
                navigationText: false,
                pagination: false

            });

        });
    </script>

Then you should have 3 diffrents carousels on you homepage

 

Hopes It will help

 

Sébastien

white page and don't see module any more -.-

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Solution @polykodesas works fine on Prestashop 1.6.1.15

I have 3 slider now on my home page -> https://sklep.tech-sas.pl/

 

And i can have more. 

 

Small typing bug :

<!-- Products list -->
<ul id="{if $type_product == "carousel_cat1"}owl_slider_carousel_cat1{/if}{if $type_product == "carousel_cat2"}owl_slider_carousel_cat1{/if}{if $type_product == "new_product"}owl_slider_carousel_new_product{/if}" class="owl-carousel product_list grid">

should be: 

<!-- Products list -->
<ul id="{if $type_product == "carousel_cat1"}owl_slider_carousel_cat1{/if}{if $type_product == "carousel_cat2"}owl_slider_carousel_cat2{/if}{if $type_product == "new_product"}owl_slider_carousel_new_product{/if}" class="owl-carousel product_list grid">

Share this post


Link to post
Share on other sites
  • 2 weeks later...
  • 7 months later...

Thanks for module and tips

 

Thank you for this..

On 29/4/2015 at 7:56 AM, Senga said:

[Version française]

Bonjour à tous,

 

Merci pour ce module !

 

Je l'utilise pour afficher les produits d'une catégorie ; un petit problème de configuration à signaler : dans themeszonecarousel.php, dans la fonction privée getProducts,$nb n'est pas passée en paramètre et est par défaut à 10000... Pour que le nombre de produits de la catégorie affichée soit bien celui indiquée dans le backoffice, il faut :

- dans la fonction hookDisplayHome mettre 


 case 'category':
                if ( isset($config['cat_id']) && $config['cat_id'] > 0 ) $product_set = $this->getProducts($config['cat_id'], $config['items_number']);
                break;

- changer le fonctionnement de la fonction getProducts :


private function getProducts($cat_id, $nb=100){
        $products = false;
        if (!$cat_id) return;
        $category = new Category((int)$cat_id, (int)Context::getContext()->language->id);
        $products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10));
        if (!$products)
            return;
        return $products;
    }

Je rencontre un petit problème avec l'affichage de la liste des couleurs. En fait, dans hook.tpl on appelle $product.color_list... et quand je demande l'affichage de $product à smarty avec {$product|@print_r}, je vois que color_list n'est pas une propriété de $product... comment faire pour l'obtenir ? Merci d'avance !

 

[English version]

Hi all,

 

Thanks for this module!

 

I use it to show category products; I noticed a problem: in themeszonecarousel.php, in the private getProducts function,$nb is not passed as a parameter and defaults to 10000... To dusplay the number of category products as indicated in the backoffice, you must :

- in hookDisplayHome function put; 


case 'category':
if ( isset($config['cat_id']) && $config['cat_id'] > 0 ) $product_set = $this->getProducts($config['cat_id'], $config['items_number']);
break; 

- change the operation of the function getProducts: 


 private function getProducts($cat_id, $nb=100){
        $products = false;
        if (!$cat_id) return;
        $category = new Category((int)$cat_id, (int)Context::getContext()->language->id);
        $products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10));
        if (!$products)
            return;
        return $products;
}

I have now a problem with color list of a product

I'm having a little problem with the display of the color list on a product. In fact, in hook.tpl $product.color_list is called ... and when I print $product with {$ product|@print_r} I see that color_list is not a property of $product ... how do you get it? Thank you in advance!

 

 

Anyway i like to show products randomly, and some tips around doesnt work for me, so i modified private function getProducts again..

from 

    private function getProducts($cat_id, $nb=100){
        $products = false;
        if (!$cat_id) return;
        $category = new Category((int)$cat_id, (int)Context::getContext()->language->id);
        $products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10));
        if (!$products)
            return;
        return $products;
}

 

to this

    private function getProducts($cat_id, $nb=100){
        $products = false;
        if (!$cat_id) return;
        $category = new Category((int)$cat_id, (int)Context::getContext()->language->id);
        $products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10), null, null, false, true, true, ($nb ? $nb : 10));
        if (!$products)
            return;
        return $products;
}

 

Other thing is category products and parents, module shows zero products on root, but i have layered navigation on, so, products are showed in categories and subcategories, but anyway ive solved this, making an override of category.php "Kerm's Reply's help me a lot" from other post.

https://www.prestashop.com/forums/topic/330549-display-subcategory-products-in-parent-category/?do=findComment&comment=2386463

 

Hope help someone.. :-)

Share this post


Link to post
Share on other sites
  • 9 months later...

Hi everyone,
and thank you for making this carousel product module available to the community.

I use the version of Prestashop 1.6.1.12, and after installing and configuring the module, I have noticed that it has a problem when navigating with the mobile version (smatphone).

If I keep the smatphone in a normal (vertical) way, the title of the object appears all vertically.
While the cell phone is rotated, it is restored correctly.
Moreover, even if I "in configuration" indicate << Number of items in the carousel for mobile >> (1), then always appear 2.

I can not fix the problem. Can you help me? I also hope that the developer reads my message and can update the form to a new version. Thank you very much.

I will send you a screenshot attached while browsing with your mobile phone.
While from desktop and tablet PC it works.

Screenshot_2019-01-26-13-38-54.jpg

Screenshot_2019-01-26-13-39-23.jpg

Share this post


Link to post
Share on other sites
  • 7 months later...

Hello! 

Firstly thanks to @Themes Zone for a great and free module!

And thank to @myselfidem for information about dublicate module on one hook!

I Have one question: how can i make slider with sale product category? Create one more category and add products by hands not very good solution.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More