[Module] Home featured and new products SlideShow * Update 04/02/2009

[Vassag0 13]

The module is based in this script http://css-tricks.com/startstop-slider/

The module show the featured products in a nice SlideShow in your home.

Now two downloads:
1.- slideproducts.zip - Download for a features products in home page.
2.- slidenewproducts.zip - Download for a new products in home page.


*******

04/02/2009 Version 0.2. Fix Bug for module translation (thanks Hoodgrown)

slideproducts.zip

slidenewproducts.zip

[Star 16]

Thank you very much for sharing. it is very useful. :-)

[Vassag0 13]

You're welcome

[Hoodgrown 2]

How do I install this? There's no read me. Looks so damn cool..... lol

[Vassag0 13]

Download the zip file, extract it in some folder.

Now, you have a folder call slideproducts, copy this folder in your prestashop /modules. If in the slideproducts folder you have another folder call slideproducts you must copy the second folder.

Open Prestashop's administrator panel, go to modules, tool. There you can see a Slide featured products v0.1 module, push install.

Sorry for my bad English.

[Hoodgrown 2]

Your English is fine! Thank you. It works perfectly

[Hoodgrown 2]

Last Question,
If I wanted to change the wording on the home page from "Featured Products" to "Hot Deals"....
what file would I edit?

[Vassag0 13]

The first version had got a minor bug in module translation.

Download this version, replace the slideproducts folder for this. Not is necesary install, only replace.

Go to PrestaShop's administrator panel, Tools, Translations. In "Modify translations" select "Modules translations", push Flag's English.

Search for a "prestashop - slideproducts" change in "featured products" field put the text that you want see in the module text.

[Atch 399]

que decir de mas que gracias Vassago.

thanks a lot

Atch

[nico46 10]

que decir de mas que gracias Vassago.

thanks a lot

Atch

Ce module est super intéressant, mais peut_on y inclure tout le catalogue de la boutique à la manière de MG Carroussel ou autres Carroussel d'ailleurs.
Atch tu doit être surement capable de le faire toi moi pas pourtant j'ai essayer, tu as une piste pour ça?.

[Vassag0 13]

Je sui désolé, je ne parle pas français.

I used the Google's Traslation Center for your question, and I'm not sure that Google shows me is correct.

Do you want a SlideShow (Carrousel) with all products of the shop? With all products of only one categorie? Or put the SlideShow in anywhere of your shop? Or all options?

Let me Know what do you need, and I could try help for you.

[nico46 10]

I would like the module uses all the products in the shop instead of products, it is possible? a solution to you?.
Thank you to you.

[apples 0]

I have just installed this module, and I think it is great.

But, It is showing at the bottom of my page. So I have an image at the top, then my featured "standard" boxes and under that is the slider.

Is the idea that I am to remove the featured product boxes and just use the slider instead?

As this makes the most logical sense.

Peter

[ferska 0]

Vassag0: i have one question, i see /www.kevip.es and y like to know how you do it this in red square(attach in image) in the detail of product, please help me.
Thanks

[myname 5]

hello .. thanks for this useful work. I have some questions, and excuse my bad English.
1) If you see the form is hard left ... How can I reach the top and bottom bars?
2) Why you see this bar? In your preview I do not see ...
3) How I can bring your form with the higher forms? ... and if you see lower nell'header

[neor 0]

edit slideproducts.css

past this

/* DEFAULT is for three panels in width, adjust as needed
                                  This only matters if JS is OFF, otherwise JS sets this. */
#slider                            { height: 140px; width:520px; margin: right; overflow: hidden;
                                 position: relative; margin: 2px 15px; border-top:1px solid #BDC2C9;border-bottom:1px solid #BDC2C9;}
#mover                            { width: 530px; position: relative; }

