• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
e-Commerce

Magento – actualiser les onglets en Ajax dans une page d’édition d’un item

La problématique

Vous avez créé une page d’administration pour votre module, et chacun des articles a potentiellement des attributs différents. Prenons un exemple :

 

 

campaign_edit

 

Pour ce type d’événement que nous voyons ci-dessus, on retrouve certains champs propres à cet événement dans l’onglet « variables de la campagne »:

 

 

campaign rappel liste envie

 

Tandis que si l’on change le type d’événement dans « Information de la campagne »:

 

campaign panier abandone

 

On aimerait avoir des attributs différents, qui correspondent à l’événement choisi :

 

campaign panier abandone var

 

Dans votre page d’édition, vous ne voudriez donc pas afficher les mêmes champs en fonction du type d’article choisi. Que faire ? afficher tous les champs ? pas très intuitif. Voici comment procéder.

Une solution

Une solution que j’ai pu mettre en place sur un module de campagne d’email EmailCampaign est de recharger les onglets et leur formulaire en Ajax, à chaque fois que l’utilisateur change le type de l’article. Par exemple, pour EmailCampaign, c’est le champ « événement » qui rendait les champs dynamiques, comme on peut le voir dans les exemples au-dessus et ci-dessous :

 

campaign_edit

 

Lorsque l’on change celui-ci, les champs des autres onglets peuvent changer également. Il peut même y avoir des onglets différents pour chaque événement ! Sans la solution, on se retrouve dans le cas où les champs ne correspondent plus au type d’événement que l’on a, on est d’abord obligé d’enregistrer puis de re-éditer, un peu lourd quand même … Surtout lorsque des champs obligatoires n’ont plus lieu d’apparaître.

 

campaign edit error

 

Nous allons donc voir comment mettre en place une solution !

Le contrôleur

Il nous faut créer une nouvelle action dans notre contrôleur d’administration :

public function loadFormAjaxAction()
{
    $item = Mage::getModel('module/item');
    // on sauvegarde les données post dans notre model
    foreach ($this->getRequest()->getParams() as $k => $param) {
        if (is_string($param)) {
            $item->setData($k, $param);
        }
    }
    // on l'enregistre pour que les blocs puissent l'utiliser
    Mage::register('item_data', $item);
    $block = $this->getLayout()->createBlock('module/adminhtml_item_edit_tabs');
    $html = $block->toHtml();

    $this->getResponse()->setHeader('Content-Type', 'application/json');

    echo Zend_Json::encode(array(
        'tabs'  => $html,
    ));
}

Nous allons ici chercher le bloc qui se charge de rendre les onglets. Nous chargeons aussi l’article de ses données transmises en post, cela évite aussi un load pour la base de donnée. Celui-ci servira à pré-remplir les champs des formulaires si besoin (et ne pas tout retaper lorsque les blocs sont rechargés)

Le bloc de formulaire

Vous pouvez ici récupérer les données de l’article et mettre les champs avec les bonnes valeurs par défaut. Il nous faut aussi l’url ajax de notre action (avec le token, sinon cela ne fonctionnera pas). Nous modifions la méthode _prepareForm de notre bloc de formulaire :

$fieldset->addField('loadFormAjaxUrl', 'hidden', array());
$data['loadFormAjaxUrl'] = Mage::helper("adminhtml")->getUrl('adminhtml/module/loadFormAjax/');
$form->setValues($data);

Attention aussi si vous faites des appels au bloc « head » par exemple, celui-ci n’existera pas lorsque vous ferez une requête ajax. Pensez donc à valider son existence avant de lancer une méthode dessus.

Le JavaScript

Pour que tout ça fonctionne, il nous faut maintenant ajouter notre fichier javascript afin de faire cette requête ajax. Nous pouvons maintenant récupérer dans celui-ci l’url sur laquelle nous devons appeler. Le tout en prototype histoire de n’inclure aucune autre librairie externe.

document.observe("dom:loaded", function() {

	var loadFormAjaxUrl = $('module_loadFormAjaxUrl');
	
	function observe()
	{
		var tabs = $('page:left');
		
		select.observe('change', function(event, element) {
			new Ajax.Request($F(loadFormAjaxUrl), {
				method:'get',
				parameters: $('edit_form').serialize(),
			    onSuccess: function(response) {
			    	var data = response.responseText.evalJSON();
			    	var i = 0;
			    	$$('#edit_form > div').each(function (form) {
			    		if (i++ > 0) {
			    			form.remove();
			    		}
			    	})
			    	tabs.update(data.tabs);
			    	observe();
			    }
			});
		});
		setTimeout(function(){
			$('module_tabs_form_section_info').click();
		}, 20);
	}
	observe();
});

Il nous faut observer l’événement « change » du select. à chaque changement, nous lançons donc la requête ajax afin de recharger les onglets et leur formulaires. Vous remarquerez que je ne supprime pas tous les formulaires, le premier étant la « form_key » obligatoire pour envoyer le formulaire, et donc sauvegarder l’article. Une fois tout ça rechargé, il nous faut observer à nouveau, car l’ancien select s’est vu remplacer par le nouveau retourné par la requête ajax. Et voilà, un rechargement en ajax dynamique dans votre admin Magento ! Vous devriez avoir quelque chose comme ceci lorsque vous changez le type :

 

campaign_edit_ajax

18/09/2014 38 MIN READ TAGS: Ajax, Magento BY: Arnaud HOURS 0 COMMENT
SHARE
LIRE LA SUITE

Arnaud HOURS

Répéter une tâche, ou automatiser?

Drupal 7 - Les EntityFieldQuery et les requêtes aléatoires

VOUS POURRIEZ AIMER

e-Commerce Outils Magento plugin for NetBeans IDE (part. 2)

e-Commerce Elasticsearch pour Magento –> Elasticsearch for Magento

e-Commerce Outils Magento plugin for NetBeans IDE (part. 1)

e-Commerce Magento, layout, action et bloc en cache

e-Commerce Magento : import de masse avec Magmi

CMS WordPress – Un formulaire de login custom en Ajax

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect