Dans ce tutoriel, nous verrons comment configurer un thème simple dans ProcessWire, nous étudierons sortie retardée (maintenant la stratégie de thème par défaut dans ProcessWire), et configurez notre site pour demander un nouveau contenu en utilisant AJAX.

Pour accompagner ce tutoriel, j'ai créé un nouveau thème pour ProcessWire, utilisant à la fois AJAX et la sortie différée, disponible sur Github. Vous pouvez également trouver une démonstration du thème ici: Présentation du profil de l'artiste.

Pour obtenir des instructions sur l’installation de ProcessWire et connaître les principes de base d’AJAX, consultez les ressources suivantes:

Sortie directe et différée

ProcessWire (PW) a un système de templates incroyablement flexible; il vous permet de coder n'importe quelle structure de votre choix en créant des fichiers php dans le / site / templates dossier, puis les associer à l’administrateur ProcessWire de configuration> modèles> ajouter un nouveau. Cela dit, il existe deux stratégies communes dans les forums PW pour la création de modèles: sortie directe et sortie retardée.

Sortie directe

La sortie directe voit chaque fichier php en commande de la sortie de la page spécifique. Cela peut être formidable si chaque modèle est très différent des autres. Cependant, j'ai trouvé cela fastidieux si des modifications mineures sont nécessaires dans chaque modèle. Vous pouvez également vous retrouver en train de copier à partir d'autres modèles ou d'inclure de nombreux fichiers. Voici un modèle très basique (par exemple, basic-page.php).

Sortie retardée

La sortie différée voit les fichiers communs (comme _init.php) appelés avant, et _main.php après le fichier modèle (par exemple,. basic-page.php). Votre _main.php est utilisé comme vaisseau mère de votre balisage (html) et le modèle spécifique est relégué à l’ajout de contenu à des variables prédéfinies _main.php fichier.

Dans l'exemple ci-dessous, j'ajoute les champs body et video de la page de modèle à la variable $ contenu et sortir le balisage de page dans mon _main.php fichier comme il s'exécute toujours après.

basic-page.php:

corps. $ page-> video; ?>

_main.php:

 
  get ('/') -> url; ?> "> 
 get ('/') -> titre; ?> 
    
 
  
 
 

Le profil de l'artiste

Le profil de l'artiste est un exemple de thème qui utilise sortie retardée. La structure HTML principale est écrit dans le fichier _main.php et comprend un en-tête de page, un pied de page, un logo et une navigation. Le modèle de page actuel définit le $ contenu variable-par exemple mon basic-page.php.

Vous pouvez installer The Artist Profile pour voir comment j'ai regroupé le thème et utilisé AJAX dans le fichier main.js. Je vais maintenant passer en revue certains des concepts à l’œuvre dans ce thème..

Stratégies de données AJAX

AJAX permet à nos utilisateurs de voir le nouveau contenu de notre site sans recharger les éléments de page courants tels que le logo, le pied de page et la navigation. Cela signifie également que nos utilisateurs ne verront jamais une fenêtre de navigateur blanche et vierge lorsque la nouvelle page est demandée..

En utilisant AJAX, nous pouvons demander des types de données communs à notre site Web tels que HTML, JSON ou XML. Pour simplifier les choses, nous allons demander le code HTML à notre site. Toutefois, si vous avez créé ou utilisez une bibliothèque de modèles frontale existante, vous pouvez également demander le format JSON, ce qui réduit le volume de données par requête (il existe de nombreuses bibliothèques peut utiliser sur le frontend, un exemple étant moustache).

Dans notre thème, j'aimerais que le logo, la navigation et le pied de page restent les mêmes, mais que la zone de contenu principale change de façon dynamique (ou asynchrone) lorsque l'on clique sur un lien..

Utiliser AJAX dans notre thème ProcessWire

Pour ce faire, nous devons créer deux éléments HTML de conteneur auxquels nous pouvons ajouter notre nouveau contenu. L'élément conteneur ne changera pas, mais tiendra l'élément interne et le contenu qui y sont ajoutés. Le nouveau contenu sera ajouté pendant que l'ancien contenu est animé, puis supprimé. Cela va créer une apparence fluide.

Avec mon fichier _main.php, les conteneurs ressemblent à ceci:

Ok, jusqu'ici tout va bien. Ajoutons maintenant une vérification de la variable pratique ProcessWire $ ajax. $ ajax déclare si une demande était ou non d'AJAX. Voici l'exemple de vérification si ce n'est pas AJAX:

