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 to all

@Themes Zone , Thanks for sharing , nice work ....!

it is possible to choose a category (ID) ?

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

Bonjour à tous

@Thèmes Zone, Merci pour ce partage, beau travail....! 

 

Hello

 

Not at the time but I will add this functionality if people need it :)

Share this post


Link to post
Share on other sites

Hi all, when in downloading a free module is the least we thank the person offering it to you for info elsewhere it pays . thank you
friendships

_____________________________________________________________________

Salut à tous, quand en télécharge un module gratuit, la moindre des choses est de remercier la personne qui vous l'offre, pour info ailleurs il est payant. Merci

Amitiés

 

http://themes.zone

Edited by G.Solidarité (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

 

 
Very nice module. Congratulations!

One question I have, can duplicate this module ?

I tried but in homepage is seen just one of them.

 
Thx again!

 

 

No sorry so far you cant, but I will work on that this weekend as I need the same functionality too :)

  • Like 1

Share this post


Link to post
Share on other sites

Awesome!

 

Just to clarify. What I will try to achieve is to have one instance of the carousel per theme hook. So there cant be two instances at the same hook but you can have two hooks like hook_home and hood_carousel for instance and each of the hook will contain a instance of a carousel. 

Share this post


Link to post
Share on other sites

Hello,

 

Thank you very much for this nice module.

 

However, I have a trouble when I chose a product to add to the cart.

The window to add the product to the cart is Under the slider with the products.

How to avoid this trouble and have the window to add the cart in front the slider.

 

Than you very much.

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hello,

 

If needed I give you the French translated file for your nice module.

 

A little typo error Inside : themeszonecarousel.php

 

On line 330 : navugation

'desc' => $this->l('Should the navigation buttons be displayed?'),

Thank you very much

 

*Edit : However, it seems  using "font-awesome.min.css" gives an error.

 

The icons aren't now displayed with Firefox !

 

*Edit 2 : Solved : Removing file font-awesome.min.css (inside css folder) and disable line 96 inside - or remove -

 

themeszonecarousel.php

 /*$this->context->controller->addCSS($this->_path .'/css/'. 'font-awesome.min.css');*/

Now all I fine using Firefox !

Edited by myselfidem (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Bonjour myselfidem, C'est la traduction en français ? Merci

 

Bonjour G.Solidarité.

 

Oui il s'agit de la traduction en français du Back-Office pour le module.(le fichier config_fr.xml se trouve dans le dossier zip, qu'il faudra déplacer !)

 

Et l'utilisation de l'ID d'une Catégorie fonctionne parfaitement.

 

Amicalement

 

PS : Pour Firefox utiliser la methode donnée ci-dessus pour les icônes.

 

*Edit : Oui, il faut faire la modification proposée !

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hello,

 

If needed I give you the French translated file for your nice module.

 

A little typo error Inside : themeszonecarousel.php

 

On line 330 : navugation

'desc' => $this->l('Should the navigation buttons be displayed?'),

Thank you very much

 

*Edit : However, it seems  using "font-awesome.min.css" gives an error.

 

The icons aren't now displayed with Firefox !

 

*Edit 2 : Solved : Removing file font-awesome.min.css (inside css folder) and disable line 96 inside - or remove -

 

themeszonecarousel.php

 /*$this->context->controller->addCSS($this->_path .'/css/'. 'font-awesome.min.css');*/

Now all I fine using Firefox !

 

Thank you very much.

Share this post


Link to post
Share on other sites

Thanks for sharing the module.

The slide is not sliding on my android mobile.

I noticed the icons display issue with firefox and didn't know why, thanks myselfidem to find it and for french translation.

css display could be a bit improved for better display.

Edited by jolvil (see edit history)

Share this post


Link to post
Share on other sites

Inside hook.tpl you can disable unwanted boxes ; like this (example for New box) :

 

Use : <!-- some lines --> to disable unwanted lines.

