Jump to content

[Module] MGC Home Products Carousel


Recommended Posts

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

4036_VdLDZg4cJvAw0dNYyaG7_t

4037_IkSUTrwESj0ghAXZjgNx_t

4038_4EthtZ4HhObXeEXQZZos_t

MGC Home Products Carousel.zip

  • Like 3

Share this post


Link to post
Share on other sites
  • Replies 418
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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. Featu

Here is my module, created by me You can click on list title "Cheap Products" to show or hide slide product  

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

Posted Images

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 ...

4045_jw3A3HtMT1Rej5oHJBYS_t

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
Share on other sites

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

4050_yNddzVg0sy021YBrfbff_t

4051_k7oJnTBEwc5OurTzh4Kn_t

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

@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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

I installed the module on my shop but I have a problem

The modules displays desactived products and desactived categories , it could be better to choose the categories to be displayed instead categories to be not displayed.

So I can't use it

Share this post


Link to post
Share on other sites

For the unactive products, you have to download the latest zip, the first contained an error.

You can select from the module options which category not to show so I think it's ok no ?

Share this post


Link to post
Share on other sites

Bonjour,

J'ai moi aussi un problème avec votre module, il "plante" ma page d'accueil, celle-ci se fige et bloque tout mon pc, je ne peux qu'actionner control +alt +supp pour obliger IE7 à fermer...
Dommage , il a l'air pas mal ...

Merci pour votre réponse.

Cordialement,

Mandrake.

Share this post


Link to post
Share on other sites

Thanks mtor... you are very kind.

I have followed your suggestion and the block is now detached by homefeatured.
I don't succeed in understanding what I must add and where I must add (in..\homecarousel\jcarousel\skins\tango\skin.css) the code to center the block "home product Carousel."
Could you help to understand me what I must do for being able to center him/it? If I decrease the width of the block it goes to the left everything... then I must understand whether to intervene for being able to center him.

Thanks

Share this post


Link to post
Share on other sites

Bonjour Jolvil,

Je vois effectivement qu'il fonctionne chez toi, mais ton site n'a pas l'air d'être créé sous prestashop ou alors tu changé tout le code, ceci explique peut-être cela...
Au passage, le lien pour aller sur ton site dans ton profil est erroné. Sinon très sympathique ton site.
Bonne journée,

Cordialement,

Mandrake.

Share this post


Link to post
Share on other sites
Yuck.

I choose medium image type and as you can see in the attached image, it looks very nice in Chrome. However IE is not plesent. Please tell me how to change IE so it looks like chrome?

Thanks.


Agreed.

Share this post


Link to post
Share on other sites
Je vois effectivement qu’il fonctionne chez toi, mais ton site n’a pas l’air d‘être créé sous prestashop ou alors tu changé tout le code, ceci explique peut-être cela…
Au passage, le lien pour aller sur ton site dans ton profil est erroné. Sinon très sympathique ton site.



Mandrake

Mon site est bien en V1.1 simplement adapté, quelques modifs en css et tpl mais pas plus.

Share this post


Link to post
Share on other sites

Does someone know which code I must add (in \homecarousel\jcarousel\skins\tango\skin.css) so that themodule "home product carousel" both to the center and not to the left as it is of defoult?

Share this post


Link to post
Share on other sites

Bonsoir Jolvil,

Je comprends mieux maintenant...Je vois que tu maîtrises bien l'outil...
Mais j'ai réellement un soucis avec ce module, peut-être à cause du javascript? Je suis sous IE7.
Je vais tenter d'approfondir la chose...

Bonne soirée,

Cordialement,

Mandrake.

Share this post


Link to post
Share on other sites
petit souci avec votre module
erreur à la ligne 331 \modules\homecarousel\homecarousel.php on line 331

je suis sous la version 1.2.0.1

JMA


La ligne 331 paraît pourtant ok. Je suis possesseur de Mac donc peut-être un problème de fichier.

Pouvez-vous ouvrir le fichier et copier ici la ligne 331 ?

Share this post


Link to post
Share on other sites
Yuck.

I choose medium image type and as you can see in the attached image, it looks very nice in Chrome. However IE is not plesent. Please tell me how to change IE so it looks like chrome?

Thanks.


