it-swarm.com.de

Modals mit Schleifen und ACF

Ich versuche, eine Seite zu erstellen, die jeden Beitrag einer bestimmten Kategorie abfragt ("Sehenswürdigkeiten").

Ich war in der Lage, die Beiträge erfolgreich zu bekommen, ich muss nur dafür sorgen, dass die Modals funktionieren.

Ich habe eine Schaltfläche in meiner Schleife erstellt, die den Titel des Postings enthält, auf dem sich die Schleife befindet. Ich möchte, dass jedes Mal, wenn Benutzer auf diese Schaltfläche klicken, ein Modal geöffnet wird, in dem alle Felder aus der ACF-I-Liste im Code angezeigt werden.

Ich habe jedoch einige Probleme. Aus irgendeinem Grund kann ich das Javascript nicht zum Laufen bringen. Im Moment befindet sich alles in der Seitenvorlagendatei, aber ich habe versucht, das Skript über die functions.php usw. in die Warteschlange zu stellen.

Vermutlich versuche ich, documents.getElementsByClassName anstelle von documents.getElementById auszuführen. Ich möchte id verwenden, aber da die Schleife die Schaltflächen erstellt, weiß ich nicht, wie ich die IDs eindeutig machen kann. Ich denke an etwas in der Art, wie ich die ID zum Zähler der Schleife mache oder so, und speichere sie dann in einer Variablen, auf die ich im Skript verweisen kann, damit ich getElementsById ($ someVariable) ausführen kann.

Vielen Dank für Ihren Blick!

<?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>
1
Hans V.

Sie haben Recht, Sie sollten eine ID verwenden.

Ich würde einen Zähler in Verbindung mit get_the_ID () verwenden;

$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;

Dies gibt Ihnen eine eindeutige ID, die Sie für jedes Element in der Schleife verwenden können.

In WordPress ist die Variable $ index integriert. Wir könnten dies folgendermaßen umschreiben:

$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

Problem gelöst! Nochmals vielen Dank admcfajn für die Hilfe. Ich bin nicht den genauen Weg gegangen, den Sie vorgeschlagen haben, aber Ihre Antworten haben mich definitiv in die richtige Richtung geführt und mich dazu veranlasst, mein Problem zu lösen.

Unten finden Sie den fertigen Code für die Seitenvorlage, einschließlich des JS, das sich in der while-Schleife befindet, für alle, die auf diesen Beitrag stoßen würden.

EDIT: Ich hatte vergessen, auch eine Variable für die ID des Schließen-Buttons zu machen. Unten habe ich den Code geändert, um auch die Schaltfläche Schließen einzuschließen :)

<?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;
?>

Unten finden Sie auch das Stylesheet, mit dem dies alles ordnungsgemäß funktioniert, da das Javascript es ein- oder ausschaltet.

.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.