Jump to content
Romeo.Tran

Share free slideshow module for prestashop 1.4.x

Recommended Posts

Hello,

I have just finished lofslider show module for prestashop 1.4.x
I want to share it for everybody.
Here is lofslider detail and download link:
http://landofcoder.com/prestashop/slider/lof-slider-module
and here is demo link:
http://landofcoder.com/demo/prestashop/cms.php?id_cms=1
I hope i can get your comments to make my module to be well.

Best Regards.

  • Like 3

Share this post


Link to post
Share on other sites

I loved it, thanks for the contribution, I just try in my test store and works well.

One suggestion for a new version is that it can stop the effect when the pointer is ensima, because the effect never stops at any time.

thanks!!

Share this post


Link to post
Share on other sites

It looks nice your demo.
I installed it in Prestashop 1.4 with success but not showing in FO.
Any guidance?
Thanks.

Edit:
It shows up. It was hidden by the Featured Products.
1-How we can position it in the header, top of the page?
2- Is it possible to add customized advetising or images, not only from products or categories?
Thanks.

Share this post


Link to post
Share on other sites
I loved it, thanks for the contribution, I just try in my test store and works well.

One suggestion for a new version is that it can stop the effect when the pointer is ensima, because the effect never stops at any time.

thanks!!


Hello,

The first Thank you very much for your quick comment.
We will create pause and play button to solver your problem.

Best Regards.

Share this post


Link to post
Share on other sites
It looks nice your demo.
I installed it in Prestashop 1.4 with success but not showing in FO.
Any guidance?
Thanks.

Edit:
It shows up. It was hidden by the Featured Products.
1-How we can position it in the header, top of the page?
2- Is it possible to add customized advetising or images, not only from products or categories?
Thanks.


Hello,

1. We will write new guide to position it in the header, top of the page.
2. We will update it in next version of LOFSlider.
Thanks u very much for your comment.
I think They are very necessary for the development my module.

Best Regards.

Share this post


Link to post
Share on other sites

thank you for such an awesome module!!!!
this module is done so professionally and its free!!!

thanks guys! you have helped me alot! :)

Share this post


Link to post
Share on other sites

Romeo.Tran,
You're welcome.
I'll wait for the update and will test it in my website and will leave the feedback. I've already left a feedback in your website.
Good luck in your project and welcome to Prestashop forum.
Regards.

Share this post


Link to post
Share on other sites

Romeo.Tran,
I was wondering if you can make a module for the Header with all options to put Logo, Languages, Cart, Your Account, Search, Welcome Log in, etc... and to be able to customize the color, background color, positioning, inserting images, Gif Animation and flash (swf). If you make such a module with browsers compatibility for Prestashop I'll be your first customer to order.
Thanks for your generosity and professionalism.

Share this post


Link to post
Share on other sites

That is great module. Thanks for sharing.
Have a good time

Share this post


Link to post
Share on other sites

Awesome module love it great work!

Share this post


Link to post
Share on other sites

Romeo.Tran,
I positioned the Lof Slider in the Header of pages but it does not showing up in Front Office.
See screen shot.
Thanks.

42923_03omGJWHYCXIrTV2qn1M_t

Share this post


Link to post
Share on other sites

Hello bruce-rez,

Please download the latest version of LofSlider (1.1).
We fixed out this error.

Share this post


Link to post
Share on other sites

I installed the last version 1.1 and hooked it in 3 different positions, Header of page, Homepage content and Top of pages without any positive result. Please see the screen shots.
Is there any other setup to do in Prestashop BO when hooking the Lof Slider?
Thanks for your contribution.

42965_9lSxzAHoi2yFEVnuY7m3_t

42967_dkSxtZ66eN5AJEmWoRMa_t

42968_1BPq77bpp5f31XeulvEu_t

Share this post


Link to post
Share on other sites

Hi,

This module is looking great. I am a newbie and I can't get PS to see the module. What I don't understand is the third part in your manual.


3. Add code in your module:

Please create new function with name hooklofTop.
‘hook’ is prefix function for hook
‘lofTop’ is name of hook postion
function hooklofTop($params){
return $this->processHook( $params,"lofTop");
}


What module? Where do I have to place this function?

I am a wordpresser. Know my way around there. I could use some help with SP.

Cheers

Marco

Share this post


Link to post
Share on other sites

Hi
Instead of play-pause button you can pause on mouse hover and auto play when mouse is removed

and if possible pls introduce other animations

Share this post


Link to post
Share on other sites

Hi
Instead of play-pause button you can pause on mouse hover and auto play when mouse is removed

and if possible please introduce other animations

Share this post


Link to post
Share on other sites
I installed the last version 1.1 and hooked it in 3 different positions, Header of page, Homepage content and Top of pages without any positive result. Please see the screen shots.
Is there any other setup to do in Prestashop BO when hooking the Lof Slider?
Thanks for your contribution.


Hello,

With some position such as Top of pages, you have to add some stylesheet code to make lofslider display fine.
If you have skill in stylesheet i think it isn't not difficult.

If you use default template of lofslider, please open file
modules\lofslider\tmpl\default\assets\style.css
find the code (default in line 3):
.lof-slider{ position:relative;}


then edit it to

.lof-slider{ position:relative;clear:both; }



If you use default template of lofslider, please open file
modules\lofslider\tmpl\no-shadow\assets\style.css
find the code (default in line 3)