I think it's a question of font so just a matter of CSS tweaking to fit your own needs :)

Share this post


Link to post
Share on other sites
Does someone know which code I must add (in \homecarousel\jcarousel\skins\tango\skin.css) so that themodule "home product carousel" both to the center and not to the left as it is of defoult?


Well in the same style parameter I stated above you have to play around with the margin css attribute.

Share this post


Link to post
Share on other sites

I can't set name size display on Explorer with skin.css.

it's possible to set font-size with FF2 or Chrome but not with Explorer.

That's why the result is different and not so nice with explorer.

I can change price font-size display on Explorer but not name font-size.

do you have an idea?

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

I found a solution!

just take of

in homecarousel.tpl

change
{$product.name|escape:htmlall:'UTF-8'|truncate:45}    



to

{$product.name|escape:htmlall:'UTF-8'|truncate:45}

Share this post


Link to post
Share on other sites

Thanks...
but me thing I must add, and where must I add, to the code (in \homecarousel\jcarousel\skins\tango\skin.css) so that the module (Home Product Carousel) results in central (and not to the left) position?

Share this post


Link to post
Share on other sites

If you want to REALLY improve this mod, make it so that only logged in registered customers see a link beneath each product (on the product's page), next to the Send to friend link called, "Product Code". When they click it, they'll be able to copy/paste the code for that product anywhere they want (e.g. their own website(s), myspace page, etc.).

And then (important part), allow a referral/rewards program - similar to the existing rewards/referral program - to be integrated and configurable (commission, etc.) where it gives each customer who brought in a new customer from advertising on their myspace page or wherever, reward points, to be used as a voucher in your store (connected to the current voucher system).

This would of course give people a BIG incentive to promote your store and make money doing so, all while increasing your sales!

If you do this mod, people would pay for it, easily.

Share this post


Link to post
Share on other sites
If you want to REALLY improve this mod, make it so that only logged in registered customers see a link beneath each product (on the product's page), next to the Send to friend link called, "Product Code". When they click it, they'll be able to copy/paste the code for that product anywhere they want (e.g. their own website(s), myspace page, etc.).

And then (important part), allow a referral/rewards program - similar to the existing rewards/referral program - to be integrated and configurable (commission, etc.) where it gives each customer who brought in a new customer from advertising on their myspace page or wherever, reward points, to be used as a voucher in your store (connected to the current voucher system).

This would of course give people a BIG incentive to promote your store and make money doing so, all while increasing your sales!

If you do this mod, people would pay for it, easily.


How does that relate to the carousel?

Share this post


Link to post
Share on other sites

I guess you're right, it doesn't directly relate to it. I should've directed this post to Prestashop instead. I was inspired and posted before thinking!

Hopefully I've in turn inspired modders to create this mod anyway! :)

How does that relate to the carousel?

Share this post


Link to post
Share on other sites
I guess you're right, it doesn't directly relate to it. I should've directed this post to Prestashop instead. I was inspired and posted before thinking!

Hopefully I've in turn inspired modders to create this mod anyway! :)

How does that relate to the carousel?


I do like the idea though

Share this post


Link to post
Share on other sites
Bonjour,

J'ai moi aussi un problème avec votre module, il "plante" ma page d'accueil, celle-ci se fige et bloque tout mon pc, je ne peux qu'actionner control +alt +supp pour obliger IE7 à fermer...
Dommage , il a l'air pas mal ...

Merci pour votre réponse.

Cordialement,

Mandrake.


Et sous Firefox pas de problème ?

Pourriez-vous m'indiquer l'adresse de votre site web (avec le module activé pour voir si je ne vois pas une erreur) ?

Share this post


Link to post
Share on other sites
Thanks...
but me thing I must add, and where must I add, to the code (in \homecarousel\jcarousel\skins\tango\skin.css) so that the module (Home Product Carousel) results in central (and not to the left) position?


In the CSS file, in .jcarousel-container-horizontal, add :
   margin-left: auto;
   margin-right: auto;

Share this post


Link to post
Share on other sites

This module is wonderfull but it could be more "ready to use" with Prestashop thème.

So I suggest to set /homecarousel/jcarousel/skins/tango/skins.css file:

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width: 475px;  /* good width with prestashop theme */
   padding: 5px 40px;
   margin: 10px 0;    /* or margin: 10px auto; */
}

.jcarousel-skin-tango .jcarousel-container-vertical {
   width: 75px;
   padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
   width:  473px;
   height: auto;
}

.jcarousel-skin-tango .jcarousel-item {
   width: 129px;
   height: auto;
   text-align: center;
   font-size: 1em;   /* can be set wthout  in homecarousel.tpl  */
}



take of in css -moz-border-radius: 10px; (only used by FF and Netscape)

take of css code about vertical (not used)

take of image button about vertical (not used)

take of ie7 skin (not used)

take of changelog.html, index.html, style.css not necessary inside the module, beside ok

take of thickbox folder (not used)

take of

in homecarousel.tpl (can't be resize with css and Explorer)

Share this post


Link to post
Share on other sites

Thanks for the CSS help! You're right, this is what the original settings should be.


This module is wonderfull but it could be more "ready to use" with Prestashop thème.

So I suggest to set skin.css:

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width: 475px;  /* good width with prestashop theme */
   padding: 5px 40px;
   margin: 10px 0;    /* or margin: 10px auto; */
}

.jcarousel-skin-tango .jcarousel-container-vertical {
   width: 75px;
   padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
   width:  473px;
   height: auto;
}

.jcarousel-skin-tango .jcarousel-item {
   width: 129px;
   height: auto;
   text-align: center;
   font-size: 1em;   /* can be set wthout  in homecarousel.tpl  */
}



take of in css -moz-border-radius: 10px; (only used by FF and Netscape)

take of css code about vertical (not used)

take of image button about vertical (not used)

take of ie7 skin (not used)

take of changelog.html, index.html, style.css not necessary inside the module, beside ok

take of thickbox folder (not used)

take of

in homecarousel.tpl (can't be resize with css and Explorer)

Share this post


Link to post
Share on other sites

Hello MTOR,
Super module!
As against a small problem of overlap! (see capture).
Greetings.


Bonjour mtor,
Super module !
Par contre un petit problème de chevauchement ! (voir capture).
Salutations.

4102_GetyIVMprTrBOxesFycQ_t

Share this post


Link to post
Share on other sites
Hello MTOR,
Super module!
As against a small problem of overlap! (see capture).
Greetings.


Bonjour mtor,
Super module !
Par contre un petit problème de chevauchement ! (voir capture).
Salutations.


MTOR said previously to edit "Edit the css file located in the modules/homecarousel/jcarousel/skins/tango/skins.css file" for this problem

Share this post


Link to post
Share on other sites

fistou

le module est super mais pas tout à fait pret à l'emploi , il faut modifier un peu le css, la largeur du conteneur car il est trop large pour le theme par defaut, ajouter des margin, regarde mon post sur les modifs à faire

Share this post


Link to post
Share on other sites
fistou

le module est super mais pas tout à fait pret à l'emploi , il faut modifier un peu le css, la largeur du conteneur car il est trop large pour le theme par defaut, ajouter des margin, regarde mon post sur les modifs à faire


Bonjour jolvil,

Oui effectivement et en plus j'avais l'ancien fichier css dans le répertoire "tango" le css était erroné car il était marqué .jcarousel-skin-IE7.

Il faudrait que mtor mette un numéro de release à ces modules chaque fois qu'il apporte une modif. :)

Share this post


Link to post
Share on other sites

@jolvil :
Je prendrais les suggestions de changements de CSS en compte.

Si ma boutique est actuellement sous Magento c'est parce que je suis en train de préparer la nouvelle version avec prestashop ;-) Le développement du Carousel n'était pas si bénévole que çà hehe !

Share this post


Link to post
Share on other sites

A cause de la lourdeur de Magento.

Magento a tendance à être lent et développer un module sous Magento relève du parcours du combattant. Prestashop apporte beaucoup plus de souplesse.

Share this post


Link to post
Share on other sites
This module is wonderfull but it could be more "ready to use" with Prestashop thème.

So I suggest to set /homecarousel/jcarousel/skins/tango/skins.css file:

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width: 475px;  /* good width with prestashop theme */
   padding: 5px 40px;
   margin: 10px 0;    /* or margin: 10px auto; */
}

.jcarousel-skin-tango .jcarousel-container-vertical {
   width: 75px;
   padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
   width:  473px;
   height: auto;
}

.jcarousel-skin-tango .jcarousel-item {
   width: 129px;
   height: auto;
   text-align: center;
   font-size: 1em;   /* can be set wthout  in homecarousel.tpl  */
}



take of in css -moz-border-radius: 10px; (only used by FF and Netscape)

take of css code about vertical (not used)

take of image button about vertical (not used)

take of ie7 skin (not used)

take of changelog.html, index.html, style.css not necessary inside the module, beside ok

take of thickbox folder (not used)

take of

in homecarousel.tpl (can't be resize with css and Explorer)


Excellent. I have cut the code down to exactly this. Now how do I make it look better in IE? Help much appriciated. :)

Share this post


Link to post
Share on other sites

For the horizontal, modify this :

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width: 475px;  /* good width with prestashop theme */
   padding: 5px 40px;
   margin: 10px 0;    /* or margin: 10px auto; */
}



