Slider doesn't load after PS 1.7.7 upgrade

[Vee.K727]

My theme was installed and running on PS 1.7.6.X perfectly but I upgraded the shop to 1.7.7.0 recently and one of the sliders on the home page has quit loading altogether. Its an Owl Slider. There are no errors in the console. I tried adding a console.log to the file in question but that also didn't showed up either. I understand there have been some JS related changes in this version but I'm not sure what I'd had to do update my theme to be compatible with this version.

Here are some relevant pieces of code:

/modules/posspecialproducts/views/templates/hook/posspecialproducts.tpl

<div class="pos-special-products ">
	<!-- HTML of the slider. This is being loaded on the page -->
	...
</div>

/modules/posspecialproducts/posspecialproducts.php

<?php
if (!defined('_PS_VERSION_'))
	exit;
use PrestaShop\PrestaShop\Core\Module\WidgetInterface;
use PrestaShop\PrestaShop\Adapter\Category\CategoryProductSearchProvider;
use PrestaShop\PrestaShop\Adapter\Image\ImageRetriever;
use PrestaShop\PrestaShop\Adapter\Product\PriceFormatter;
use PrestaShop\PrestaShop\Core\Product\ProductListingPresenter;
use PrestaShop\PrestaShop\Adapter\Product\ProductColorsRetriever;
use PrestaShop\PrestaShop\Adapter\Translator;
use PrestaShop\PrestaShop\Adapter\LegacyContext;
use PrestaShop\PrestaShop\Core\Product\Search\ProductSearchContext;
use PrestaShop\PrestaShop\Core\Product\Search\ProductSearchQuery;
use PrestaShop\PrestaShop\Core\Product\Search\SortOrder;

class PosSpecialProducts extends Module implements WidgetInterface{
	private $token = '';
	private $_html = '';

	...

	public function install() {
		Configuration::updateValue($this->name . '_limit', 20);
		...
		
		return parent :: install()
		&& $this->registerHook('displayBlockPosition1')
		&& $this->registerHook('addproduct')
		&& $this->registerHook('updateproduct')
		&& $this->registerHook('deleteproduct')
		&& $this->registerHook('header') // <- is this a problem?
		&& $this->installFixtures();
	}
	public function hookDisplayHeader()
	{ 
		$this->context->controller->addJS($this->_path.'js/posspecialproducts.js');
	}

  	...
}

/modules/posspecialproducts/js/posspecialproducts.js

$(document).ready(function() {
	var $specialSlideConf = $('.pos-special-products');
	...
	var specialSlide = $(".pos-special-products .special-item");
	console.log(specialSlide);
	specialSlide.owlCarousel({
		...
	});
});

 

[elburgl69]

1. Try clear cache. Configuration - Advanced - Performance. Or delete all files an directories in <documentRoot>/app/cache
2. Else, check you module is attached to all hooks (Design - Positions or Modules - Installed Modules - Your Module - Configure - Maintain Hooks). If not, restore the module (Installed Modules - At the module choose Restore).
3. displayBlockPosition1 is not a standard hook. It must be called somewhere, Controller, Module of Template (I guess the last one). Compare your template code and module code between your 1.7.6 and 1.7.7

Success.

Edited January 2, 2021 by elburgl69 (see edit history)

[Vee.K727]

Thanks for your reply. I have cleared cache. The module is hooked properly since the HTML is being loaded. The JS however is not executing.

The code of the template and module has not been modified of course. But underlying functionality of Prestashop has sure changed. 

[Vee.K727]

My theme developers fixed the issue. They removed the hookDisplayHeader function and the line inside is moved into hookHeader function. Here's how it looks like now

public function hookHeader($params){
	$this->context->controller->addCSS(($this->_path).'posspecialproducts.css', 'all');
	$this->context->controller->addJS($this->_path.'js/posspecialproducts.js');
}

Hope it helps someone else having a similar issue.