.lof-slider-noshadown{ position:relative; }


then edit it to

.lof-slider-noshadown{ position:relative;clear:both; }



OR The best solutions is create new hook,
You can follow my guide to create new hook:
http://landofcoder.com/our-porfolios/prestashop/slider-a-slideshow/item/64-how-to-add-new-hook-in-prestashop-14.html

Best Regards.

Share this post


Link to post
Share on other sites
Hi,

This module is looking great. I am a newbie and I can't get PS to see the module. What I don't understand is the third part in your manual.

3. Add code in your module:

Please create new function with name hooklofTop.
‘hook’ is prefix function for hook
‘lofTop’ is name of hook postion
function hooklofTop($params){
return $this->processHook( $params,"lofTop");
}


What module? Where do I have to place this function?

I am a wordpresser. Know my way around there. I could use some help with SP.

Cheers

Marco


Hello,

Module is a module which you want to create new hook for it.
You could place funtion in module\YOUR_MODULE_NAME\YOR_MODULE_NAME.php
You could read this document: how to create new module:
http://www.marghoobsuleman.com/blog/how-to-create-prestashop-modules

Best Regards.

Share this post


Link to post
Share on other sites
Hi
Instead of play-pause button you can pause on mouse hover and auto play when mouse is removed

and if possible please introduce other animations


Hello,

Good ideal.
I appreciate your comments.

Share this post


Link to post
Share on other sites

Romeo.Tran,
I tried your solution with css but no result and it's same problem.
I wanted just to let you know here in Prestashop community most of the people are coming for finding the solution for their needs and problem for their online Prestashop store. My self I am trying to build my store and unfortunately I am not a programmer to help you and debugging. I can just copy /paste the codes, no php programmer...

it would be more easier/convenient for the people like me to have a Module already functional and easy to setup in Back Office, commercial (for purchase) or contribution (free).
Anyway thank you for your contribution and keep the good job.
Regards.

Share this post


Link to post
Share on other sites

It will be great if big images could be resized only for slide show, because if i have big size images they look awful in the slideshow. Now I have to have small images for produts to have them nice in the slideshow.

Share this post


Link to post
Share on other sites
It will be great if big images could be resized only for slide show, because if i have big size images they look awful in the slideshow. Now I have to have small images for produts to have them nice in the slideshow.


SOLVED: My settings in Main Slider Setting Create Main Image sized=NO
Main Image Size = 300x300

But now I have another problem:
I have moved the module on top, it appears in the middle top, but it is not full sized like in

http://landofcoder.com/demo/prestashop/cms.php?id_cms=1

but only a part of it, it is centered and not full sized (is not over categories and cart)
http://magazin.myftp.biz/

In the example we can see tiny centered nice navigation buttons, but in my version the are ugly and inversed (if i click left arrow my images move right and vice versa).

see screenshots below

43358_cnGn4rXCf4UDfoKm4GE7_t

43359_BAya7LYi7GAIppg5vbm9_t

43360_Ka4tK3TWb0hacJefSmR5_t

Share this post


Link to post
Share on other sites

Romeo.Tran : very impressive module, can it be used in the center column too ? Meaning, with different widths and heights ?

Share this post


Link to post
Share on other sites

how add prise products after description ? is it possiblem?

Share this post


Link to post
Share on other sites
It will be great if big images could be resized only for slide show, because if i have big size images they look awful in the slideshow. Now I have to have small images for produts to have them nice in the slideshow.


SOLVED: My settings in Main Slider Setting Create Main Image sized=NO
Main Image Size = 300x300

But now I have another problem:
I have moved the module on top, it appears in the middle top, but it is not full sized like in

http://landofcoder.com/demo/prestashop/cms.php?id_cms=1

but only a part of it, it is centered and not full sized (is not over categories and cart)
http://magazin.myftp.biz/

In the example we can see tiny centered nice navigation buttons, but in my version the are ugly and inversed (if i click left arrow my images move right and vice versa).

see screenshots below

Hello,

We created new hook in prestashop to do it show in top name is LofTop.
Please create new hook i wrote guide "How to create new hook" in this thread.
I viewed your web, you have to re-config main image width in admin.

Share this post


Link to post
Share on other sites

is it possible to move description to left or right image ? all text move to left or right images ? not over images?

Share this post


Link to post
Share on other sites
is it possible to move description to left or right image ? all text move to left or right images ? not over images?


Hello,
Please open file lofslider/tmpl/no-shadow/assets/style.css
edit it (default in line 11):
.lof-slider-noshadown .lof-description{
   z-index:3px;
   position:absolute;
   bottom:50px;
   left:0px;
   width:350px;
   background:url(images/bg_trans.png);
   height:100px;
   padding:10px;
   -moz-box-shadow:0 0 1px #333;
   -webkit-box-shadow:0 0 1px #333;
}


to

.lof-slider-noshadown .lof-description{
   z-index:3px;
   position:absolute;
   bottom:50px;
   right:0px;
   width:350px;
   background:url(images/bg_trans.png);
   height:100px;
   padding:10px;
   -moz-box-shadow:0 0 1px #333;
   -webkit-box-shadow:0 0 1px #333;
}

Share this post


Link to post
Share on other sites

This really does look great, thanks for taking the time to develop it.

