web-dev-qa-db-fra.com

Modaux utilisant des boucles et ACF

J'essaie de faire une page qui interroge chaque post d'une catégorie spécifique ("attractions").

J'ai pu obtenir les posts avec succès, il ne me reste plus qu'à faire fonctionner les modaux.

J'ai créé un bouton à l'intérieur de ma boucle qui porte le titre de la publication de la boucle. Je le veux afin que chaque fois que les gens cliquent sur ce bouton, un modal qui affiche tous les champs d’ACF I listés dans le code s’ouvre.

J'ai quelques problèmes, cependant. Pour une raison quelconque, je ne parviens pas à faire fonctionner le javascript. Pour l'instant, tout se trouve dans le fichier de modèle de page, mais j'ai essayé de mettre le script en file d'attente via le fichier functions.php, etc.

Je suppose que j'essaie de faire documents.getElementsByClassName au lieu de documents.getElementById. Je veux utiliser un identifiant, mais comme la boucle est ce qui crée les boutons, je ne sais pas comment rendre les identifiants uniques. Je songe à faire de l'identifiant le compteur de la boucle, puis à le stocker dans une variable que je peux référencer dans le script afin que je puisse faire getElementsById ($ someVariable)

Merci d'avoir jeté un coup d'oeil!

<?php 


get_header();


$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
'category_name' => 'attractions',
'posts_per_page' => 10,
);


$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

while ( $arr_posts->have_posts() ) :
    $arr_posts->the_post();

get_posts($args);

//vars below


?>
<div class=attractions-wrap>
<button class="openAttractions"><?php the_title(); ?></button>
</div>

<div class="attractionsModal">
<div class=modal-content>
    <span class="close">&times;</span>
    <h2><?php the_title(); ?></h2>

    <div id="attraction-descrption" class="description">
        <h3>Description</h2>
        <p><?php the_field('description_field'); ?></p>
    </div>

    <div id="attraction-opening-hours" class="opening-hours">
        <h3>Opening Hours</h2>
        <p><?php the_field('opening_hours_field'); ?></p>
    </div>

    <div id="attraction-practical-information" class="practical-information">
        <h3>Practical Information</h2>
        <p><?php the_field('practical_information_field'); ?></p>
    </div>

</div>
</div>

<?php
endwhile;
endif;
?>

<script type="text/javascript">
// Get the modal
var modal = document.getElementsByClassName('attractionsModal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("openAttractions");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>
javascriptqueryadvanced-custom-fields
1
Hans V.

Vous avez raison, vous devriez utiliser un identifiant.

Je voudrais utiliser un compteur en conjonction avec get_the_ID ();

$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :
$index = 0;
while ( $arr_posts->have_posts() ) : $arr_posts->the_post();

  echo $index . '_' . get_the_ID();

  endwhile;
endif;

Cela vous donnera un identifiant unique que vous pourrez utiliser pour chaque élément de la boucle.

WordPress a une variable index $ intégrée. Nous pourrions récrire ceci sous la forme:

$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

while ( $arr_posts->have_posts() ) : $arr_posts->the_post();

  echo $arr_posts->current_post . '_' . get_the_ID();

  endwhile;
endif;
1
admcfajn

Résolu le problème! Merci encore admcfajn pour l'aide. Je n'ai pas suivi exactement le chemin que vous avez suggéré, mais vos réponses m'ont certainement orienté dans la bonne direction et m'ont amené à résoudre mon problème.

Vous trouverez ci-dessous le code final du modèle de page, y compris le JS qui se trouve dans la boucle while, pour tous ceux qui tomberaient sur ce message.

EDIT: J'avais oublié de créer également une variable pour l'id du bouton de fermeture. Ci-dessous, j'ai changé le code pour inclure également le bouton Fermer :)

<?php 


get_header();


$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'category_name' => 'attractions',
    'posts_per_page' => 10,
);


$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

    while ( $arr_posts->have_posts() ) : $arr_posts->the_post();

get_posts($args);

echo $arr_posts->current_post . '_' . get_the_ID();


//vars below
$trigger_ID = 'trigger_' . $arr_posts->current_post . '_' . get_the_ID();
$modal_ID = 'modal_' . $arr_posts->current_post . '_' . get_the_ID();
$close_ID = 'close_' . $arr_posts->current_post . '_' . get_the_ID();


?>

<button class="trigger" id="<?php echo $trigger_ID ?>"><?php the_title(); ?></button>

<div class="modal" id="<?php echo $modal_ID ?>">
    <div class="modal-content">
        <span class="close-button" id="<?php echo $close_ID ?>">&times;</span>
        <h2><?php the_title(); ?></h2>

        <div id="attraction-descrption" class="description">
            <h3>Description</h2>
            <p><?php the_field('description_field'); ?></p>
        </div>

        <div id="attraction-opening-hours" class="opening-hours">
            <h3>Opening Hours</h2>
            <p><?php the_field('opening_hours_field'); ?></p>
        </div>

        <div id="attraction-practical-information" class="practical-information">
            <h3>Practical Information</h2>
            <p><?php the_field('practical_information_field'); ?></p>
        </div>

    </div>
</div>

<!-- 

JavaScript for button press below

-->
<script>

$(document).ready(function(){
var modal = document.querySelector("#<?php echo $modal_ID; ?>");
var trigger = document.querySelector("#<?php echo $trigger_ID; ?>");
var closeButton = document.querySelector("#<?php echo $close_ID ?>");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
});

</script>

<?php
    endwhile;
endif;
?>

Ci-dessous, vous trouverez également la feuille de style qui permet à tout cela de fonctionner correctement, car le javascript permet de l'activer ou de le désactiver.

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
.close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}
.close-button:hover {
    background-color: darkgray;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.modal.show-modal{
    display: block !important;
}
1
Hans V.