Utilisation des modals avec EO Framework

Nous allons voir comment ouvrir une modal qui contiendra une vue chargé depuis une vue dans le DOM et une autre avec une vue chargé en AJAX.

Modal sans AJAX

Utilisons le template par défaut d’une modal avec EOFramework :

<div class="wpeo-modal">
	<div class="modal-container">

		<!-- Entête -->
		<div class="modal-header">
			<h2 class="modal-title">Titre de la popup</h2>
			<div class="modal-close"><i class="fal fa-times"></i></div>
		</div>

		<!-- Corps -->
		<div class="modal-content">
			<p>...</p>
		</div>

		<!-- Footer -->
		<div class="modal-footer">
			<a class="wpeo-button button-grey button-uppercase modal-close"><span>Annuler</span></a>
			<a class="wpeo-button button-main button-uppercase modal-close"><span>Valider</span></a>
		</div>
	</div>
</div>

Vous avez plusieurs choix pour ouvrir cette modal, le plus simple est d’utiliser un bouton qui utilisera des attributs de EOFramework pour ouvrir la modal.

Ouverture avec un élément du DOM

Le plus important est que l’élément du DOM doit contenir la classe « wpeo-modal-event » ainsi que 2 attributs obligatoires:

• data-parent: doit être une classe qui englobe le bouton et la modal.
• data-target: doit être une classe qui se trouve au même niveau que wpeo-modal-event. Data-target peut être la classe wpeo-modal-event.
• data-class (optionnel): permet d’ajouter une classe à la modal.

Création de l’élément

<a class="wpeo-button button-main wpeo-modal-event"
	data-parent="parent-container"
	data-target="wpeo-modal"><i class="button-icon fal fa-hand-pointer"></i> <span>Cliquer pour ouvrir la modal</span></a>

Ligne 2: La classe parent-container de l’attribut data-parent est inexistant pour le moment.

Il faut donc englobé avec un div par ex la modal et le bouton, puis ajouter sur cette div la classe « parent-container » dans notre cas.

Voici notre vue HTML final:

<div class="parent-container">

	<!-- Le bouton déclenchant louverture de la popup -->
	<a class="wpeo-button button-main wpeo-modal-event"
		data-parent="parent-container"
		data-target="wpeo-modal"><i class="button-icon fal fa-hand-pointer"></i> <span>Cliquer pour ouvrir la modal</span></a>

	<!-- Structure -->
	<div class="wpeo-modal">
		<div class="modal-container">

			<!-- Entête -->
			<div class="modal-header">
				<h2 class="modal-title">Titre de la popup</h2>
				<div class="modal-close"><i class="fal fa-times"></i></div>
			</div>

			<!-- Corps -->
			<div class="modal-content">
				<p>...</p>
			</div>

			<!-- Footer -->
			<div class="modal-footer">
				<a class="wpeo-button button-grey button-uppercase modal-close"><span>Annuler</span></a>
				<a class="wpeo-button button-main button-uppercase modal-close"><span>Valider</span></a>
			</div>
		</div>
	</div>
</div>

Ouverture avec un script JS

Nous allons créer notre propre script JS pour ouvrir la modal. Ce qui est vraiment important c’est d’ajouter la classe modal-active à la div contenant la class wpeo-modal. C’est cette classe qui permet l’ouverture de la modal.

Modal généré en AJAX

A la différence du chapitre précédent, nous allons pas définir notre template de modal dans le DOM cette fois-ci. En passant par une requête AJAX, le template sera chargé automatiquement lors du clic sur le bouton déclenchant l’ouverture de la modal.

Commençons par ajouter notre bouton dans le DOM:

<div class="wpeo-button button-main wpeo-modal-event"
	data-action="load_modal_content">
	<i class="button-icon fal fa-hand-pointer"></i> <span>Cliquer pour ouvrir la modal</span>
</div>

Ligne 2: permet de définir l’action AJAX qui sera appelé lors du clic sur le bouton.

L’action AJAX vas nous permettre de définir qu’elle vue utilisé pour le contenu de la modal. Elle vas également permettre selon notre envie de personnalisé les deux boutons par défaut de la modal qui sont « Annuler » et « Valider ».

Voici le code PHP pour s’attaché à l’action AJAX load_modal_content

<?php

add_action( 'wp_ajax_load_modal_content', 'callback_load_modal_content' );

function callback_load_modal_content() {

	wp_send_json_success( array(
		'view' => 'Le contenu de ma modal',
 	) );
}

Ligne 8: l’entrée « view » est obligatoire pour renvoyé votre vue à la modal.

Nous allons utiliser la « Bufferisation de sortie » (de PHP) pour renvoyer la vue à l’entrée « view ».

Le code précédent avec les changements:

<?php

add_action( 'wp_ajax_load_modal_content', 'callback_load_modal_content' );

function callback_load_modal_content() {

	ob_start();
	require( 'mavue.php' );
	$my_view = ob_get_clean();

	wp_send_json_success( array(
		'view' => $my_view,
 	) );
}

Ligne 7: Initialisation du tampon

Ligne 9: On vide le tampon et on retourne le contenu dans la variable $my_view

Ligne 12: Nous envoyons la variable $my_view à l’entrée view.

Le fichier mavue.php

<h2>Ma super modal</h2>

<p>Avec un super contenu</p>

Modifier les boutons par défaut: « Annuler » et « Valider ».

Nous allons maintenant modifié les boutons par défaut de la modal, donc « Annuler » et « Valider ».

Pour modifier ces boutons, il faut rajouter l’entrée « buttons_view » dans le retour de la réponse AJAX. Nous allons rajouter la vue « mesboutons.php », utiliser à nouveau la ob_start et ob_get_clean() pour temporiser la vue et la renvoyé à cette entrée.

Le code final de notre function callback_load_modal_content:

function callback_load_modal_content() {

	ob_start();
	require( 'mavue.php' );
	$my_view = ob_get_clean();

	ob_start();
	require( 'mesboutons.php' );
	$my_buttons_view = ob_get_clean();

	wp_send_json_success( array(
		'view'         => $my_view,
		'buttons_view' => $my_buttons_view,
 	) );
}

Et la vue « mesboutons.php »

<div class="wpeo-button button-main modal-close">
	<span>Fermer la popup</span>
</div>