si (! $ ajax):

Dans le fichier _main.php de mon thème, je peux envelopper le contenu dont je n’ai pas besoin pour la requête AJAX, c’est-à-dire tout ce qui n’est pas le echo $ content. Cela ressemble à ceci:

 
  get ('/') -> url; ?> "> 
 get ('/') -> titre; ?> 
    
 
    
 
  

Maintenant, nous avons notre modèle prêt à nous donner le balisage de la page entière si une demande de page normale, ou juste la $ contenu si une demande AJAX.

Demander une page en JavaScript avec jQuery AJAX

J'utilise la bibliothèque JavaScript jQuery pour mon thème. J'ai référencé un fichier main.js dans mon foot.inc, après un lien vers la dernière version de la bibliothèque jQuery.

Utilisation de jQuery .sur et .ajax fonctions, nous pouvons créer une demande AJAX pour le nouveau contenu de la page chaque fois que nous cliquons sur un lien avec une classe .ajax-link.

Jusqu'ici, notre code main.js ressemble à ceci:

$ (function () var href; var title; $ ('body'). on ('click' ',' a.ajax-link ', function (e) // lien de navigation cliqué sur href = $ (this). attr ("href"); title = $ (this) .attr ("name"); // charge le contenu via AJAX loadContent (href); // empêche le clic et recharge e.preventDefault ();); function loadContent ( url) // Chargement du contenu // variable pour les données de page $ pageData = "; // envoi de la requête Ajax $ .ajax (type:" POST ", url: url, données: ajax: true, réussite: fonction ( data, status) $ pageData = data;). done (function () // une fois terminé et réussi // construit un nouveau contenu $ pageData = '
'+ $ pageData +'
'; // ajoute du contenu à la page $ ('. content-container'). append ($ pageData); // supprime l'ancien contenu $ ('. content.current-content'). remove (); // affiche le nouveau contenu et nettoie les classes $ (this) .removeClass ('no-opacity'). removeClass ('ajax'). addClass ('current-content'); ); // fin de ajax (). done () // fin de loadContent ());

Le code ci-dessus a un .on ('click', 'a.ajax-link', function () NOS FONCTIONS ICI) ce qui nous permet de déclencher notre loadContent () fonctionner à chaque fois qu'un lien est cliqué. Dans le loadContent () fonction, nous utilisons l'URL du lien pour envoyer une demande ajax, puis quand .terminé() nous annexons le Les données au .conteneur de contenu élément.

Tout ce qui précède fonctionnera bien, mais il y a beaucoup de petits extras que nous pouvons ajouter pour rendre tout transparent.

Astuces, astuces et logique AJAX

Premièrement, nous pouvons animer notre contenu de manière interne et externe (ceci renvoie à la partie animée du fichier main.js). L’animation est idéale pour créer des sites web lisses, mais elle peut également servir de déclencheur psychologique pour souligner que quelque chose a changé..

Ensuite, nous voulons réinitialiser toutes les fonctions JavaScript dont nous avons besoin pour la page, par exemple. lightboxes, diaporamas, maçonnerie, etc., et nous les intégrons après avoir ajouté les nouvelles données HTML à la page. Le nouveau contenu ayant été récupéré via AJAX, il ne peut pas être lié à des écouteurs JavaScript pour les clics, etc. Il ne se déclenchera donc que si nous avons réinitialisé les fonctions dont nous avons besoin sur la page..

Créer un chèque déjà chargé est utile pour éviter les requêtes inutiles. Ajouter une vérification rapide pour voir si le nouveau lien a déjà été cliqué, puis retourne vrai; si cela empêche les utilisateurs d'accéder plusieurs fois à la même page.

Enfin, mais ce qui est probablement le plus important, nous pouvons maintenant utiliser l'historique HTML 5 pour garder une trace de la page actuelle et recharger le contenu de la page précédente lorsque l'utilisateur appuie sur le bouton Précédent..

Emballer

En utilisant certaines des stratégies ci-dessus, nous pouvons créer une expérience AJAX transparente pour notre site Web, et en utilisant ProcessWire, nous pouvons intégrer des requêtes AJAX à notre thème en un rien de temps..

Pour en savoir plus sur ProcessWire et AJAX, consultez nos tutoriels sur Envato Tuts.+.