<!--{if isset($product.new) && $product.new == 1}
           <a class="new-box" href="{$product.link|escape:'html':'UTF-8'}">
                     <span class="new-label">{l s='New'}</span>
           </a>
    {/if}-->

Friendly

  • Like 2

Share this post


Link to post
Share on other sites

Hello,

 

If you need to translate the buttons : Add to cart ; More ; etc..

 

We need to make some changes inside hook.tpl and translate the lines from the Back-Office.

 

Added : 'mod=themeszonecarousel'

 

line 98 :

<span>{l s='Add to cart'}</span>

Change to :

<span>{l s='Add to cart' mod='themeszonecarousel'}</span>

line 112 : change

<span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if}</span>

To :

<span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize' mod='themeszonecarousel'}{else}{l s='More' mod='themeszonecarousel'}{/if}</span>

Now the buttons are set with your language.

 

Mine are French now

 

Friendly

  • Like 1

Share this post


Link to post
Share on other sites

thanks to share and upgrad

i download v0.9.3 and test it

show whit page and nothing any thing

with use firebug i can find the problem:

<div class="owl-wrapper" style="width: 4100px; left: 0px; display: block; transition: all 800ms ease 0s; transform: translate3d(-879px, 0px, 0px);"><div class="owl-item" style="width: 293px;"><li class="item ajax_block_product">

width is problem

than width is disable carousel is 50% worked but with enable nothing show any thing!

Share this post


Link to post
Share on other sites

thanks to share and upgrad

i download v0.9.3 and test it

show whit page and nothing any thing

with use firebug i can find the problem:

<div class="owl-wrapper" style="width: 4100px; left: 0px; display: block; transition: all 800ms ease 0s; transform: translate3d(-879px, 0px, 0px);"><div class="owl-item" style="width: 293px;"><li class="item ajax_block_product">

width is problem

than width is disable carousel is 50% worked but with enable nothing show any thing!

Please drop a link to see this, cant recreate the same 

Share this post


Link to post
Share on other sites

Thank you very much Themes Zone !

 

I see a little trouble on web pages : on top left (or top right for other languages).

 

It's written : string(1)"1"

 

I don't know why this script is here, but after many test I see he new module 0.93 give an error.

 

Thank you very much

 

*Edit : solved desabling the line 132 inside themeszonecarousel.php

//var_dump($config['tzc_but_show']);
Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hello,

 

Here are some changes needed :

 

Inside : hook.tpl

line : 50

<span class="new-label">{l s='New' mod='themeszonecarousel'}</span>

line 113 ( Customize):

<span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize' mod='themeszonecarousel'}{else}{l s='More' mod='themeszonecarousel'}{/if}</span>

Inside : themeszonecarousel.php

 

line : 132

Desable (to avoid error about string(1)"1" or "0"  on the top of pages)

//var_dump($config['tzc_but_show']);

Thank you very much. Friendly

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hello,

 

Works for me but only using Bestsellers ; New products and Category and select an Category ID...Then I can switch with Add to cart or not ; and switch Add More buttons.

 

Doesn't work for homefeatured products at this time. Seems there is a trouble with variables.

 

Maybe it's needed to add variables inside hook.tpl !?

Friendly

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hello,

 

I added also : Show New buton

 

Inside themeszonecarousel.php (just some lines) : added 'tzc_new_show'

 

line 48 inside hook.tpl:

 {if isset($product.new) && $tzc_new_show && $product.new == 1}

Inside themeszonecarousel.php

 

line 81 and others :

$config['tzc_new_show'] = true;







line 149 (etc) :

'tzc_new_show' => $config['tzc_new_show'] ? true : false,

line 354 :

array(
                        'type' => 'switch',
                        'label' => $this->l('Show New Button'),
                        'name' => 'tzc_new_show',
                        'is_bool' => true,
                        'desc' => $this->l('Should the New 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')
                            )
                        ),
                    ),

Works really fine ! We can choose to show or hide : New button.

 

Thank you very much Themes Zone.

 

Friendly

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Thank you very much Themes Zone !

 

Works really fine and I added : tzc_new_show.

 

