Créer un lien hypertexte qui s'ouvre dans une nouvelle fenêtre
Dans ce tutoriel, je vais vous détailler deux méthodes permettant d'ouvrir un lien hypertexte dans une nouvelle fenêtre quand on clique dessus.
Il est en effet parfois préférable que certains liens s'ouvrent dans une nouvelle fenêtre, notamment lorsqu'il s'agit de liens menant vers des pages apportant des informations complémentaires, mais qui ne nécessitent pas forcément de quitter la page en cours. Ouvrir ces liens dans la même fenêtre pourrait alors perturber la navigation de l'utilisateur.
Utilisation de l'attribut HTML target="_blank"
L'utilisation de l'attribut HTML target="_blank" va permettre d'imposer facilement au navigateur l'ouverture d'une nouvelle fenêtre lorsque l'on clique sur le lien hypertexte possédant cet attribut.
Voici la structure de base d'un lien hypertexte HTML dans Prestashop :
<a href="{$base_dir}page.php" title="monsite">...</a>Pour que ce lien s'ouvre dans une nouvelle fenêtre lorsque l'on clique dessus, nous allons donc lui ajouter l'attribut "target" avec la valeur "_blank" comme ceci :
<a href="{$base_dir}page.php" title="monsite" target="_blank">...</a>L'attribut target="_blank" pose toutefois des problèmes avec la validité W3C, nous allons donc voir une autre méthode utilisant une fonction javascript et permettant de conserver la validité W3C.
Utilisation d'une fonction javascript
Nous allons simuler le comportement de l'attribut target="_blank" en utilisant une fonction javascript.
Créez un fichier nommé par exemple "target.js" et insérez-y les lignes suivantes :
$(document).ready(function(){
$('.target').click(function (event){
var url = $(this).attr("href");
window.open(url);
event.preventDefault();
});
});Placez ce fichier dans le dossier js de votre thème et appelez-le dans votre code HTML en ajoutant entre les balises <head>...</head> du fichier header.tpl de votre thème la ligne suivante :
<script type="text/javascript" src="{$js_dir}target.js"></script>Pour faire en sorte que le lien hypertexte s'ouvre dans une nouvelle fenêtre, il vous suffira alors de lui attribuer la classe HTML "target" utilisée dans notre fonction javascript comme ceci :
<a href="{$base_dir}page.php" title="monsite" class="target">...</a>Cette méthode donne exactement le même résultat que l'attribut target="_blank" et a l'avantage d'être parfaitement valide W3C.
Forcer la compilation smarty pour la prise en compte des modifications
Lorsque vous effectuez des modifications dans vos fichiers tpl, la compilation smarty doit être active sinon vos modifications ne sont pas prises en compte. Vous pouvez régler l'activation de la compilation smarty dans l'onglet Préférences de votre back-office.
Aucun commentaire