PrestaShop Forums: [Module] MGC Home Products Carousel - PrestaShop Forums

Jump to content


Welcome to the PrestaShop Forum! We hope you'll share your comments and suggestions with us. We ask that you please post in English to the main sections of the PrestaShop Forum. If you want to write in another language, please post in the corresponding PrestaShop Community section below.

Please note that PrestaShop Community sections are largely self-moderated. PrestaShop team members may or may not participate in non-English sections. To improve the chances of receiving feedback to your question or comment, please post it in English to the main sections of our Forum.

NYC

Vous parlez français ? par ici !


[Module] MGC Home Products Carousel


[Module] MGC Home Products Carousel

#1 mtor

    PrestaShop Apprentice

  • 24 Mar 2008
  • Members
  • PipPip
  • 35 posts
  • Location:Vélizy-Villacoublay (France)

Posted 19 January 2009 - 08:03 PM

As the currently available Carousel was not fitting our needs we have developped a new Carousel. I am releasing it here so that everyone could benefit of it !

This Carousel is based on jQuery.

Features

This Carousel is highly configurable through the following options :
- Automatic scroll (Can be disabled, configurable duration)
- Number of products in the Carousel
- Number of products in the visible part of the Carousel
- Number of products scrolled by automatic scroll or button
- Image type used (selection between your shop images type)
- Display or not Product's name
- Display or not Product's price
- Select the categories from which not to retrieve the products
- Select Products order (same as homefeatured module)

This could be used as a featured Carousel if you exclude all categories except the home one :) !

Install

Just upload the content of the zip in your modules directory. Then go to your modules management page, install the module and configure it.

Enjoy !!


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

Le Carousel disponible ne nous convenant pas, nous avons décidé d'en développer un nouveau. Je le release donc ici afin que tout le monde puisse en profiter !

Ce Carousel est basé sur jQuery.

Fonctionnalités

Ce Carousel est complêtement configurable grâce aux options suivantes :
- Scroll automatique (Peut-être désactivé, intervalle de scroll réglable)
- Nombre de produits dans le Carousel
- Nombre de produits affichés dans la partie visible du Carousel
- Type d'images à utiliser (sélection parmis les types disponible dans votre boutique)
- Afficher ou non le nom du produit
- Afficher ou non le prix du produit
- Sélectionner les catégories à exclure pour la récupération des produits
- Sélectionner l'ordre des produits (identique au module homefeatured)

Il est possible d'utiliser ce module comme un module featured Carousel en excluant toutes les catégories à l'exception de l'accueil !

Installation

Uploadez le contenu du zip dans votre dossier modules. Allez ensuite dans le gestionnaire de modules et installe le. Il ne vous restera plus qu'à le configurer

Enjoy !!


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

Todo list :
- Circular Carousel / Carousel circulaire
- Possibility to configure the speed / Possiblité de sélectionner la vitesse
- Add positioning in header / Ajouter le positionnement dans le header

Attached File(s)


If you like my work : Donate

#2 Merchant

    PrestaShop Apprentice

  • 24 Aug 2008
  • Members
  • PipPip
  • 83 posts

Posted 19 January 2009 - 09:10 PM

Nice work.

#3 SonnyCooL

    PrestaShop Apprentice

  • 12 Jan 2009
  • Members
  • PipPip
  • 48 posts

Posted 19 January 2009 - 09:19 PM

cool ...
will try later and thanks

add: how to make it smaller ? is too wide for my three column theme .....
also : if i put it on top on front page, it make my site look like two column (right column drop to bottom and features product overlap).

thanks

#4 mtor

    PrestaShop Apprentice

  • 24 Mar 2008
  • Members
  • PipPip
  • 35 posts
  • Location:Vélizy-Villacoublay (France)

Posted 19 January 2009 - 09:44 PM

Edit the css file located in the modules/homecarousel/jcarousel/skins/tango/skins.css file :)
If you like my work : Donate

#5 jolvil

    PrestaShop Fanatic

  • 22 Dec 2007
  • Members
  • PipPipPipPip
  • 2672 posts
  • Location:Paris