Now Featured products is solved.

 

It 's a little typo error inside themeszonecarousel.php :

 

On line 119 : Change to featured

 case 'featrued_products':

Friendly ;)

 

*Edit : If needed and you add the option for the new button, here is the French translated file

ThemesZone_094_fr.zip

Edited by myselfidem (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

@moghimi

 

I see the module is now working fine on your web site !

 

Just needed navigation buttons at the right place. Try to edit style.css file.   ;)

 

Thank you very much Themes Zone for the upgraded awesome module.

 

Friendly

 

*Edit : inside your style.css file you can change the buttons position like this :

.owl-buttons {
    position: absolute;
    left:0;
    /*right:0;*/
    top: -72px; /* or -54px */
}
Edited by myselfidem (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Hello Themes Zones

 

Thank you very much for the new update !

 

However, to have the 'Quick view' ; 'New' and 'More' buttons translated, we need to add inside hook.tpl :

 

On line 26 :

<span>{l s='Quick view' mod='themeszonecarousel'}</span>

On line 50 :

<span class="new-label">{l s='New' mod='themeszonecarousel'}</span>

And on line 113 : {l s='Customize' mod='themeszonecarousel'}

Works really fine.

<span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize' mod='themeszonecarousel'}{else}{l s='More' mod='themeszonecarousel'}{/if}</span>

About title for the carousel, it would be nice to set inside the Back-Office the possibility to add direct link to see the articles about the title subject.

 

Could you add this option ?

 

Thank you very much.

 

Frindly

translations_094_fr.zip

Edited by myselfidem (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Hello,

 

Look Inside hook.tpl, to desable this option ; from line 19 and change like this (adding <!--  codes --> )

{if isset($quick_view) && $quick_view}
  <!--<div class="quick-view-wrapper-mobile">
           <a class="quick-view-mobile" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
                        <i class="icon-eye-open"></i>
            </a>
  </div>-->

Friendly

  • Like 1

Share this post


Link to post
Share on other sites

thank you @myselfidem

of which file, i can i cut away end of slider and footer?

div class= owl-controls clickable is create big space with page under slider and i don't wont show buttunos left and right, so i want remove this buttons so the space of under slider to footer be lower

thank you

Share this post


Link to post
Share on other sites

Hello,

 

It seems there is a little typo error ( about  items_desktop_small) Inside : themeszonecarousel.php

 array(
      'label' => $this->l('Number of items in the carousel for desktop small screens'),
      'type'  => 'text',
      'name'  => 'items_desktop_small',
      'class' => 'fixed-width-xs',
      'desc' => $this->l('Set the number of items to show in a view port on wide tablets'),
 ),

Changed :

array(
    'label' => $this->l('Number of items in the carousel for desktop small screens'),
    'type'  => 'text',
    'name'  => 'items_desktop_small',
    'class' => 'fixed-width-xs',
    'desc' => $this->l('Set the number of items to show in a view port on small screens'),
),

Thank you very much.

 

Friendly

Share this post


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

Started working on this, but it will take a while kinda busy now. Any way if you need this urgently you can simple make a copy of the same module, rename it and the settings associated with it and use it as a separate module in a different location.


Hello!!, 

 

my navigation buttons are in vertical position. Is it normal?? I prefer to show the buttons in horizontal position as the live demo.

Drop a link to check it out please

Share this post


Link to post
Share on other sites

Started working on this, but it will take a while kinda busy now. Any way if you need this urgently you can simple make a copy of the same module, rename it and the settings associated with it and use it as a separate module in a different location.

Drop a link to check it out please

 

Hello!!,

 

this is the page:

 

http://pruebas.musicandschools.com/

 

Thanks!!

Share this post


Link to post
Share on other sites

This is a great module! Thx!

 

How can i align the owl-buttons to left and right side of the module as in your other module "themeszonemanslider" ?

 

Default the owl-buttons is in top right corner.

Share this post


Link to post
Share on other sites

This is a great module! Thx!

 

How can i align the owl-buttons to left and right side of the module as in your other module "themeszonemanslider" ?

 

Default the owl-buttons is in top right corner.

 

 

Well, You can alter the CSS file for OWL slider so that the buttons are on left and right side. To be specific:

Open css/style.css file in the module'd folder, there locate the following code:

.owl-buttons{
    position: absolute;
    right:0;
    top: -54px;
}

.owl-buttons .owl-prev, .owl-buttons .owl-next{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 50px !important;
    text-align: center;
}

.owl-prev{
    margin-right: 1px !important;
}

.owl-next{
    margin-right: 15px !important;
}

and change it to this:

.owl-buttons{
   position: relative;
}

.owl-buttons .owl-prev, .owl-buttons .owl-next{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 50px !important;
    text-align: center;
}

.owl-prev{

    position: absolute;
    top: 50%;
    left: 0;
}

.owl-next{

    position: absolute;
    top: 50%;
    right: 0;
}

something like this, most likely you will have to adjust the positions.

Share this post


Link to post
Share on other sites

This addon is simply great!

Thank you so much for sharing it.

 

One question (sorry if stupid).

 

Would it be possible for me or anybody here to duplicate/expand it to have in homepage:

  1. categories carousel
  2. featured products
  3. Newest products
  4. Best sellers
  5. Specials

?

 

I guess all shops need these (or at least 3 of them) carousels on homepage and managing them via a single addon would be great.

I repeat, sorry if stupid question but maybe somebody in the community has the solution already.

Cheers

M

 -

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 :(  

Share this post


Link to post
Share on other sites

Thank u 4 replying Themes Zone! Same question as above, renaming the zip file would be enough? No code changes?

Duplicating would not be so bad...I guess unless server performance would be badly hit by 5 instances on homepage, what do you think?

Cheers

M

Edited by mehere (see edit history)

Share this post


Link to post
Share on other sites

Ok now I am sure my question was very stupid :D

Sorry but we were at least 2 wondering if this could have been achieved easily (no dev skills on my side)

Thank you anyways!

M

Share this post


Link to post
Share on other sites

Hey Themezone.

 

Great module! Going to use it on the webshop i am currently working on.

 

There is just one thing i would like to change, and i wonder if you can help me?

 

The motion of the carousel is good untill the end, where it "violently" jumps back to the first product again.

I would really like to make it "go around" like a real carousel, so it goes in a circle instead of jumping back.

I know this might be a tough challenge to code, therefore i was thinking if it could be possible to just make it go the other way at the end?

Could it be done with some minor harcoding? Make it switch from 1-12 and in the end switch from 12-1 and then back to 1-12 and so on.

This would make the movement a lot more smooth.....Got any ideas or would you at least be so kind as to point me in the right direction?

I guess it's the .js that needs modification....but i have little experience with javascript and find the files messy and confusing ^^

 

Thanks, NB

 

P.S:

For the people who wants to duplicate, there are a few former threads about the subject, just search for: "prestashop duplicate module" on google and you should find what you're looking for. It might take a few tries, took me at least 5 :)

Edited by NBBO (see edit history)

Share this post


Link to post
Share on other sites

For now, I can offer here two solutions:

 

1st to disable the rewind at all.

 

To do that open views/templates/hook/hook.tpl and on line 164 add rewindNav: false 

 

2nd option is to slow the rewind down to say 5 seconds to do that add rewindSpeed: 5000 on line 164

 

So use either one of the methods see code below

owl.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:true,
                navigation: {$tzc_nav},
                navigationText: false,
                rewindNav: false, // add this to stop the rewinding
                rewindSpeed: 5000 // add this to slow the rewind down to 5 seconds

            });

Share this post


Link to post
Share on other sites

Thanks for the response, sorry for the late answer.

 

5 seconds is still too fast, is it possible to also add a line modifying the start timer?

If i set it to 10 secs it looks very nice going back, but it doesn't make it to the end before starting again, which looks like a glitch.

 

Thanks a lot :)

 

-NB

Share this post


Link to post
Share on other sites