I'm looking forward to trying it on our store, first I have to create a test store to try it on.

Share this post


Link to post
Share on other sites

Hi

I've been having a play with the module.

One question, how do you get the module to center itself? It always seems to be hooked to the left hand side.

Its the same in your example website and also it those that others have given screen shots of.

Its looking good so far, I'm liking it. Just need to get it to centralise

Share this post


Link to post
Share on other sites

How to add new hook

Where to do this?

3. Add code in your module:

Please create new function with name hooklofTop.
‘hook’ is prefix function for hook
‘lofTop’ is name of hook postion

function hooklofTop($params){
return $this->processHook( $params,"lofTop");
}
Note:
In hooklofTop we use function return processHook. You can add customer code to display your module.

Share this post


Link to post
Share on other sites

Heres what I am talking about

The slider is pushed over to the left so you loose the shadow on the left hand side. I like the shadow effect and would like to keep it.

43706_PV7jO5V2v9r78CMpzi4v_t

Share this post


Link to post
Share on other sites

Thanks for this module, I will translate to spanish and will send it to you.... if you want to add it to the module.

Share this post


Link to post
Share on other sites
Hi

I've been having a play with the module.

One question, how do you get the module to center itself? It always seems to be hooked to the left hand side.

Its the same in your example website and also it those that others have given screen shots of.

Its looking good so far, I'm liking it. Just need to get it to centralise

Hello
You can edit code in file modules/lofslider/tmpl/default/assets/style.css
edit code from
.lof-slider .lof-wrapper {
   box-shadow: 0 0 10px #333333;
   overflow: hidden;
   position: relative;
}


to

.lof-slider .lof-wrapper {
   box-shadow: 0 0 10px #333333;
   margin-left: 10px;
   overflow: hidden;
   position: relative;
}


with margin-left: 10px; you can edit 10px to any number.

Share this post


Link to post
Share on other sites
How to add new hook

Where to do this?
3. Add code in your module:

Please create new function with name hooklofTop.
‘hook’ is prefix function for hook
‘lofTop’ is name of hook postion

function hooklofTop($params){
return $this->processHook( $params,"lofTop");
}
Note:
In hooklofTop we use function return processHook. You can add customer code to display your module.


Hello, I edited my post in
http://landofcoder.com/download/guides-docs/docs-guide-prestashop/128-how-to-add-new-hook-in-prestashop-14.html
You can edit this code in module/lofslider/lofslider.php file

Share this post


Link to post
Share on other sites
Thanks for this module, I will translate to spanish and will send it to you.... if you want to add it to the module.

Please do it and sent it for me.
I will update it into next version of slider and share it.
Thank u very much

Share this post


Link to post
Share on other sites
Heres what I am talking about

The slider is pushed over to the left so you loose the shadow on the left hand side. I like the shadow effect and would like to keep it.

