Comment ajouter une image à vos modes de paiement sur PrestaShop 1.7 ou 8

La version 1.7 de PrestaShop a intégré une nouvelle présentation du choix du mode de paiement sous forme de liste avec des boutons radio.

Cette nouvelle présentation a retiré l'affichage des logo des modes de paiement lors du choix, ce qui peut déranger vos clients ou vous-même.

Certains modules, comme le module Monetico que je propose, intègrent convenablement l'affichage d'un logo.

Je vais vous expliquer comment surcharger vos modules de paiement pour réussir à intégrer le logo de paiement que vous voulez.

Surcharge du module de paiement par chèque

Je vais utiliser le module de paiement par chèque natif de PrestaShop pour vous expliquer la méthode utilisée que vous pourrez reproduire sur n'importe quel module de paiement.

Pour afficher ce mode de paiement, les modules de paiement PrestaShop doivent être greffés sur le hook hookPaymentOptions($params).

Ce module retourne les données d'un object dans un tableau à l'aide de return [$newOption];

Ainsi, votre surcharge devra simplement récupérer cet object pour y adjoindre votre logo.

Pour ce faire, il vous suffit de créer un nouveau fichier ps_checkpayment.php dans le répertoire override/modules/ps_checkpayment.

Dns ce fichier nous allons surcharger la classe initiale

class Ps_CheckpaymentOverride extends Ps_Checkpayment

Puis nous surchargeons l'appel initial du hook

public function hookPaymentOptions($params)

Enfin nous récupérons la valeur initiale de l'object retourné par le hook du module

$newOptions = parent::hookPaymentOptions($params)[0];

Nous y ajoutons un logo sous forme de fichier image accessible directement sur le web, perso j'utilise le service proposé par imgur.com pour stocker mes images distantes

newOptions->setLogo('https://i.imgur.com/t2sYpef.png');

Et enfin nous retournons le résultat sous forme d'un object dans un tableau

return [$newOptions];

Ce qui donne comme résultat au final

Ce qui affiche bien le logo souhaité sur le mode de paiement, voici le contenu du fichier.

class Ps_CheckpaymentOverride extends Ps_Checkpayment
{
	public function hookPaymentOptions($params)
	{
		$newOptions = parent::hookPaymentOptions($params)[0];
		$newOptions->setLogo('https://i.imgur.com/t2sYpef.png');

		return [$newOptions];
	}
}

Amélioration de la mise en page

Comme le montre le résultat précédent, l'affichage n'est pas convenable.

Il existe deux méthodes pour rendre cela acceptable

Soit vous n'utilisez que des images de même dimension pour éviter une différence d'affichage entre les modes de paiement

La seconde solution, c'ets de passer par une personnalisation du CSS pour votre thème.

Je rappel que toute personnalisation CSS dans votre thème doit être fait dans le fichier custom.css de votre thème, si ce fichier n'existe pas, créez le dans le répertoire assets/css de votre thème.

Soit, pour le thème classic : themes/classic/assets/css/custom.css.

Dans ce fichier je rajoute une règle pour que les logo soient limité en hauteur ainsi et j'ai ajouté un positionnement à gauche à conserver si vous préférez cette présentation :

.payment-options img {
	max-height: 40px;
	float: left;
	margin-right: 1em;
}

j'ajoute aussi une règle pour définir une hauteur de ligne pour le texte et ainsi aligner convenablement le texte et l'image :

.payment-options .payment-option label {
	line-height: 40px;
}

Et voici le résultat :

Comme vous pouvez le constater, le résultat peut-être améliorer, mais je vous inviterez à intervenir directement sur l'affichage dans le thème au niveau des fichier template.

Conclusion

Les surcharges de ce type sont amenées à disparaitre dans les prochaines versions de PrestaShop, pourtant celle-ci sont assez pratiques et rapides à mettre en œuvre.

En espérant que cela puisse vous aider dans l'amélioration de vos boutiques PrestaShop.