.slide                            { padding: 26px 44px; width:530px; height: 110px; float: left; position: relative; }
.slide h1                        { font-size: 17px;}
.slide p                        { font-size: 13px; line-height: 22px; width: 260px;}
.slide a                        { text-decoration: none;}
.slide a:hover                    { text-decoration: underline;}
.slide img                        { position: absolute; top: 10px; left: 350px; vertical-align: middle;}
.slide h2                        { font-size: 17px; padding: 0px 130px; background: none; color: #ac0000;}
#slider-stopper                    { position: absolute; top: 0px; right: 13px; background: none; color: white; 
                                 padding: 4px 8px; font-size: 10px; z-index: 1000; }

demo http://demo1.0fees.net/

[Vassag0 13]

I have just installed this module, and I think it is great.

But, It is showing at the bottom of my page. So I have an image at the top, then my featured “standard” boxes and under that is the slider.

Is the idea that I am to remove the featured product boxes and just use the slider instead?

As this makes the most logical sense.

Peter

To put the module in top of the page. In the prestashop's administration panel, modules, position. There search tools group and click in up for de Slide Features Products.

Vassag0: i have one question, i see /www.kevip.es and y like to know how you do it this in red square(attach in image) in the detail of product, please help me.
Thanks

The www.kevip.es isn't mine. This page is of another user of www.todoprestashop.com. But that you show me, in the red square, is a default option include in PrestaShop. If you attach varius images in one product, they show by this way.

hello .. thanks for this useful work. I have some questions, and excuse my bad English.
1) If you see the form is hard left … How can I reach the top and bottom bars?
2) Why you see this bar? In your preview I do not see …
3) How I can bring your form with the higher forms? … and if you see lower nell’header

You must edit the slideproducts.css file, in modules/slideproducts/css folder, to change the viusal options of the module.
Use the css that neor shows your.

[apples 0]

Vassag0, Cheers, good to know it is that easy.

Prestashop seems pretty darn good.

Peter

[Vassag0 13]

I would like the module uses all the products in the shop instead of products, it is possible? a solution to you?.
Thank you to you.

I will try made it.

However, you cant put in the home categorie the products that you want show in the slide. You can mark all products in home. Is not elegant way, but work.

[myname 5]

Hi .. thanks... 2 questions

1) how I can delete the entire block of the title as the site of http://demo1.0fees.net/ demo?

2) If I wanted to use another image of the background in the title, how do I center the block of the title ... if I set a different block of the title goes hard left?

Thank you

[Vassag0 13]

To delete entire block edit slideproducts.tpl, and delete this code

{l s='featured products' mod='slideproducts'}

This way you delete block and text. If you want delete only the image in background, you must edit the slideproducts.css (it's in the css folder).

Change this code

.slide h2 { font-size: 14px; padding: 0 190px;}

to

.slide h2 { font-size: 14px; padding: 0 190px; background:none;}

If you want center the block of the title, you must use margin-left, in this way

.slide h2 { font-size: 14px; padding: 0 190px;margin-left:10px;}

[nico46 10]

Hi .. thanks... 2 questions
1) how I can delete the entire block of the title as the site of http://demo1.0fees.net/ demo?
2) If I wanted to use another image of the background in the title, how do I center the block of the title ... if I set a different block of the title goes hard left?
Thank you

Edit the file. Css as explained Neora, edit the lines as below to delete the title of the module and replace colors.

/* DEFAULT is for three panels in width, adjust as needed
                                  This only matters if JS is OFF, otherwise JS sets this. */
#slider                            { height: 140px; width:520px; margin: right; overflow: hidden;
                                 position: relative; margin: 2px 15px; border-top:1px solid #BDC2C9;border-bottom:1px solid #BDC2C9;}
#mover                            { width: 530px; position: relative; }

.slide                            { padding: 26px 44px; width:530px; height: 110px; float: left; position: relative; }
.slide h1                        { font-size: 17px;}
.slide p                        { font-size: 13px; line-height: 22px; width: 260px;}
.slide a                        { text-decoration: none;}
.slide a:hover                    { text-decoration: underline;}
.slide img                        { position: absolute; top: 10px; left: 350px; vertical-align: middle;}
.slide h2                        { font-size: 17px; padding: 0px 130px; background: none; color: #ac0000;}
#slider-stopper                    { position: absolute; top: 0px; right: 13px; background: none; color: white; 
                                 padding: 4px 8px; font-size: 10px; z-index: 1000; }

