Pop in surlayer sous magento

Voici un petit tutoriel pour ajouter facilement des pop in sous magento ou surlayer. Les petites boites de dialogue bien pratique pour apporter des informations supplémentaires aux clients, par exemple des boites d’avertissements ou d’informations sur les frais de port ou guide des tailles…. Ce tutoriel est basé sur le code de luigifab.

Installation du module

Téléchargez le javascript à cette adresse :
La version utilisée pour ce tutoriel est la luigifab-apijs-2.7.0.tgz
Décompressé l’archive à la racine de votre site magento puis vider le cache.
Allez sur le back-office système > configuration > Luigifab > Boites de dialogue

Deux paramètre de test disponible un pour le back-office de magento un pour le front.

-1 activer le paramètre de back-office et enregistrer. Trois petits boutons apparaissent, ils permettent de tester les pop in dans le back office.

2 – activer sur le frontend.
Pour tester allez sur une page CMS est copier coller ce code dans le contenu de la page
{{block type= »core/template » template= »luigifab/apijs/demo.phtml »}}
Même résultat :

Mise en pratique boite de dialogue avertissement

Ajout d’une alerte lors de la suppression d’une adresse du client. En effet quand on supprime une adresse de son compte client aucune boite d’avertissement indique que c’est irrémédiable. Nous avons rectifier ceci :
Premièrement, ajouter les js

Dans le layout customer.xml  (ou dans le layout local.xml si vous avez construit le site avec ce fichier.)
<customer_address_index translate="label">
	<reference name="head">
	     <action method="addItem"><type>skin_js</type><name>js/popin.js</name><params/></action>
	</reference>

Copier ce fichier dans votre thème
app/skin/frontend/[votre interface]/[votre theme]/js

-2 Editer la ligne 82

<!-- ligne originale -->
<p><a href="<?php echo $this->getUrl('customer/address/edit', array('id'=>$_address->getId())) ?>"><?php echo $this->__('Edit Address') ?></a> <span class="separator">|</span> <a href="#" class="link-remove" onclick="return deleteAddress('<?php echo $_address->getId() ?>');"><?php echo $this->__('Delete Address') ?></a></p>

La remplacer par

<p><a href="<?php echo $this->getUrl('customer/address/edit', array('id' => $_address->getId())) ?>"><?php echo $this->__('Edit Address') ?></a> <span class="separator">|</span> <a href="<?php echo $this->getUrl('customer/address/delete', array('id' => $_address->getId())) ?>" class="link-remove deleteAddress" id="deleteAddress-<?php echo $_address->getId() ?>"><?php echo $this->__('Delete Address') ?></a></p>

Seul inconvénient, c’est l’impossibilité de fermer la boite de dialogue en cliquant sur le content de la page ( le noir en alpha ). Mais ceci sera rectifié sur la prochaine version du module.

De très nombreuses possibilité sont offerte par ce module ( texte, vidéo, images…) à vous de jouer ou faites appel un votre programmeur magento !
Lien vers le module