Hello,
Please open file:
modules/lofslider/tmpl/default/assets/style.css
You can find the code default in line 6
.lof-slider .lof-wrapper{ -moz-box-shadow:0 0 10px #333;-webkit-box-shadow:0 0 10px #333; position:relative; overflow:hidden;}
You can edit -moz-box-shadow:0 0 10px #333; to -moz-box-shadow:-2px 2px 14px #333;

Share this post


Link to post
Share on other sites

Add new hook

After doing all steps my shop looks like $!T, no buttons, no navigation, see screenshot: :down:

43791_2KsRQb70OiWNM2xUjJaI_t

Share this post


Link to post
Share on other sites

Hi

Thanks for the response. I've tried both your suggestions. The first one

.lof-slider .lof-wrapper {
box-shadow: 0 0 10px #333333;
overflow: hidden;
position: relative;
}

This piece of code does not exist in the file?

The second suggestion I have changed as you said but it made no difference at all.

Appreciate you trying to help out though

Regards Simon

Share this post


Link to post
Share on other sites
Add new hook

After doing all steps my shop looks like $!T, no buttons, no navigation, see screenshot: :down:

Please PM for me your ftp and admin account.

Share this post


Link to post
Share on other sites
Hi

Thanks for the response. I've tried both your suggestions. The first one

.lof-slider .lof-wrapper {
box-shadow: 0 0 10px #333333;
overflow: hidden;
position: relative;
}

This piece of code does not exist in the file?

The second suggestion I have changed as you said but it made no difference at all.

Appreciate you trying to help out though

Regards Simon

Please send me your web link.

Share this post


Link to post
Share on other sites
Add new hook

After doing all steps my shop looks like $!T, no buttons, no navigation, see screenshot: :down:

Please PM for me your ftp and admin account.


Sent you a PM with all acounts

Share this post


Link to post
Share on other sites

'mazing! Thank you!
Btw is there any way I can link a slide to a category rather than a product? Thanks!

Share this post


Link to post
Share on other sites

How can I choose specific images to show in the slider without them being products?

Share this post


Link to post
Share on other sites

Can't get this script to work.

I followed this guide (http://landofcoder.com/download/guides-docs/docs-guide-prestashop/128-how-to-add-new-hook-in-prestashop-14.html) to insert the module at the top of the page (using lofTop), but nothing appears.

And in /override/classes/ i have a _FrontControllers.php file (11kb) and not a FrontController.php (like in your guide and about 1,6kb), what i have to do?

Overwrite that file? Or simply create another new file.

Note that i've checked out my mysql table and the hook seems to be correctly inserted.

Thank you in advance ;)

EDIT: Solved enabling force compiling.

Now, i've disabled CSS3 but i still continue to not showing slideshow border on Internet Explorer 8. Any suggestions?

Share this post


Link to post
Share on other sites
How can I choose specific images to show in the slider without them being products?


I'm also interested in this, I would like to create a folder and put pictures in it and then play this pictures in this nice slideshow module. Thank you!

Share this post


Link to post
Share on other sites

Hi, thanks for the module!!
I have a small problem: link in the description goes to the homepage.. instead of the product page. how to fix it?

Share this post


Link to post
Share on other sites

Hi thanks for this module,
so far i saw 2 mistakes in the code :

the target won't work because on line 218, you have to remove the $ before target, here is the correction:

$smarty->assign( 'target','target="'.$open_target.'"');



The link won't go to the product page, here is the correction (in the .tpl, line 17)




in the default css :

/*line 11, instead of i: z-index:3px*/
.lof-slider .lof-description {z-index:3; }
/*therefore you have to put a z-index for the nav wrapper:*/
.lof-slider .lof-navigator-wapper { z-index:5}




I'll test it and see if i find more issues in it...

Thx

Share this post


Link to post
Share on other sites
How can I choose specific images to show in the slider without them being products?


I'm also interested in this, I would like to create a folder and put pictures in it and then play this pictures in this nice slideshow module. Thank you!


Hi, thanks for sharing. Great module. I'm also interested in this, to add also a image in "get product from"?

--------------------------------------------------------------------
Share [free] theme THGR00001 for Prestashop v1.4
See a DEMO on PrestaShop v1.4.1

For download thgr00001.zip

Register on graphileom.fr
Once registration is complete, you can download the file thgr00001.zip on the product page "DOWNLOAD"

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

Share this post


Link to post
Share on other sites
Romeo.Tran,
I was wondering if you can make a module for the Header with all options to put Logo, Languages, Cart, Your Account, Search, Welcome Log in, etc... and to be able to customize the color, background color, positioning, inserting images, Gif Animation and flash (swf). If you make such a module with browsers compatibility for Prestashop I'll be your first customer to order.
Thanks for your generosity and professionalism.


Hello Mate.
I have just create a module in header - you can login, register, show cart in popup.
Please view more in here:
http://landofcoder.com/prestashop/other/lof-user-infor-panel

Share this post


Link to post
Share on other sites
Hi thanks for this module,
so far i saw 2 mistakes in the code :

the target won't work because on line 218, you have to remove the $ before target, here is the correction:
$smarty->assign( 'target','target="'.$open_target.'"');



The link won't go to the product page, here is the correction (in the .tpl, line 17)




in the default css :

/*line 11, instead of i: z-index:3px*/
.lof-slider .lof-description {z-index:3; }
/*therefore you have to put a z-index for the nav wrapper:*/
.lof-slider .lof-navigator-wapper { z-index:5}




I'll test it and see if i find more issues in it...

Thx



Thanks man.
I updated lof slider module follow your suggest.
Dear Everybody: Please download version 1.2

Share this post


Link to post
Share on other sites

Hi,

for my needs i added a play and stop button,

here they are,...

will appreciate any comments on it :

 


playpause:function( manual, item ){

this.stop( this.settings.interval,'next', false );
this.settings.auto=false;
return this;
},
playrotate:function( manual, item ){

this.play( this.settings.interval,'next', true );
this.settings.auto=true;
return this;
},

 

And register my buttons :


registerButtonsControl:function( eventHandler, objects, self ){
for( var action in objects ){
switch (action.toString() ){
case 'next':
objects[action].click( function() { self.next( true ) } );
break;
case 'previous':
objects[action].click( function() { self.previous( true ) } );
break;
case 'playpause':/*Pause it */
  objects[action].click( function() { self.playpause( true ) } );
break;
case 'playrotate':/*Play it*/
  objects[action].click( function() { self.playrotate( true ) } );
break;	
}
}
return this;
},

 

i add them in my var (initjs.php):


var buttons = { previous:$('#lofslider<?php echo $prfSlide; ?><?php echo $blockid; ?> .lof-previous') ,
next:$('#lofslider<?php echo $prfSlide; ?><?php echo $blockid; ?> .lof-next'),
playpause:$('.playpause'),playrotate:$('.playrotate'),};

 

then,

put it in my tpl


<div id="controller_slider">
<div onclick="return false" href="" class="playpause"></div>
<div onclick="return false" href="" class="playrotate"></div>
</div>

 

it works for me, what do you think ?

  • Like 1

Share this post


Link to post
Share on other sites

@Romeo you're welcome, i guess it will be easy from this point to make it stop on hover and make an option in the back-office to choose between the play/pause and pause on hover...

for my purpose i added some more js to fade in/out the div with the play/pause when i hover the plugin but i'm sure you'll find an elegant solution for that too,

thank you for this nice plugin,

best

Share this post


Link to post
Share on other sites

a bug fixed in IE7 because of an extra coma in the last line in the modification i've made to put an extra button play/pause:

var buttons = {

previous: $('#lofsliderhome59 .lof-previous'),

next: $('#lofsliderhome59 .lof-next'),

playpause: $('.playpause'),

playrotate: $('.playrotate')

};

Share this post


Link to post
Share on other sites

Hi,

 

when I installed the module, I noticed it's always the same products in the same order that are presented.

 

Is it possible to have them presented randomly?

 

I mean, the module shows 5 products, and when I refresh the page, the module will present 5 new pictures/products instead of showing the same ones.

 

great module

Share this post


Link to post
Share on other sites

Please open file: modules\lofslider\lofslider.php

 

Change code in line 255

FROM

function getProductsV14($where='', $limiStart=0, $limit=10, $order=''){ 
 global $cookie, $link;
 $id_lang = intval($cookie->id_lang);

 $sql = '
 SELECT DISTINCT p.id_product, p.*, pa.`id_product_attribute`, pl.`description`, pl.`description_short`, pl.`available_now`, pl.`available_later`, pl.`link_rewrite`, pl.`meta_description`, pl.`meta_keywords`, pl.`meta_title`, pl.`name`, i.`id_image`, il.`legend`, m.`name` AS manufacturer_name, tl.`name` AS tax_name, t.`rate`, cl.`name` AS category_default, DATEDIFF(p.`date_add`, DATE_SUB(NOW(), INTERVAL '.(Validate::isUnsignedInt(Configuration::get('PS_NB_DAYS_NEW_PRODUCT')) ? Configuration::get('PS_NB_DAYS_NEW_PRODUCT') : 20).' DAY)) > 0 AS new,
  (p.`price` * IF(t.`rate`,((100 + (t.`rate`))/100),1)) AS orderprice

 FROM `'._DB_PREFIX_.'category_product` cp
 LEFT JOIN `'._DB_PREFIX_.'product` p ON p.`id_product` = cp.`id_product`
 LEFT JOIN `'._DB_PREFIX_.'product_attribute` pa ON (p.`id_product` = pa.`id_product` AND default_on = 1)
 LEFT JOIN `'._DB_PREFIX_.'category_lang` cl ON (p.`id_category_default` = cl.`id_category` AND cl.`id_lang` = '.(int)($id_lang).')
 LEFT JOIN `'._DB_PREFIX_.'product_lang` pl ON (p.`id_product` = pl.`id_product` AND pl.`id_lang` = '.(int)($id_lang).')
 LEFT JOIN `'._DB_PREFIX_.'image` i ON (i.`id_product` = p.`id_product` AND i.`cover` = 1)
 LEFT JOIN `'._DB_PREFIX_.'image_lang` il ON (i.`id_image` = il.`id_image` AND il.`id_lang` = '.(int)($id_lang).')
 LEFT JOIN `'._DB_PREFIX_.'tax_rule` tr ON (p.`id_tax_rules_group` = tr.`id_tax_rules_group`
										 AND tr.`id_country` = '.(int)Country::getDefaultCountryId().'
										    AND tr.`id_state` = 0)
 LEFT JOIN `'._DB_PREFIX_.'tax` t ON (t.`id_tax` = tr.`id_tax`)
 LEFT JOIN `'._DB_PREFIX_.'tax_lang` tl ON (t.`id_tax` = tl.`id_tax` AND tl.`id_lang` = '.(int)($id_lang).')
 LEFT JOIN `'._DB_PREFIX_.'manufacturer` m ON m.`id_manufacturer` = p.`id_manufacturer` 
 WHERE  p.`active` = 1'.$where;  
 $sql .= ' ORDER BY '.$order
 .' LIMIT '.$limiStart.','.$limit; 
 $result = Db::getInstance(_PS_USE_SQL_SLAVE_)->ExecuteS($sql); 
 return Product::getProductsProperties($id_lang, $result);
}

TO

function getProductsV14($where='', $limiStart=0, $limit=10, $order=''){ 
 global $cookie, $link;
 $id_lang = intval($cookie->id_lang);

 $sql = '
 SELECT DISTINCT p.id_product, p.*, pa.`id_product_attribute`, pl.`description`, pl.`description_short`, pl.`available_now`, pl.`available_later`, pl.`link_rewrite`, pl.`meta_description`, pl.`meta_keywords`, pl.`meta_title`, pl.`name`, i.`id_image`, il.`legend`, m.`name` AS manufacturer_name, tl.`name` AS tax_name, t.`rate`, cl.`name` AS category_default, DATEDIFF(p.`date_add`, DATE_SUB(NOW(), INTERVAL '.(Validate::isUnsignedInt(Configuration::get('PS_NB_DAYS_NEW_PRODUCT')) ? Configuration::get('PS_NB_DAYS_NEW_PRODUCT') : 20).' DAY)) > 0 AS new,
  (p.`price` * IF(t.`rate`,((100 + (t.`rate`))/100),1)) AS orderprice

 FROM `'._DB_PREFIX_.'category_product` cp
 LEFT JOIN `'._DB_PREFIX_.'product` p ON p.`id_product` = cp.`id_product`
 LEFT JOIN `'._DB_PREFIX_.'product_attribute` pa ON (p.`id_product` = pa.`id_product` AND default_on = 1)
 LEFT JOIN `'._DB_PREFIX_.'category_lang` cl ON (p.`id_category_default` = cl.`id_category` AND cl.`id_lang` = '.(int)($id_lang).')
 LEFT JOIN `'._DB_PREFIX_.'product_lang` pl ON (p.`id_product` = pl.`id_product` AND pl.`id_lang` = '.(int)($id_lang).')
 LEFT JOIN `'._DB_PREFIX_.'image` i ON (i.`id_product` = p.`id_product` AND i.`cover` = 1)
 LEFT JOIN `'._DB_PREFIX_.'image_lang` il ON (i.`id_image` = il.`id_image` AND il.`id_lang` = '.(int)($id_lang).')
 LEFT JOIN `'._DB_PREFIX_.'tax_rule` tr ON (p.`id_tax_rules_group` = tr.`id_tax_rules_group`
										 AND tr.`id_country` = '.(int)Country::getDefaultCountryId().'
										    AND tr.`id_state` = 0)
 LEFT JOIN `'._DB_PREFIX_.'tax` t ON (t.`id_tax` = tr.`id_tax`)
 LEFT JOIN `'._DB_PREFIX_.'tax_lang` tl ON (t.`id_tax` = tl.`id_tax` AND tl.`id_lang` = '.(int)($id_lang).')
 LEFT JOIN `'._DB_PREFIX_.'manufacturer` m ON m.`id_manufacturer` = p.`id_manufacturer` 
 WHERE  p.`active` = 1'.$where;  
 $sql .= ' ORDER BY RAND() LIMIT '.$limiStart.','.$limit; 
 $result = Db::getInstance(_PS_USE_SQL_SLAVE_)->ExecuteS($sql); 
 return Product::getProductsProperties($id_lang, $result);
}

Share this post


Link to post
Share on other sites

ok the new code to make it random works very well!

 

Now I have 1 small problem:

 

- when I click on the product title it brings me back to the homepage

- when i click on the product image it takes me to the product page

 

How can I fix the problem with the title to redirect to product page?

 

notes:

- i use latest slider v1.2

- i use latest prestashop v1.4.4.1

 

 

UPDATE FIX (REPLACE THE CODE in default.tpl)

 

<!-- MAIN CONTENT -->

<div class="lof-main-outer" style="height:{$params->get('main_height',300)}px;width:{$params->get('main_width',650)}px;">

<ul class="lof-main-wapper">

{foreach from=$products item=product name=blockLofSlideShow}

<li style="width:{$params->get('main_width','650')}px; height:{$params->get('main_height','300')}px; display:block">

<a href="{$product.link}" title="$product.name" class="product_image">

<img src="{$product.mainImge}" alt="{$product.name|escape:html:'UTF-8'}" />

</a>

{if ($params->get('slider_layout','image-description')=='image-description')}

<div class="lof-description">

<h4 class="lof-title">

<a {$target} href="{$row->link}" title="{$product.name}">

{$product.name}

</a>

</h4>

{$product.description}

</div>

{/if}

</li>

{/foreach}

</ul>

</div>

 

TO:

 

 

<!-- MAIN CONTENT -->

<div class="lof-main-outer" style="height:{$params->get('main_height',300)}px;width:{$params->get('main_width',650)}px;">

<ul class="lof-main-wapper">

{foreach from=$products item=product name=blockLofSlideShow}

<li style="width:{$params->get('main_width','650')}px; height:{$params->get('main_height','300')}px; display:block">

<a href="{$product.link}" title="$product.name" class="product_image">

<img src="{$product.mainImge}" alt="{$product.name|escape:html:'UTF-8'}" />

</a>

{if ($params->get('slider_layout','image-description')=='image-description')}

<div class="lof-description">

<h4 class="lof-title">

<a {$target} href="{$product.link}" title="{$product.name}">

{$product.name}

</a>

</h4>

{$product.description}

</div>

{/if}

</li>

{/foreach}

</ul>

</div>

Share this post


Link to post
Share on other sites

haha ok I found another bug but this one I don't know how to fix, I suspect it's somewhere in the TPL file that we need to adjust. It's more of a cosmetic bug

 

When we hover over the image or the product title, it shows an alt= $product.name instead of showing product name.

 

How can we fix this?

 

update: it works now, I don't know what I changed :$ I recompiled I think

Share this post


Link to post
Share on other sites

hi there. random choice does not work. i changed code but nothing. I use PS 1.3.6.0

 

how can I do random choice for "all categories" ? many thanks if you help

Share this post


Link to post
Share on other sites

Hello Romeo Tran,

 

Thank you for this useful module. I have a problem with it for some reason it doesn't load- all i get is the black 'loading' circle but, no pictures or products come up? I have selected products but it doesnt seem to work?

 

I appreciate your help

Share this post


Link to post
Share on other sites

template folder "no shadow"

 

default.tpl modules/lofslider/tmpl/no-shadow/

 

<div id="lofslider{$prfSlide}{$blockid}" class="lof-slider-noshadown" style="height:{$moduleHeight}; width:{$moduleWidth}">
<div class="lof-wrapper {$css3Class}">
{if ($params->get('preload',1)==1)}
<div class="preload"><div></div></div>
{/if}
<!-- MAIN CONTENT -->
 <div class="lof-main-outer" style="height:{$params->get('main_height',300)}px;width:{$params->get('main_width',650)}px;">
  <ul class="lof-main-wapper">
{foreach from=$products item=product name=blockLofSlideShow}
		 <li style="width:{$params->get('main_width','650')}px; height:{$params->get('main_height','300')}px; display:block">
			 <a href="{$product.link}" title="{$product.name}" class="product_image">
			  <img src="{$product.mainImge}"  alt="{$product.name|escape:html:'UTF-8'}" title="{$product.name}" />
			 </a>
				   {if ($params->get('slider_layout','image-description')=='image-description')}
					 <div class="lof-description">
						<h4 class="lof-title">
							<a  {$target}  href="{$product.link}" title="{$product.name}">
							{$product.name|escape:htmlall:'UTF-8'|truncate:39}
							</a>
						</h4>
   <p style="margin-top:0px; width:365px; height:30px; margin-left:15px">
						<a href="{$product.link}" style="color:#5D717E; text-decoration:none;">{$product.description|escape:html:'UTF-8'}</a>
   </p>
   <p class="price_container" style="margin-top:-15px">
   <span class="price" style="font-size: 17px; color:#99D001; margin-left:90px">
   {displayWtPrice p=$product.price}
   </span>
   </p>
					</div>
				   {/if}
			</li>
		{/foreach}
</ul>  
 </div>
 <!-- END MAIN CONTENT -->
  {if ($showButtons==1)}
 <div class="lof-buttons-control lof-{$params->get('nav_pos','horizontal')}">
<div onclick="return false" href="" class="lof-next"></div>
  <div onclick="return false" href="" class="lof-previous"></div>
 </div>
  {/if}
 {if ($params->get('nav_pos','horizontal')!='none')}
  <div class="lof-navigator-wapper lof-{$params->get('navigator_pos','horizontal')}">
		<div class="lof-navigator-outer">
			<ul class="lof-navigator">
				{foreach from=$products item=product name=blockLofSlideShow}
				<li>
				   <img src="{$product.thumbImge}" height="{$thumb_size.height}" width="{$thumb_size.width}" alt="{$product.name|escape:html:'UTF-8'}" />
				</li>
				 {/foreach}
			</ul>
		</div>
  </div>
	 {/if}
</div>
 {if ($params->get('shadow',1)==1)}
 <div class="lof-bottom-bg"> </div>
{/if}
</div>

 

style.css modules/lofslider/tmpl/no-shadow/assets/

 

@charset "utf-8";
/* CSS Document */
.lof-slider-noshadown{ position:relative;clear:both; }
.lof-slider-noshadown, .lof-slider-noshadown a { color:#FFF; }
.lof-slider-noshadown li{ background:none!important; }
.lof-slider-noshadown .lof-wrapper { position:relative; overflow:hidden;}
.lof-slider-noshadown .preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF; -moz-box-shadow:0 0 8px #CCC;-webkit-box-shadow:0 0 8px #CCC}
.lof-slider-noshadown .preload div{ height:100%;width:100%; background:transparent url(images/load-indicator.gif) no-repeat scroll 50% 50%;}
.lof-slider-noshadown .lof-main-outer{ position:relative; z-index:3px; overflow:hidden; }
/*******************************************************/
.lof-slider-noshadown .lof-description{
z-index:3px;
position:absolute;
bottom:170px;
left:0px;
width:510px;
color: #5D717E;
background: #F4F5F7;
height:100px;
padding:10px;
margin-left:15px;
border-radius: 5px;
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7
}
.lof-slider-noshadown .lof-description h4{margin:0px;padding:10px 0px 5px 0px; }
.lof-slider-noshadown .lof-description h4 a{
color: #5D717E;
text-decoration: none;
font-size:14px;
margin-left:15px
}
.lof-slider-noshadown .lof-description p{ margin:0 8px; padding:8px 0}
.lof-slider-noshadown .lof-description .lof-extrainfo{ padding:0;margin:0 }
.lof-slider-noshadown .lof-description h2{ padding:0; margin:15px 0 0 0px;}
.lof-slider-noshadown .lof-description .lof-extrainfo a{
margin:0;
background:#C01F25;
padding:2px 3px;
text-transform:uppercase;
text-decoration:none;
font-size:86%;
font-weight:bold;
}
.lof-slider-noshadown .lof-description .lof-extrainfo a:hover{
text-decoration:underline;
}
.lof-slider-noshadown .lof-description .lof-extrainfo i {
font-size:86%;
}
/* main flash */
.lof-slider-noshadown ul.lof-main-wapper{
/* margin-right:auto; */
overflow:hidden;
padding:0px;
margin:0;
position:absolute;
overflow:hidden;
}
.lof-slider-noshadown ul.lof-main-wapper li{
overflow:hidden;
padding:0px;
margin:0px;
float:left;
position:relative;
}
.lof-slider-noshadown .lof-opacity  li{
position:absolute;
top:0;
left:0;
float:inherit;
}
.lof-slider-noshadown ul.lof-main-wapper li img{
padding:0;
margin-top:20px;
margin-left:425px;
z-index: 1;
position:absolute
}
/* item navigator */
.lof-slider-noshadown .lof-navigator-wapper {
position:absolute;
bottom:10px;
right:10px;
background:url(images/transparent_bg.png) repeat;
padding:5px 0px;
-moz-box-shadow:0 0 8px #CCC;
-webkit-box-shadow:0 0 8px #CCC
}
.lof-slider-noshadown .lof-navigator-outer{
position:relative;
z-index:2;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
}
.lof-slider-noshadown ul.lof-navigator{
top:0;
padding:0;
margin:0;
position:absolute;
width:100%;
}
.lof-slider-noshadown ul.lof-navigator li{
cursor:hand;
cursor:pointer;
list-style:none;
padding:0;
margin-left:0px;
overflow:hidden;
float:left;
display:block;
text-align:center;
}
.lof-slider-noshadown ul.lof-navigator li img{
border:#666 solid 3px;

}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
border:#A8A8A8 solid 3px;
}
.lof-slider-noshadown .lof-buttons-control .lof-next, .lof-slider-noshadown .lof-buttons-control .lof-previous{
display:block;
color:#FFF;
cursor:pointer; cursor:hand; width:17px!important; height:17px
}
.lof-slider-noshadown .lof-buttons-control{
position:absolute;
bottom:175px;
left:10%;
width:70px;
height:30px;
z-index:3
}
.lof-slider-noshadown .lof-buttons-control .lof-next {float:right;text-indent:-999px;margin:10px 28px 0 0;background:url(images/go-next.png) no-repeat right center; opacity:0.3}
.lof-slider-noshadown .lof-buttons-control .lof-previous {float:left;text-indent:-999px;margin:10px 0 0 0px;background:url(images/go-prev.png) no-repeat left center;opacity:0.3}
.lof-slider-noshadown .lof-bottom-bg {height:28px; width:100%;background:url(images/bottom-bg.png) no-repeat center;}
.lof-slider-noshadown .lof-buttons-control .lof-next:hover{opacity:0.9}
.lof-slider-noshadown .lof-buttons-control .lof-previous:hover{opacity:0.9}
/* CSS3 Style */
.lof-slider-noshadown .lof-css3{ -moz-box-shadow:0 0 10px #333; -webkit-box-shadow:0 0 10px #333; box-shadow: 0px 0px 10px #333; }
.lof-slider-noshadown .lof-css3 .lof-navigator-wapper{
-moz-box-shadow:0 0 8px #CCC;
-webkit-box-shadow:0 0 8px #CCC;
 box-shadow: 0px 0px 10px #333;
}

 

and next and previous buttons. Put to folder modules/lofslider/tmpl/no-shadow/assets/images/

 

post-156018-0-78202000-1322524502.png with name "go-next.png"

post-156018-0-96090400-1322524515.png with name "go-prev.png"

 

 

71962549.png

 

to randomize products then selected "all categories"

 

 

change lines 244-245

and lines 279-280

 

in modules\lofslider\lofslider.php

 

from

 

$sql .= ' ORDER BY '.$order
 .' LIMIT '.$limiStart.','.$limit;

 

to

 

 $sql .= ' ORDER BY RAND() '
 .' LIMIT '.$limiStart.','.$limit;

Share this post


Link to post
Share on other sites

My lof slider is half sized (see picture)

 

I didn't find the way to set width to enlarge it.

 

How to do it? please

 

 

Share this post


Link to post
Share on other sites

My lof slider is half sized (see picture)

 

I didn't find the way to set width to enlarge it.

 

How to do it? please

 

 

 

in back office.. in module settings. module width

 

backoffice

Share this post


Link to post
Share on other sites

 

in back office.. in module settings. module width

 

backoffice

 

Thank you Jevgen but when I change Module Width in BO this doesn't change anything in Front !

Have a look here, width is 580

http://www.capasie.com/ps137/

Share this post


Link to post
Share on other sites

I don't know why but I can't modify main_ width setting

 

I didn't change any code in tpl

<div class="lof-main-outer" style="height:{$params->get('main_height',300)}px;width:{$params->get('main_width',650)}px;">

 

main_width',650 but in front 300px

Share this post


Link to post
Share on other sites

OK SOLVED I understand now, I had to set Create Main Image sized - yes and feed height and width

 

and after set Create Main Image sized - no and choose image size.

 

These are 2 differents settings, i was thinking I had to choose one of them.

 

If I want to change width or height, then I ve to set and update again image size.

 

 

Perhaps this could be improuved to be more clear for user

Share this post


Link to post
Share on other sites

I changed style.css then I wanted to return to the original file no longer changeanything on the page. although I rewrote the original file or I deleted. module operateas if nothing happens. Where do keep your settings in style.css? delete the file I hadthe same result since the last change. force compile it on, no cache.

 

sorry for english .. google traslate

 

I'll post in Romanian can find a better translation

 

am modificat style.css apoi am vrut sa revin la fisierul initial nu se mai modifica nimic in pagina. cu toate ca am rescris fisierul original sau chiar l-am sters. modulul functiona de parca nu se intamplase nimic. unde anume ţine setarile facute in style.css ? stergerea fisierului am avut acelasi rezultat de la ultimile modificari. force compile este on, no cache.

Share this post


Link to post
Share on other sites

Hello Romeo.Tran

 

very good module, thank you.

 

But one question although it was asked several times but without answer still. Is it possible to use custom images (not products) in custom folder and assign a link with every image if needed?

 

Thanks

Share this post


Link to post
Share on other sites

Hello,

I have just finished lofslider show module for prestashop 1.4.x

I want to share it for everybody.

Here is lofslider detail and download link:

http://landofcoder.c...f-slider-module

and here is demo link:

http://landofcoder.c...ms.php?id_cms=1

I hope i can get your comments to make my module to be well.

Best Regards.

Congratullations! perfert result, perfect and intuitive options. Good job.

Share this post


Link to post
Share on other sites