For the background image edit the following line: replaces none by the name of your image and start playing.

#slider-stopper { position: absolute; top: 0px; right: 13px; background: none; color: white;

Thank you a "Neor" for changes to the code.

[twindad 0]

hello! good module.
i would show the newest product istead homefeatured.
how you pass the homefeatured to the module?
i m a beginner....
sorry for my hugly english too...

[nico46 10]

hello! good module.
i would show the newest product istead homefeatured.
how you pass the homefeatured to the module?
i m a beginner....
sorry for my hugly english too...

Pose ta question en français si tu veux là j'ai pas tout compris

[twindad 0]

i dont wont to show homefeatured , i would to show newest product.how?
(je veux changer homefeatured to newest product)

[myname 5]

It does not work any of the advice given by Nico46 and Vassag0.
You have understood my question by looking at the picture attached above? I asked:

1) How can I move the whole background of the title right, because it is off-axis with respect to the slideshow;
2) How can I get the same result that you see on the site http://demo1.0fees.net/?

thanks .. I hope I was clear this time.

[nico46 10]

It does not work any of the advice given by Nico46 and Vassag0.
You have understood my question by looking at the picture attached above? I asked:

1) How can I move the whole background of the title right, because it is off-axis with respect to the slideshow;
2) How can I get the same result that you see on the site http://demo1.0fees.net/?

thanks .. I hope I was clear this time.

I'm sorry I can not do what you want, you Neora answer better than me when it spent on the site.
Sorry to have misunderstood my departure to English is still limited.

[Vassag0 13]

hello! good module.
i would show the newest product istead homefeatured.
how you pass the homefeatured to the module?
i m a beginner....
sorry for my hugly english too...

In the first post I put a present for you... and for all .

[Vassag0 13]

It does not work any of the advice given by Nico46 and Vassag0.
You have understood my question by looking at the picture attached above? I asked:

1) How can I move the whole background of the title right, because it is off-axis with respect to the slideshow;
2) How can I get the same result that you see on the site http://demo1.0fees.net/?

thanks .. I hope I was clear this time.

My English, at same than nico46, is limited. Spanish is better for me.

For the first problem try this. Open slideproducts.tpl, in the second line change this:

to

If you increast the 10px you move to right more the title.

For the second problem, If you want delete the title edit the slideproducts.tpl.
You must delete this code

{l s='featured products' mod='slideproducts'}

For the background and color in the price edit slideproducts.css, do this
.slide h2 { font-size: 14px; padding: 0 190px; background:none; color:red}

I hope this help your, sorry for the inconveniences.

[nico46 10]

Thanks Vassag0 I tested the changes and I got you know.

[Vassag0 13]

Thanks Vassag0 I tested the changes and I got you know.

I'm not sure that I understand you XD.

I supuse the changes purpose are correct.

Thanks for your help.

[myname 5]

Hola vassag0 ... ahora funciona todo bien ...gracias ..tu modulo es una maravila ..de verdad.

Gracias de todo

[Vassag0 13]

Hola vassag0 ... ahora funciona todo bien ...gracias ..tu modulo es una maravila ..de verdad.

Gracias de todo

0_o ¿Hablas castellano? Hubiese sido mas fácil así XDXD

Me alegro que te funcione .

[twindad 0]

hello! good module.
i would show the newest product istead homefeatured.
how you pass the homefeatured to the module?
i m a beginner....
sorry for my hugly english too...

In the first post I put a present for you... and for all .

thank you VERY much

[myname 5]

hola vassag0 ...
¿cuál es la diferencia entre el primer módulo y el nuevo?

[Vassag0 13]

