Guide professionnel pour ajouter Cliquez sur Trigger Modal Box sur la page de produit unique WooCommerce

Ce didacticiel détaille comment intégrer une boîte modale déclenchée par clic sur la page de produit unique WooCommerce. En tirant parti des crochets spécifiques WordPress et WooCommerce (tels que WP_FOOTER et WOOCOMMERCE_BEFORE_ADD_TO_CART_FORM), nous pouvons insérer efficacement la structure HTML des boîtes modales dans la page dynamiquement, et combiner Javascript pour implémenter ses fonctions d'affichage et de masque tout en garantissant la modularité et l'optimisation des performances du code.

1. Présentation et préparation

L'ajout d'une boîte modale déclenchée par clic à la page de produit unique WooCommerce est une exigence commune pour présenter des informations supplémentaires, un contenu promotionnel ou des formulaires spécifiques. Ce tutoriel vous guidera comment implémenter cette fonctionnalité via les crochets de WordPress, PHP, HTML et JavaScript.

Prérequis:

• Un site Web WordPress en cours d'exécution avec WooCommerce installé.
• Il est fortement recommandé d'utiliser le thème Child pour apporter toutes les modifications de code pour éviter d'écraser votre contenu personnalisé lorsque le thème est mis à jour.
• Ayez une compréhension de base de PHP, HTML, CSS et JavaScript.

Nous opérerons principalement dans le fichier functions.php du thème enfant, un fichier javascript et un fichier CSS.

2. Définition de la structure HTML Box Modal

Tout d'abord, nous devons définir la structure HTML de la boîte modale. Cette structure contiendra le titre, le contenu et le bouton de fermeture de la boîte modale.

Dans le répertoire de thème de votre enfant, vous pouvez créer un fichier appelé modal-box.html (bien que nous intégrerons son contenu directement dans PHP plus tard), ou l'écrire directement dans une fonction PHP:

 
<div id="popup" class="modal-box" style="affiche: aucun;">  
  <dique>
    <a href="#" class="js-modal-close close"> × </a>
    <h3> Titre de la boîte modale </h3>
  -header>
  <div class="modal-body">
    <p> Il s'agit du contenu principal de la boîte modale. </p>
  </div>
  <foomer>
    <a href="#" class="js-modal-close"> close </a>
  
</foomer></dique>
</div>

Notes:

• id = "popup" est utilisé pour le positionnement JavaScript des boîtes modales.
• class = "modal-box" est utilisé pour les styles CSS.
• class = "js-modal-close" est utilisé pour les événements de liaison JavaScript.
• style = "affichage: aucun;" est la clé, qui garantit que la boîte modale est masquée lorsque la page est chargée jusqu'à ce qu'elle soit déclenchée par JavaScript.

3. Insérer dynamiquement la boîte modale HTML dans la page

Il est de la meilleure pratique d'insérer la structure HTML de la boîte modale directement dans le crochet WP_Footer de la page via la fonction PHP. Cela garantit que le HTML de la boîte modale est chargé en bas de la page, évite de bloquer le rendu de la page et se charge après tous les autres contenus.

Ajoutez le code suivant aux fonctions de thème de votre enfant.

 / **
 * Insérer la boîte modale HTML au bas de la page (page du produit uniquement)
 * /