Posted 19 January 2009 - 09:45 PM

great module, 2 little things:

Box round corners only with FF2 but not with IE7 or Chrome.

Scrolling not starting again after clicking on arow.


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


to start again on I just changed 0 to 1 in homecarousel.js

    carousel.buttonNext.bind('click', function() {
carousel.startAuto(1);
});

carousel.buttonPrev.bind('click', function() {
carousel.startAuto(1);
});


But a time pause could be better before starting again


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

to set of round corners on FF:

erase

 -moz-border-radius: 10px;


in homecarousel/jcarousel/skins/tango/skins.css file

#6 SonnyCooL

    PrestaShop Apprentice

  • 12 Jan 2009
  • Members
  • PipPip
  • 48 posts

Posted 19 January 2009 - 10:22 PM

From 1232397897:

Edit the css file located in the modules/homecarousel/jcarousel/skins/tango/skins.css file :)


thanks bro, got it with the size i want :)
but when i put this module in first or second place (homecontent), my right column and features product turn out below left column ...

Attached File(s)



#7 mtor

    PrestaShop Apprentice

  • 24 Mar 2008
  • Members
  • PipPip
  • 35 posts
  • Location:Vélizy-Villacoublay (France)

Posted 19 January 2009 - 10:32 PM

From 1232397932:

great module, 2 little things:

Box round corners only with FF2 but not with IE7 or Chrome.

Scrolling not starting again after clicking on arow.


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


to start again on I just changed 0 to 1 in homecarousel.js

    carousel.buttonNext.bind('click', function() {
carousel.startAuto(1);
});

carousel.buttonPrev.bind('click', function() {
carousel.startAuto(1);
});


But a time pause could be better before starting again


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

to set of round corners on FF:

erase

 -moz-border-radius: 10px;


in homecarousel/jcarousel/skins/tango/skins.css file


Thanks, zip updated regarding the autoscrolling not starting again
If you like my work : Donate

#8 mtor

    PrestaShop Apprentice

  • 24 Mar 2008
  • Members
  • PipPip
  • 35 posts
  • Location:Vélizy-Villacoublay (France)

Posted 19 January 2009 - 10:32 PM

From 1232400138:

From 1232397897:

Edit the css file located in the modules/homecarousel/jcarousel/skins/tango/skins.css file :)


thanks bro, got it with the size i want :)
but when i put this module in first or second place (homecontent), my right column and features product turn out below left column ...


Try diminishing the size again.
If you like my work : Donate

#9 SonnyCooL

    PrestaShop Apprentice

  • 12 Jan 2009
  • Members
  • PipPip
  • 48 posts

Posted 19 January 2009 - 10:36 PM

From 1232400762:

From 1232400138:

From 1232397897:

Edit the css file located in the modules/homecarousel/jcarousel/skins/tango/skins.css file :)


thanks bro, got it with the size i want :)
but when i put this module in first or second place (homecontent), my right column and features product turn out below left column ...


Try diminishing the size again.

drop to 200px but result remain .....
any solution ?

#10 mtor

    PrestaShop Apprentice

  • 24 Mar 2008
  • Members
  • PipPip
  • 35 posts
  • Location:Vélizy-Villacoublay (France)

Posted 19 January 2009 - 11:01 PM

Ok was my fault ...

Open the homecarousel.tpl file. Remove the
after the .

Zip file has been corrected.
If you like my work : Donate

#11 SonnyCooL

    PrestaShop Apprentice

  • 12 Jan 2009
  • Members
  • PipPip
  • 48 posts

Posted 19 January 2009 - 11:12 PM

From 1232402468:

Ok was my fault ...

Open the homecarousel.tpl file. Remove the
after the .

Zip file has been corrected.


thanks it work perfect now :)

#12 myname

    PrestaShop Apprentice

  • 09 Nov 2008
  • Members
  • PipPip
  • 275 posts

Posted 20 January 2009 - 01:35 AM