El primer modulo muestra los artículos "favoritos" (destacados) el home. El segundo es exactamente igual en diseño, pero muestra las novedades en lugar de los "favoritos".

Por cierto, ¿eres español? Al menos lo pareces.

[lala01 0]

hello!
what should i do to make this module to works fine to prestashop v 0.9.7?!
i have did all the steps and import jquery.js and it dosen't works. it shows only the slide-1 and no animation.

[Hoodgrown 2]

i'd recommend upgrading your shop. You're not using the latest stable.

[first1 2]

2 Questions:

-How can I make the picture smaller (say like the size of the picture in the current specials block) something like 30x30px?

-how can i add other fields to it, price before discount next or below the current price and make the price red if it has discount.?

thx

[cagrie 15]

omg this is one of the best modules I have seen! Thank you guys!!

[Cenoura 0]

gracias

[langbianiam 0]

The module is based in this script http://css-tricks.com/startstop-slider/

The module show the featured products in a nice SlideShow in your home.

Now two downloads:
1.- slideproducts.zip - Download for a features products in home page.
2.- slidenewproducts.zip - Download for a new products in home page.


*******

04/02/2009 Version 0.2. Fix Bug for module translation (thanks Hoodgrown)

Thanks for share

[first1 2]

How can i make this module display either random products or specials only (either works for me)
and how can i make the picture smaller? like the mini one

This is a very nice module thanks.

[hieloiceberg 14]

Thanks for sharing. Lovely modules!! :cheese:
Maybe you can make the SPECIALS module that will be nice to have %-P

thanks again

[fkeuning 1]

Looks really great! Thanks!
One question though...How can I center the module? I want it the same size as the featured products. That's 536px and centered.Hope you can help.

[Stu583 0]

Excellent module. Really really impressed :-) !!