fonction your_modal_footer_content () {
  // Chargez uniquement la boîte modale HTML sur la page unique du produit WooCommerce
  if (! is_product ()) {
     retour; // s'il n'est pas une page de produit, aucun contenu n'est sorti}
?>

<div id="popup" class="modal-box" style="affiche: aucun;">  
  <dique>
    <a href="#" class="js-modal-close close"> × </a>
    <h3> Titre de la boîte modale </h3>
  -header>
  <div class="modal-body">
    <p> Il s'agit du contenu principal de la boîte modale. </p>
  </div>
  <foomer>
    <a href="#" class="js-modal-close"> close </a>
  
</foomer></dique>
</div>
 Php
}
add_action ('wp_footer', 'your_modal_footer_content');

Points clés Explication:

• add_action ('wp_footer', 'your_modal_footer_content');: Ce crochet ajoute le contenu de la fonction de votre_modal_footer_content à la balise html body>.
• is_product (): Il s'agit d'une balise conditionnelle fournie par WooCommerce, qui est utilisée pour déterminer si la page actuelle est une seule page de produit. Il est plus précis et recommandé que IS_SINGULAR («produit») car il est spécifiquement ciblé sur les types de produits WooCommerce.
• Intégrer HTML directement dans les fonctions PHP: c'est le moyen recommandé de charger des fichiers HTML externes au lieu d'essayer d'utiliser WP_ENQUEUE_Script ou WP_ENQUEUE_STYLE pour charger les fichiers HTML, car ces fonctions sont conçues pour les scripts et les feuilles de style, et le chargement HTML, car directement provoquera des erreurs de syntax.

4. Créez une boîte modale pour déclencher un lien

Nous devons placer un lien ou un bouton sur la page du produit, et la boîte modale peut être déclenchée pour s'afficher lorsque l'utilisateur clique. Nous pouvons utiliser le crochet fourni par WooCommerce pour insérer ce déclencheur dans un emplacement spécifique sur la page du produit, comme avant le bouton "Ajouter au panier".

Ajoutez le code suivant aux fonctions de thème de votre enfant.

 / **
 * Ajoutez une boîte modale à la page du produit pour déclencher le lien * /
fonction add_popup_modal_trigger () { 
    // Afficher uniquement le lien de déclenchement if (! Is_product ()) {
        retour;
    }
    echo '<a class="js-open-mod" href="#" data-modal-id="popup"> cliquez sur moi pour ouvrir la boîte modale </a>';
}
// Ajouter le lien de déclenchement au formulaire "Ajouter à CART" avant d'ajouter_action ('wooCommerce_before_add_to_cart_form', 'add_popup_modal_trigger', 3);

Points clés Explication:

• wooCommerce_before_add_to_cart_form: Il s'agit d'un crochet wooCommerce qui vous permet d'insérer du contenu personnalisé avant le formulaire Ajouter à CART. Le numéro 3 est la priorité, en s'assurant qu'il apparaît avant un autre contenu par défaut.
• class = "js-open-modal": cette classe est utilisée pour que JavaScript reconnaisse et lie les événements de clic.
• Data-modal-id = "Popup": Il s'agit d'une propriété de données personnalisée qui indique à JavaScript quel boîtier modal (par son identifiant) doit être ouvert.

5. Interaction modale JavaScript

Pour que la boîte modale réponde aux événements de clic et implémente la fonction d'affichage / masquer, nous devons écrire du code JavaScript.

Dans le répertoire de thème de votre enfant, créez un dossier JS et créez un fichier modal-jquery.js.

 // js / modal-jquery.js (exemple de code, vous devrez peut-être vous ajuster en fonction des besoins réels)
jQuery (document) .ready (fonction ($) {
    // Ouvre la boîte modale $ ('. JS-Open-Modal'). On ('click', fonction (e) {
        E.PreventDefault ();
        var modalid = $ (this) .data ('modal-id');
        $ ('#' modalid) .fadein (); // Utilisez l'effet Fadein de JQuery pour afficher la boîte modale $ («corps»). AddClass («modal-oupen»); // ajouter une classe au corps, qui peut être utilisé pour empêcher le défilement});

    // Fermez la boîte modale $ ('. JS-Modal-Close'). Sur ('cliquez'
        E.PreventDefault ();
        $ (this) .closest ('. modal-box'). fadeout (); // Utilisez l'effet Fadeout pour masquer la boîte modale $ («corps»). RemoveClass («modal-oupen»);
    });

    // cliquez en dehors de la boîte modale pour fermer (facultatif)
    $ (document) .on ('click', fonction (e) {
        if ($ (e.target) .hasclass ('modal-box')) {// assurez-vous que l'arrière-plan de la boîte modale est cliqué au lieu du contenu $ ('. Modal-box'). fadeout ();
            $ ('body'). RemoveClass ('modal-oirn');
        }
    });
});

6. Enregistrer et charger des fichiers JavaScript

Enfin, nous devons enregistrer et charger le fichier modal-jquery.js dans WordPress. Encore une fois, nous devons charger ce script sur la page unique du produit pour optimiser les performances.

Ajoutez le code suivant aux fonctions de thème de votre enfant.

 / **
 * Enregistrer et charger le fichier JavaScript de boîte modale (page de produit uniquement)
 * /
