HomeSlider module general understanding

[Séane]

Hello,

Working on a personal them to get to know Thirty Bees, I am stripping down the code to better understand how it works.

I've come to the HomeSlider module which is a bit painful to me.

Basically, I am re-arranging the structure of the templates/modules, so it is easier for me to play with.

I duplicated the module into my theme folder:

Theme_Name > modules > homeslider >

- header.tpl

- homeslider.tpl

- index.php

 

The module is called through the 'displayTopColumn' hook which was called in the header.tpl initially.

I decided to call the hook in another .tpl, called topcolumn.tpl.

This tpl contains:

{capture name='displayTopColumn'}{hook h='displayTopColumn'}{/capture}

{if !empty($smarty.capture.displayTopColumn)}

<div id="top_column" class="row">{$smarty.capture.displayTopColumn}</div>

{/if}

and I am calling this .tpl in the layout.tpl with an include:

{include file="$tpl_dir./topColumn.tpl"}

The slider is loading (the content, the tumbnails, etc.).

So far, there is nothing really wrong.

Still, there is one thing which is not working:

the .bxSlider implementation.

.bxSlider is supposed to be called in the root/modules/homeslider/homeslider.php file

public function hookdisplayHeader($params)

    {

        if (!isset($this->context->controller->php_self) || $this->context->controller->php_self != 'index')

            return;

        $this->context->controller->addCSS($this->_path.'homeslider.css');

        $this->context->controller->addJS($this->_path.'js/homeslider.js');

        $this->context->controller->addJqueryPlugin(array('bxslider'));

 

        $config = $this->getConfigFieldsValues();

        $slider = array(

            'width' => $config['HOMESLIDER_WIDTH'],

            'speed' => $config['HOMESLIDER_SPEED'],

            'pause' => $config['HOMESLIDER_PAUSE'],

            'loop' => (bool)$config['HOMESLIDER_LOOP'],

        );

 

        $this->smarty->assign('homeslider', $slider);

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

    }

 

    public function hookdisplayTop($params)

    {

        return $this->hookdisplayTopColumn($params);

    }

 

    public function hookdisplayTopColumn($params)

    {

        if (!isset($this->context->controller->php_self) || $this->context->controller->php_self != 'index')

            return;

 

        if (!$this->_prepareHook())

            return false;

 

        return $this->display(__FILE__, 'homeslider.tpl', $this->getCacheId());

    }

Here we can clearly see that it's fine to load the slider in the displayTopColumn hook, and since the content is showing in the html page there is no problem, so far, again.

The part which seems not to be working in the above is here:

        $this->context->controller->addCSS($this->_path.'homeslider.css');

        $this->context->controller->addJS($this->_path.'js/homeslider.js');

        $this->context->controller->addJqueryPlugin(array('bxslider'));

When browsing the page through inspector, I can't find any trace of the jquery plugin being called (bxslider).

And actually, when visiting the demo page from thirty bees (https://front.thirtybees.com/) browsing through inspector I can't find any trace of jquery or bxslider. I don't understand how it's called. At all.

My issue seems to be really with the javascript, as I tested the integration with the same code than the default theme (using the same theme module).

I am missing the navigation:

   <div id="homeslider-pager">

        <span>More offers:</span>

        <span id="homeslider-pages">          [EMPTY]         </span>

      </div>

 

The way the .bxSlider feature is called is simply by appending the .bxSlider function to a class or an ID.

$('#homeslider').bxSlider(

But since the javascript (or the jquery plugin bxslider) does not seem to be loaded, it does not work.

Can someone help me understand how the javascript is supposed to be loaded? I did not touch the core module, and the slider is correctly positionned to the right (TopColumn) hook, so it should load.

 

Séane

 

 

Edited February 11, 2019 by Séane

[Séane]

So, I found out the issue.

I while stripping the code, I removed the includ global.tpl from the footer.

I don't understand why, but apparently the call of the javascript functions is linked to the global.tpl.

Everything works just fine now.

Thank you for reading 🙂

[Séane]

 

 

I was able to confirm that the javascript is correctly loading (in the header), so the fonction to append the jquery plugin (the bx wrapper) should work.

But it's not.

 

This is the javascript function:

if (!!$.prototype.bxSlider)

    $('#homeslider').bxSlider({

      useCSS: false,

      maxSlides: 1,

      slideWidth: homeslider_width,

      infiniteLoop: homeslider_loop,

      hideControlOnEnd: true,

      pager: false,

      autoHover: true,

      auto: homeslider_loop,

      speed: parseInt(homeslider_speed),

      pause: homeslider_pause,

      controls: true

    });

 

and the begining of the homeslider.tpl from the module in the theme:

 

{if $page_name =='index'}

{if isset($homeslider_slides)}

<div id="homepage-slider" class="col-xs-12">

{if isset($homeslider_slides[0]) && isset($homeslider_slides[0].sizes.1)}{capture name='height'}{$homeslider_slides[0].sizes.1}{/capture}{/if}

<ul id="homeslider"{if isset($smarty.capture.height) && $smarty.capture.height} style="max-height:{$smarty.capture.height}px;"{/if}>

 

We have the right <ul id="homeslider"> around which the bxSlider should be appearing.

 

So in short: javascript seems to be loading, but does not apply to the ID.

Séane

 

Edited February 11, 2019 by Séane

[Séane]

UPDATE

I narrowed down the issue to the following:

I called the javascript function directly in the tpl and it now loads correctly.

Since I am loading the Javascript in the header this might be the issue.
But when I change the theme to the default community theme, it works just fine, without loading the javascript in the footer.

Why would the function not be called in my theme, with the same code?

[tommat]

Seane, do you know that javascript files for your theme resides in yourtheme/js/ and your theme modules javascript is in yourtheme/js/modules ?
javascript for homeslider is in yourtheme/js/modules/homeslider/js/homeslider.js

 

Edited February 14, 2019 by tommat

[Séane]

Hello,
Yes, I do know, but then again, since this is a jquerry plugin, the CSS is set up outside of the component, from what I understood from my early tests.

 

I'll keep in mind what you told me and proceed to further tests.
Thank you for your help and patience.

Séane