Jump to content

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


Recommended Posts

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)

6481_TD6NAeCUAGbWwlN2mpvd_t

slideproducts.zip

slidenewproducts.zip

  • Like 2

Share this post


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

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

Your picture is missing the link ID of the mage and the url rewritng (see ?? in the code below) <img src="http://www.salo-fashion.nl/[color=#ff0000]??[/color]-home/[color=#ff0000]??[/color].jpg

here is a working version for PS 1.4.5.1   http://www.bijouxenzeep.nl/slideproducts_for_PS1.4.5.1.rar   *Bug Fix image didn't load correctly in PS 1.4.5.1

Posted Images

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.

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

6537_RSvMWDBHL6LnlLVqMad6_t

Share this post


Link to post
Share on other sites

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

6549_Allnhzq0gBlCGerI2hM2_t

Share this post


Link to post
Share on other sites

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/

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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

6555_d0Rstr499NqUh7nLcsGO_t

Share this post


Link to post
Share on other sites

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;}

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

8604_cP8qQeVLQxgr24yxasaQ_t

Share this post


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

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.

Share this post


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

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

Share this post


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

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

Share this post


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

Share this post


Link to post
Share on other sites

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!

Share this post


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

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.

Share this post


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

Share this post


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

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

Share this post


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

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

12942_748B2pzON08zlxMloT7n_t

Share this post


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

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

Share this post


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

Share this post


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

Share this post


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

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

Share this post


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

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.

Share this post


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

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?

17570_UFTuOyIQ26GZw1b1Jyvq_t

Share this post


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

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?

Share this post


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

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

Share this post


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