hi... very beautiful module!

I have two questions:
1) as me I place to create a space among the block "home featured" and the block "Homa product carousel?" ( img 1)
2) how I can center the block "Home product carousel?" (img 2)

Thanks

Attached File(s)

  • Attached File  HPC_1.jpg (44bytes)
    Number of downloads: 36389
  • Attached File  HPC_2.jpg (42bytes)
    Number of downloads: 36026


#13 mtor

    PrestaShop Apprentice

  • 24 Mar 2008
  • Members
  • PipPip
  • 35 posts
  • Location:Vélizy-Villacoublay (France)

Posted 20 January 2009 - 01:43 AM

Hi,

You have to play around with the css file as stated previously.

I assume you already did as per your second screenshot.

I presume your style is fixed width so play around with the margin-left that should do it.
If you like my work : Donate

#14 myname

    PrestaShop Apprentice

  • 09 Nov 2008
  • Members
  • PipPip
  • 275 posts

Posted 20 January 2009 - 02:11 AM

Thanks, but

which cms to center the block? in the image 2 have lengthened only the block, however don't I know where I can insert a function to center the block?

and for the image 1? ... how can I detach (to set a space among the 2) the block "homefeatured" from your block?

#15 Travis

    PrestaShop Apprentice

  • 19 Nov 2008
  • Members
  • PipPip
  • 105 posts

Posted 20 January 2009 - 07:19 AM

Good, but

it shows products which are currently disabled.

EDIT: Also duplicates same item sometimes, even next to each other.

#16 mtor

    PrestaShop Apprentice

  • 24 Mar 2008
  • Members
  • PipPip
  • 35 posts
  • Location:Vélizy-Villacoublay (France)

Posted 20 January 2009 - 07:52 AM

@myname :
For the space, add a margin-top : value px; (replace value by the space you want) in :

.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 10px;
background: #FFFFFF;
border: 1px solid #346F97;
}


And this is also in this bit of code that you must add modification of the width as well as centering.

@Travis :
Ok this should now be fixed. Download the zip file again and just replace the homecarousel.php file from the homecarousel directory :)
If you like my work : Donate

#17 Travis

    PrestaShop Apprentice

  • 19 Nov 2008
  • Members
  • PipPip
  • 105 posts

Posted 20 January 2009 - 08:00 AM

Fantastic fix, very happy. Will tell if I find anymore issues. But i like it so far.

So much better then the other carousel offered.

Many Thanks

#18 Travis

    PrestaShop Apprentice

  • 19 Nov 2008
  • Members
  • PipPip
  • 105 posts

Posted 20 January 2009 - 10:41 AM

Been looking at it and thinking, maybe instead of wizzing back to the start when it reaches the end, it has a never ending loop so when it gets to the the end it continues flicking (changing product) in the same direction (no wizzing right back to where it began), instead the next product is the first product again. Saves the customer the headache as they watch it wizz back to the start.

Sorry for my bad explanation. I hope someone understands.

#19 jolvil

    PrestaShop Fanatic

  • 22 Dec 2007
  • Members
  • PipPipPipPip
  • 2672 posts
  • Location:Paris

Posted 20 January 2009 - 10:47 AM

To make animation a litle slower I added in homecarousel.js, it works:

    animation: 'slow',


in

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: carousel_autoplay,
wrap: 'last',
visible: carousel_items_visible,
scroll: carousel_scroll,
animation: 'slow',
initCallback: mycarousel_initCallback


but I tried to add wrap: 'first', or wrap: 'circular', to have a circular carousel but it doesn't work

How to set a circular caroussel?

#20 mtor

    PrestaShop Apprentice

  • 24 Mar 2008
  • Members
  • PipPip
  • 35 posts
  • Location:Vélizy-Villacoublay (France)

Posted 20 January 2009 - 11:36 AM

About the Carousel it's a bit more complicated to implement, the js library doesn't support it by default.

I will wokr on it and release a new version with the option to set the Carousel as circular or not as well as a speed option.
If you like my work : Donate





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users