I have one question (not that important but would be nice!) How do you slow down the slide out? I saw in the JS how to set the delay but cant see anything to with the slide in and out. I just sat here and after looking at a few products slide in and out it hurts the eyes a bit (should'av gone to specsavers really).

Ta,

Stu

[yannsarah 3]

bonjour a toute la fraternité prestashop

j'ai un probleme avec ce module sous internet explorer tout est centré alors que sous chromium, firefox et safari c'est normal. le problème c'est que la majorité des gens sont encore sous IE. Savez vous comment "patcher cela" j'ai vu des sites avec ce module sans ce bug.

je dois avoir fini mes modules pour mettre mes articles et tout ce qui suit une fois que tous les bugs seront réglés.

http://91.121.151.69/~microcin/boutique/index.php (mon url de test)

pareil pour mon module de categories en dessous ca centre tout.

[Tobiasee 0]

Hi.
Been using this module for a while and its great, but i got a major problem. Somehow the module replaces the cart sumary. So instead of showing my added products to the cart it shows what i've modified to the current special products.

what i've edited is:
$category = new Category(18); (org, $category = new Category(1)

Something makes PS think that this addon is the cart sumary or somehow its replaces the cart sumary function. Would really need some help since i dont wanna remove this great module.

I Should add that the module is located in the header of the page if this make any diffrence.

//Tobias

[seastars 0]

hi there

how do i change the text in the topbar "featured products" to my own language.. i cant seem to find the right place to modify it..

[maguila 1]

Hola compañero!

En primer lugar darte las gracias por currarte y compartir con nosotros este maravilloso modulo.

Lo baje y segui las instrucciones, pero no logro cambiar el new products a español, tras leerme las 4 paginas del tema, he encontrado referencias a cambiarlo en las traducciones de modulo con la bandera de ingles, en esa bandera, me aparece el modulo para traducirlo y ponerlo en español, pero cuando le doy a la bandera española, no me aparece el modulo asi que no puedo cambiarlo y como tengo el idioma español predefinido me aparece en ingles....

alguna manita?

Gracias

[langbianiam 0]

The module is based in this script http://css-tricks.com/startstop-slider/

The module show the featured products in a nice SlideShow in your home.

Now two downloads:
1.- slideproducts.zip - Download for a features products in home page.
2.- slidenewproducts.zip - Download for a new products in home page.


*******

04/02/2009 Version 0.2. Fix Bug for module translation (thanks Hoodgrown)

Thank you,
vertical move please and small size for left or right col.

Thanks

[shaka 1]

Hi,

The newproducts Slideshow works for the first two products ...but the images moves alone again and again.. staying always on the same products. but the products sticks... and suddenly the slideshow works again.

Any idea ?

I'm using PS 1.0

[estina 0]

very nice..thank u
i'll try it..

[Icarus 2]

Hey, thanks for this sweet module.

One thing I noticed - I am using the default PrestaShop theme, and with it the price has a gradient background (like the sidebar headers) and is stretched to a 100% width - so it goes UNDER the image.

I am guessing it is easy to change in the CSS, just thought I would mention it.

[sweber25 0]

I fixed the problem by removing some of the blocks that aren't really necessary. These things should be taken into consideration when programming new stuff that someone may have ALL the blocks on and that is going to mess things up.

[sparior12 0]

hey, can anyone help me with my slide product in the homepage. It has a bug in it. after the first product it start showing same products multiple times.. Can some one help me make it so that it shows products just once and move to the next product.. I’ll appreciate it..

Click here to view it on my site.

[linorenzi 0]

Hi Vassag0,

I saw one of your response below...

However, you cant put in the home categorie the products that you want show in the slide. You can mark all products in home. Is not elegant way, but work.

I have tried to do it but it works well only for the first articles... If I try with more the 10 articles (Number of products to display The number of products displayed on homepage (default: 10), it doesn't work normally! The pictures appear three times and the text and price don't move anymore or maybe after 10 seconds!!!

I hope you can fix the problem

I thank you in advance for your answer and for great module

[hkahil 0]

hi there
i ve install the sliderproduct but i was asking myself if that a normal view

[Torbz 6]

Hi there,

I made a small modification to your script and got the slideshow to display featured products in the right column. I hope you like it!

www.twofeathers.co.uk/store

[mark77 0]

Hi there,

I made a small modification to your script and got the slideshow to display featured products in the right column. I hope you like it!

www.twofeathers.co.uk/store

Great ! Can you share with us?

What are the modifications you did to the files? Can you show them us?

Great module, Vassag0 !!

Have anyone installed both modules ? When I do this, on my site, the "New Products" works well but "Home Featured" stucks at the first product.

Maybe they can't work togheter

[dulux 0]

Great module, thanks, how can i choose Especial products at this module?

[Mobelti 1]

great..thanks.

teşekkürler..

[vans 0]

Hi Vassag0

I modified this great module to see it in the left column. Of course i had to change the width informations in the css file... And now i have a problem with the line

I don't find where to change this.
Can u help please?
thanks a lot!

[vans 0]

Oooo!
i see! in the js file.... horrible math calculation .... So thanks a lot for this module...
Now i count!

[dulux 0]

can you explain vans?

[jeckyl 499]

Hi,

It's a very good work, but i think it's not work on prestashop 1.2 because all translation failed. Only translation.

I d'on't know how to change this.

Have you an idea ?


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

Sorry, i can do that in backoffice -> Translation.

Sorry, Sorry

All works fine now.

[Docicz 0]

thx:)

[zenco 0]

excelente muchas gracias por tu contribucion !!

[Torben 4]

I would like the module uses all the products in the shop instead of products, it is possible? a solution to you?.
Thank you to you.

I can't find any answer to this question. I would like the same. To show all the products and not just the products in the Start catagory.

Torben

[wolu44 0]

Hi. How to change price value from price with tax to price without tax. Thanks for reply.

[patrick-lmpp 0]

Bonjour,
Le module est super mais je voudrais une modification. En effet je souhaite afficher mes produits en promotion.
Si quelqu'un pouvait me faire la mofif.
Merci et @ bienôt.
Patrick

[ShowYou 17]

Bonsoir,
je dois être aveuglée par la fatigue mais je n'ai pas trouvé l'info pour mettre ce caroussel dans le header. Il s'incrémente tout seul à l'installation mais je n'arrive pas à le faire apparaitre dans le header.
Pouvez-vous m'indiquer ce que je dois faire ? Merci d'avance

[jeckyl 499]

french

[deeper 0]

Hello
Can i make this module display products from only 1 category (category id)?

[geiri 0]

I want to thank you for this module it is great. I do have a small problem the in only one product description are the foreign letters shown as diamonds. Strange thing is that this is only in this one location...

What can this be??


And is it possible to lengthen the description a bit ...

[tozi 11]

Is it possible to figure more products one under another? thx

[harpua216 0]

For some reason this module does not work with the theme that is included with prestashop. it is visiable but does not slide or move. it is stuck on the first product. The module woks with other templates but not the basic module that comes with prestsashop.

Can anybody point me in the right direction? Thanks

[mr_rem 0]

How can i make this module display either random products

Hello,
to make random this module I made these changes:
edit the file slideproducts.php and go to line 71

        $products = $category->getProducts(intval($params['cookie']->id_lang), 1, ($nb ? $nb : 50));

and replace with

       $products = $category->getProducts(intval($params['cookie']->id_lang), 1, 1000);
       shuffle($products);
       array_splice($products, ($nb ? $nb : 8));

I am a beginner again, then check if it is correct the change.
Thanks for the module. Very nice

[harpua216 0]

thanks for that. any reason this does not work on the older themes?

[blasto 2]

How can i make this module display products from only 1 category (category id)?

[amandloren 6]

Hi,

The newproducts Slideshow works for the first two products ...but the images moves alone again and again.. staying always on the same products. but the products sticks... and suddenly the slideshow works again.

Any idea ?

I'm using PS 1.0

I have the same problem, have you are a soluce ?
I'm using PS 1.2.5

thanks

[elrayser 0]

Bonjour a tous,

moi j'aime bien ce module il fait tres simple et fonctionne a merveille.
cependant j'ai un probleme,je souhaiterais pouvoir changer la couleur des barres 2 et 3 sur cette photo http://www.prestashop.com/?ACT=29&fid=10&aid=6549_Allnhzq0gBlCGerI2hM2&board_id=1
mais dans le css je n'y arrive pas puisque apparent ce n'est pas dedans.

est ce que qelqu'un aurait une idée?

merci

[RoberASolas 0]

Hi, I´m having some troubles with this fantastic module.
I´ll try to explain:
This module has a number of products predefined: 10.
I wanted to use 60.
For any reason, the products started to show bad, start to be some delay between images and prices, and sometimes some products was shown 5 times.

Well, if you down the number of the products, you can prove that all is good again. I started to up the amount of products two by two. And in 16, the thing was starting bad again. If you type 20 products, you can prove the delay is bigger. And if you type 30 or 40 the delay will be more big.

I don´t know if is an issue of my prestashop system or of the module. Anyway, if there are here a programmer... can he or she investigate this please? I´d like to have this module in my site forever.

For info, I´m using Prestashop v1.1.0.5.

Thanx for all.

[patrickvbw 1]

Rober is right, after 14 the module doesn't work properly anymore..

However, i'm having a problem with the module aswell..
In IE the first product slides too far to the left, and the one after that even further, so i end up with 2 products showing half/half.. (see image)

In google chrome and firefox it shows ok..

Any ideas?

[Martin_S 0]

I noticed the sliding stops after some time and the panel stays blank, why? I noticed this in Firefox, not sure if IE does the same. Is there a way to set it for unlimited animations?

[alvanov 0]

great work.. but why my themes does not work with this modules.. even if i change to my prestashop themes. the color still grey. how can i change this? thanks in advance for your solution..

[MrHieu 0]