fonction my_enqueue_modal_scripts () {
    // Chargez uniquement les scripts sur la page unique du produit wooCommerce if (is_product ()) {
        wp_enqueue_script ('modal-jQuery-js', get_stylesheet_directory_uri (). '/js/modal-jquery.js', array ('jQuery'), null, true);
    }
}
add_action ('wp_enqueue_scripts', 'my_enqueue_modal_scripts');

Points clés Explication:

• get_stylesheet_directory_uri (). '/js/modal-jquery.js': c'est le chemin correct pour obtenir le fichier js / modal-jquery.js dans le répertoire de thème de l'enfant.
• array ('jQuery'): utilisez jQuery comme dépendance, en vous assurant que la bibliothèque jQuery est chargée avant de charger votre script.
• Vrai: signifie que le script se chargera dans le pied de page, qui est la meilleure pratique recommandée.

7. Style Modal Box CSS (Blue Description)

Bien que ce tutoriel ne fournit pas de code CSS complet, les effets visuels des boîtes modales nécessitent que CSS définisse. Vous devez ajouter le style correspondant dans le fichier style.css du thème enfant, par exemple:

 / * style.css de sous-thème * /
.modal-box {
    Position: fixe;
    en haut: 0;
    à gauche: 0;
    Largeur: 100%;
    hauteur: 100%;
    Color d'arrière-plan: RGBA (0, 0, 0, 0,7); / * arrière-plan translucide * /
    Affichage: flex; / * Utilisez Flexbox pour centrer le contenu * /
    Justification-contenu: centre;
    Align-Items: Centre;
    Z-Index: 9999; / * Assurez-vous que la boîte modale est au niveau supérieur * /
}

en-tête modal-box,
.
.modal-box .modal-body {
    Color d'arrière-plan: #FFF;
    rembourrage: 20px;
    Border-Radius: 5px;
    Box-Shadow: 0 0 10px RGBA (0,0,0,0,3);
    largeur maximale: 600px; / * Largeur maximale de la boîte modale * /
    Largeur: 90%;
    Position: relative; / * pour la clôture du positionnement du bouton * /
}

.
    Affichage: flex;
    justifier-contenu: espace-intermédiaire;
    Align-Items: Centre;
    Border-Bottom: 1px solide #eee;
}

.modal-box .close {
    Décoration du texte: aucune;
    Couleur: # 333;
    taille de police: 24px;
    hauteur de ligne: 1;
}

/ * Lorsque la boîte modale s'ouvre, il peut être nécessaire d'empêcher le défilement de la page * /
body.modal-open {
    débordement: caché;
}

8. Résumé et meilleures pratiques

Grâce aux étapes ci-dessus, vous avez réussi à intégrer une boîte modale déclenchée par clic sur la page de produit unique WooCommerce.

• Utilisez des sous-thèmes: modifiez toujours dans les sous-thèmes pour protéger votre contenu personnalisé.
• Chargement conditionnel: utilisez des balises conditionnelles telles que IS_Product () pour vous assurer que les scripts et le HTML ne sont chargés que sur les pages requises, optimisant ainsi les performances du site Web.
• Sélection de crochet: WP_FOOTER est l'emplacement idéal pour l'insertion de la boîte modale HTML, WOOCOMMERCE_BEFORE_ADD_TO_CART_FORM est l'emplacement approprié pour insérer des liens de déclenchement.
• Focus séparé: placez le code HTML, CSS et JavaScript dans leurs fichiers respectifs pour garder le code clair et maintenable.
• Accessibilité: envisagez d'ajouter des attributs ARIA aux boîtes modales pour améliorer leur accessibilité, par exemple, lorsque les boîtes modales sont ouvertes, l'accent doit se déplacer automatiquement dans les boîtes modales et fournir des opérations de clavier (comme la clé ESC est désactivée).
• Cachette initiale: assurez-vous d'ajouter de style = "affichage: aucun;" à la structure HTML de la boîte modale pour empêcher la boîte modale de clignoter lorsque la page est chargée.

Suivez ces directives et vous pourrez ajouter des fonctionnalités interactives de la boîte modale à votre site Web WooCommerce efficacement et professionnellement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!