5 étapes pour afficher un diaporama en tête de catégorie

Bonjour à tous,

Dans ce premier billet axé développement, je vais vous expliquer comment ajouter un nouveau HOOK sur lequel nous allons greffer notre fameux module de diaporama « AdsAndSlideshow ».

Durant les différentes étapes, nous allons faire en sorte de pouvoir accrocher un slideshow au dessus de vos listes de produits dans les pages catégories. Pratique pour remplacer la vilaine description par défaut.

Voici donc la marche à suivre pour réaliser la manœuvre.

1. Création du hook dans phpMyAdmin

Bon je vous l’accorde, l’interface phpMyAdmin n’est pas très sexy. Mais cette étape ne vous prendra que 10 petites minutes.

Petit aparté, j’ai la chance d’avoir le thème pmamhomme 1.0b sur notre installation phpMyAdmin. C’est une merveille ! Disponible à cette adresse : http://www.phpmyadmin.net/home_page/themes.php.

Pour ceux qui ne sont pas lancés dans l’installation de ce nouveau thème, je continue 😉

Nous allons directement déclarer le nouveau hook dans les tables MySQL à l’aide du code SQL ci-dessous :

INSERT INTO `VOTRE_PREFIXE_hook` (`id_hook`, `name`, `title`, `description`, `position`)
VALUES (NULL, 'categoryTop', 'Top of category', 'Display on top of your products categories', '1');

N’oubliez surtout pas de remplacer « VOTRE_PREFIXE » par votre préfixe « ps_ » ou autre.

Ajoutez le code SQL et cliquez sur le bouton « exécuter ».
Nous en avons fini avec phpMyAdmin ! Étape suivante.

2. Déclaration du hook dans la class AdsAndSlideshowClass

Dans cette étape, il vous faut ouvrir le fichier  » /modules/pm_adsandslideshow/AdsAndSlideshowClass.php « .
Ensuite, remplacez les lignes suivantes :

public static $_valid_hooks =  array('home','leftColumn','rightColumn','productfooter','extraRight','top','footer');
public static $_valid_hooks_product =  array('leftColumn','rightColumn','productfooter','extraRight','top','footer');
public static $_valid_hooks_category =  array('leftColumn','rightColumn','top','footer');

Par :

public static $_valid_hooks =  array('home','leftColumn','rightColumn','productfooter','extraRight','top','footer','categoryTop');
public static $_valid_hooks_product =  array('leftColumn','rightColumn','productfooter','extraRight','top','footer');
public static $_valid_hooks_category =  array('leftColumn','rightColumn','top','footer','categoryTop');

$_valid_hooks_category étant le nom des hooks acceptés dans les pages catégories et permettant d’afficher l’option « Afficher sur ces catégories » du formulaire d’ajout de slideshow.

A partir de cette étape vous devriez normalement voir le hook categoryTop dans la liste des hook lors de l’ajout d’un slideshow.

 

3. Ajout et appel du hook dans la class PM_AdsAndSlideshow

Maintenant, ouvrons le fichier « /modules/pm_adsandslideshow/pm_adsandslideshow.php » et ajoutons les lignes suivantes vers la fin du fichier :

function hookCategoryTop($params) {
		global $smarty;
		$smarty->assign(array ('adss_display_as_tab' => false, 'adss_is_hook_top' => false ));
		return $this->displaySlideshows('categoryTop', 'pm_adsandslideshow.tpl');
	}

Voici une capture pour vous situer.

Pour déclencher ce nouveau hook, nous allons utiliser un autre hook 🙂  Et ce, afin de ne pas toucher au petit  coeur de Prestashop.
Nous allons donc le déclencher dans la fonction hookTop de notre class PM_AdsAndSlideshow. Comme ceci :

function hookTop($params) {
		global $smarty;
		if(Tools::getValue('id_category') && preg_match('#/category.php$#',$_SERVER['SCRIPT_NAME']))
			$smarty->assign('HOOK_CATEGORY_TOP', Module::hookExec('categoryTop'));
		$smarty->assign('adss_is_hook_top', true);
		return $this->displaySlideshows('top', 'pm_adsandslideshow.tpl');
	}

Par souci d’optimisation, j’ai ajouté une conditionnelle qui permet de déclencher le hook uniquement sur les pages catégories.

Nous remarquons aussi que la variable que nous allons utiliser dans SMARTY pour afficher nos diaporamas est « HOOK_CATEGORY_TOP ». Rendez-vous à la prochaine et avant dernière étape pour parler de ça.

4. Ajout de la variable SMARTY dans notre template category.tpl

On y est presque ! Encore deux petites étapes et on sera au Top 🙂
Ici, déclarez la variable dans votre template de thème SMARTY « /themes/VOTRE_THEME/category.tpl ». Comme ceci :

{if isset($HOOK_CATEGORY_TOP) && $HOOK_CATEGORY_TOP}{$HOOK_CATEGORY_TOP}{/if}

Avec la conditionnelle, c’est plus propre et ça évite les erreurs si vous décidiez de désactiver le module. Mais j’ose espérer que cela n’arrivera pas !

Vous pouvez l’insérer où vous voulez dans votre template. Voici une capture en exemple avec le thème par défaut de PRESTASHOP :

5. Greffer AdsAndSlideshow à notre nouveau HOOK.

Comme je suis un mec sympa, je vous ai gardé le plus facile pour la fin. Une étape sans code, juste trois clics et un minuscule formulaire. Le pied quoi !

Rendez-vous dans l’onglet « Modules > Positions » de votre back-office et cliquez sur « Greffer un module ».

 

Remplissez ensuite le formulaire comme suit : (Le hook categoryTop doit se trouver en dernier dans liste.)

 

Validez le formulaire et ensuite notre module sera greffé au hook categoryTop. Le hook créée à l’étape 3 sera donc exécuté au chargement des pages en Front-Office.

Il ne vous restera plus qu’a créer vos slideshows et à les accrocher au hook « categoryTop« .
j’essaierai de poster très prochainement le résultat obtenu sur un site de démonstration.

Si vous avez des questions ou besoin d’éclaircissement, n’hésitez pas à réagir.

@ la prochaine.

JS