For the vertical one, select a smaller image size through the back office options

  • Like 1

Share this post


Link to post
Share on other sites
This module is great but how do I make it a little smaller as it goes over my checkout side box and does not fit in the middle of the page?


OK I had a little play with this and you have to change the following code:

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width: 605px;
   padding: 5px 40px;



To a chosen size code:

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width: 470px;
   padding: 5px 40px;



Still working on how to change the size so the images all show in the box. If anyone else can help that would be appreciated.

Share this post


Link to post
Share on other sites
Hi..thanks for the fast reply..:-)

Yes, I did install it...and it is set
to display products..any idea why
this is happening??

Thanks,

Julianna


I am sorry but i don't, i was hoping it was something simple to help you quickly. Ive never seen that problem before.

Share this post


Link to post
Share on other sites
Hi..thanks for the fast reply..:-)

Yes, I did install it...and it is set
to display products..any idea why
this is happening??

Thanks,

Julianna


I am sorry but i don't, i was hoping it was something simple to help you quickly. Ive never seen that problem before.


Just looked at your website, maybe it doesn't work with v1.0, cause i think your running v1.0

Share this post


Link to post
Share on other sites

Hi all,
Can anyone tell me what i need to change to move the arrows and the images within the middle of my site, as you can see the text of the product goes over the cart area and the arrow on the right is over the product?

