PrestaShop Forum

The best place in the world to ask questions about PrestaShop and get advice from our passionate community!

PrestaShop Forum

Jump to content

[MODULE] Home Featured in Column (JQuery)

44 replies to this topic
#1
nickcfc

    PrestaShop Newbie

  • Members
  • Pip
  • 16 posts
Hello everyone

I'm using the program recently and decided to first learn a lot about it.

This is a module I made for my use, and would like to share it with everyone.

This is my first module, the starting point was the documentation of the module "Sliding accordion" that taught me a lot.


Thanks and Credits.

1) rocky - Module "Sliding Accordion" because of its documentation could make this module. - Link -

2) Module "Featured Home" Did not find the original author's name.

3) The module was based on the following scrip JQuery - Link -


DEMO (Left) : - Modulo -


Installation

Copy the folder "cfcspy" into modules, go to modules and install it.

Enter the "css" in your stylesheet.

Obs:

Okay, still has many things to improve, but I believe it is a starting point.
I think it's good module to use the other pages of the site where there is no homefeatured.

Sorry my english, it is the fault of Google

Attached Files



#2
nickcfc

    PrestaShop Newbie

  • Members
  • Pip
  • 16 posts
Download

I do not know how to put on the forum download

:(

Click HERE to download

#3
Ardian Yuli Setyanto

    PrestaShop Fanatic

  • Moderators
  • 1029 posts
Wow, great module. i'm looking for this. thanks for sharing it. How about your top horizontal menu ? is it also based on jquery ? i like it.
thanks

#4
ysco

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1015 posts
Seems like a very good and impressive module.
Thanks a lot for sharing this with us.

Maybe a dumb question, but do i need to copy the info from css and put it in theme css ?
Proberly a newbie question, but please explain where to put the css exactly

Edit: ok i have added your info .css in the global.css from my theme and now it displays your layout.
But the slide effect is not working for me , i am using 1.2.4.

Also yours shows 4 products and the min on the module is 5 can dat be changed to 4 ?


Any idea ?



Thanks.


ysco..

#5
GNeRaL

    PrestaShop Newbie

  • Members
  • Pip
  • 22 posts
Thanks for the module..

But, what is the Baxiou?

http://omploader.org/vMmcxNA/nnn.PNG

#6
nickcfc

    PrestaShop Newbie

  • Members
  • Pip
  • 16 posts
Thanks

Ardian

The menu I'm using is the original "prestashop" without the dynamic mode

ysco

Yes, I separated the "css" because my style sheet is very different from the original, edit your css and put it in the end.

GNeRaL

sorry but some terms I forgot to translate

baixou = lowered, promotion, specials

#7
ysco

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1015 posts
@ nickcfc

Wel i have added your lines in the glonbal.css off my template i use but i have no sliding on the page , it`s all there but nothing is happening
And to change the min to 4 where can you do that ?
And is it possible to change the widht so that it fits the other blocks ? , have try`t in the global.css lines that i have added but it seems that the gif file is not expandable.

ysco..

#8
nickcfc

    PrestaShop Newbie

  • Members
  • Pip
  • 16 posts
Ysco

You can change the number of frames to display in spy.js

$(function () {
$('ul.spy').simpleSpy();
});
(function ($) {
$.fn.simpleSpy = function (limit, interval) {
limit = limit || 4; <<<< Change HERE

the module has to have 1 more than the number you put on the display tables
example: put to display 3 frames, the parameters 4

and cfcspy.php you can change

if ($maxdisplays == 0)
$maxdisplays = 9999;
elseif ($maxdisplays < 5 AND $maxdisplays > 1)
$maxdisplays = 5; <<<< Change Here

Remember : php 1 more then js


this css is the module view and not the entire page, my version is 1.2.4

#9
nickcfc

    PrestaShop Newbie

  • Members
  • Pip
  • 16 posts
sometimes the modules that I picked up here do not work for me if I do the translation into Portuguese, I did not put the file in English languages, try this in BO

#10
ysco

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1015 posts
Thanks for your quick reply`s nickcfc.

I have already fixed the size so that it fit my block size, i have put the png in photoshop and resized the file to 225px and changed the setting in gobal.css also to widht 225px and is working this way.
But how come that the module doesn`t slide , it is only showing as a picture with products but not slide.
So please let me know how to fix the slide problem.

Greats, ysco..

#11
Prestafreak™

    PrestaShop Apprentice

  • Members
  • PipPip
  • 99 posts
Excellent module, thanks for sharing. Is this module made specific for left column? I have tested your module but I cannot hook it in right column. (Or maybe I didn't hook it right, I'm still checking the code) Thanks again....

#12
nickcfc

    PrestaShop Newbie

  • Members
  • Pip
  • 16 posts
how many products you have in store?

the number of products has to be greater than the number shown

example, if the "spy.js" contains 4 frames to display, the settings of module must have 4 +1.

If the number of products is equal or less to the number to display, he stands (not slide)


@Ardian

Only now I understand your question, yes it is also based on jquery

It was based on this article

- LINK -

hope will inspire

#13
ysco

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1015 posts
@ nickcfc

I have 45 different products on my shop.

This is the php file,

Quote


public function getContent()
{
$output = '

'.$this->displayName.'

';
if (Tools::isSubmit('submitspy'))
{
$maxdisplays = Tools::getValue('maxdisplay');
if ($maxdisplays == 0)
$maxdisplays = 9999;
elseif ($maxdisplays < 5 AND $maxdisplays > 1)
$maxdisplays = 4;


And this is the js file,

Quote

$(function () {
$('ul.spy').simpleSpy();
});
(function ($) {
$.fn.simpleSpy = function (limit, interval) {
limit = limit || 3;
interval = interval || 6000;
return this.each(function () {
// 1. setup
// capture a cache of all the list items
// chomp the list down to limit li elements
var $list = $(this),
items = [], // uninitialised
currentItem = limit,
total = 0, // initialise later on
height = $list.find('> li:first').height();
// capture the cache
$list.find('> li').each(function () {
items.push('
  • ' + $(this).html() + '
  • ');
    });
    total = items.length;
    $list.wrap('
    ').parent().css({ height : height * limit });
    $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
    // 2. effect
    function spy() {
    // insert a new item with opacity and height of zero
    var $insert = $(items[currentItem]).css({
    height : 0,
    opacity : 0,
    display : 'none'



    Please tell me where i go wrong.


    ysco..

    #14
    nickcfc

      PrestaShop Newbie

    • Members
    • Pip
    • 16 posts
    prestafreak

    It works well in the right column, just add at the end of "spy.php" before last ")" this line

    function hookRightColumn($params)
    {
    return $this->hookLeftColumn($params);
    }



    before :

    ));
    return $this->display(__FILE__, 'cfcspy.tpl');
    }

    }

    after

    ));
    return $this->display(__FILE__, 'cfcspy.tpl');
    }
    function hookRightColumn($params)
    {
    return $this->hookLeftColumn($params);
    }
    }

    #15
    nickcfc

      PrestaShop Newbie

    • Members
    • Pip
    • 16 posts
    Ysco

    Quote

    ‘; if (Tools::isSubmit(‘submitspy’)) { $maxdisplays = Tools::getValue(‘maxdisplay’); if ($maxdisplays == 0) $maxdisplays = 9999; elseif ($maxdisplays < 5 <<< (4)


    has only a change but that will not make much difference, just the same logic.

    It was to be functioning normally, can you pass the address of your store?

    #16
    ysco

      PrestaShop Fanatic

    • Members
    • PipPipPipPip
    • 1015 posts
    Hello nickcfc,

    http://www.gadgetshop-online.nl

    ysco..

    #17
    nickcfc

      PrestaShop Newbie

    • Members
    • Pip
    • 16 posts
    Ysco

    I saw your page and everything seemed ok, the only difference is that you are with "https" and not really know if it influences the load "spy.js, let's try to change the directory of it.

    most of their "js" point to "https://www.gadgetshop-online.nl/modules/"

    mine is so
     "[removed]</ script>" 
    in cfcspy.tlp change in the line of reference.


    where is "[removed] </ script>"
    to [removed]</ script>


    then confirms that this is the same directory where is the "js"

    Attached Files

    • Attached File  ysco.txt   1bytes   59 downloads


    #18
    jolvil

      PrestaShop Fanatic

    • Members
    • PipPipPipPip
    • 2706 posts
    Nice module but seems not working for me too ! look at http://www.stereosto...antic/boutique/


    why not put css in css folder inside module folder

    with
    <link rel="stylesheet" type="text/css" href="{$module_dir}css/cfcspy.css" media="screen"> in cfcspy.tpl ?

    #19
    ysco

      PrestaShop Fanatic

    • Members
    • PipPipPipPip
    • 1015 posts
    Hello nickcfc,


    Well if i add that line then the front page get screwed up and lots off things dissapear then.

    @ jolvil

    Well i am glad that i am not the only one cause i really thought what a dumbass i whas to get this not working.
    Do you have the same problem that i have ?

    Btw jolvil what is the module u use at the bottom of your webpage ? nice module is that.

    ysco..

    #20
    jolvil

      PrestaShop Fanatic

    • Members
    • PipPipPipPip
    • 2706 posts

    Quote

    Btw jolvil what is the module u use at the bottom of your webpage ? nice module is that.


    Home Featured Carousel http://www.prestasho...viewthread/3159