How can I fix this?

Thanks.

Share this post


Link to post
Share on other sites

I just edited the container-horizontal width to 475 and it didn't change at all. What gets so frustrating is that every time you change it, you have to make a .tar file and upload it again. I've played with it three times now. Does anyone know exactly what I should be fixing in the skins.css file?

Sorry to bug. I just can't read anymore.

Share this post


Link to post
Share on other sites

Ok...here are the settings the homecarousel is set to in my admin...

Autoplay Carousel yes

Number if products in carousel 20

Number of product visible 10

Number of product to scroll by 5

Select Carousel image type large 300x300

Display Product name yes

Display Price no

Choice of sort Alphabetical


Those are the settings..strange how it does not work right?
Especially it is installed and saying there are no products..

Oh, and I don't think there are any categories without products..
although I have one cat. disabled..
Does this have anything to do with it?? I wouldn't think so especially
that I chose to not display from that cat..

Any help??

Thanks,
Julianna

Share this post


Link to post
Share on other sites

Ok..if I cannot get that carousel to work..then anyone know how to get
this flash player to work as shown on this site??
http://www.sloncek.si/

I thought that would look better on my site anyway.. ;-)


Can someone help on how to get this? Is it a module? Or just some
script to install in the editorial??

Please help..

Thanks,

Julianna

Share this post


Link to post
Share on other sites

I painfully now read the whole post. I hate to bitch especially being free but, the same question is being asked over and over. How do I center the carousel. Why not just fix the zip?????????????????????????? I hardly have any technical skills but I've had to learn some since getting PrestaShop. ;)

Sorry to bitch. It just seems to make sense to just fix the zip and save everyone the heartache.

:)

Share this post


Link to post
Share on other sites
Ok, sorry.


I'm just frustrated. I got it working but it took me a long time.


What did you do to get it to work mate, can you share what you did with the rest of the members, I would appreciate what you did so I can fix mine as well.

Share this post


Link to post
Share on other sites