Wordpress with Advanced Custom Fields showing post content in Modal

0
votes

I am have a little issue coding a WordPress website with Advance Custom Fields and a modal.

How can I incorporate the modal with the Advanced Custom Fields? Currently the modal just shows a generic name and company.

When I move the modal into the loop it shows the content for every post.

Pastebin link here

Thanks Paddy

2
wordpressmodal-dialogadvanced-custom-fields
That is exactly what you have to do... move the modal into the loop (the acf loop) to show the correct data for each company. If you only want to have one modal on the page showing different data for each company, you'll have to do it with ajax. - alpipego
Thanks for your reply Alpipego. Could you point me in the direction of some documentation on how I can do it with ajax? - paddywinz
Are you showing your modal with js/jquery? if yes, could you supply a little code please? - alpipego
This is the jQuery I am using to call it in. pastebin.com/RBKgVwkw - paddywinz

2 Answers

1
votes

It looks like I have sorted it out by using data attributes. 

    <div class="content row">
   <ul class="slides">
    <?php query_posts( 'showposts=-1&orderby=asc&category_name=speakers' ); ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <?php if( have_rows('speakers') ): ?>
                <?php while( have_rows('speakers') ): the_row(); ?>

                    <?php $image = get_sub_field('photo'); ?>
                    <?php $company = get_sub_field('company'); ?>
                    <?php $bio = get_sub_field('bio'); ?>

                    <li class="slide col25 js-open-modal">
                        <a href="#modal1" class="easy-modal-open js-modal-open" data-post-id="<?= get_the_ID(); ?>" data-image-url="<?php echo $image['url']; ?>" data-image-alt="<?php echo $image['alt'] ?>" data-title="<?php echo the_title(); ?>" data-company="<?php echo $company; ?>" data-bio="This is the bio text">
                        <img class="logo" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
                        <h4 class="overlay"><?php echo the_title(); ?><br /><?php echo $company; ?></h4></a>
                    </li>

                <?php endwhile; ?>
            <?php endif; ?>
        <?php endwhile; ?>
    <?php wp_reset_query(); ?>
</ul>
</div>        


<div class="easy-modal js-modal" id="modal1">
<div class="easy-modal-inner">
    <img class="logo js-logo" src="" alt="" />
    <h4><span class="js-title"></span><span class="js-company"></span></h4>
    <p class="js-bio"></p>
    <button class="easy-modal-close" title="Close">&times;</button>
</div>
</div>

// and then using this in my js

var modal = $('.js-modal'),
    modalTrigger = $('.js-modal-open');

modalTrigger.on('click', function(e){
e.preventDefault();
var t = $(this),
        url = t.data('image-url'),
        alt = t.data('image-alt'),
        title = t.data('title'),
        company = t.data('company'),
        bio = t.data('bio');

updateModal(modal, url, alt, title, company, bio);
// open modal here unless the plugin you are using opens its self?
});

function updateModal(elm, url, alt, title, company, bio) {
elm.find('img').attr('src', url);
elm.find('img').attr('alt', alt);
elm.find('.js-title').text(title);
elm.find('.js-company').text(company);
elm.find('.js-bio').text(bio);
}
0
votes

Add the post id to your link that you are opening the modal with (this will be used to pass the post id to the ajax function):

<li class="slide col25">
    <a href="#modal1" class="easy-modal-open" data-post-id="<?= get_the_ID(); ?>">
    //img and h4
    </a>
</li>

use wp_localize_script to pass the ajaxurl to your jquery:

wp_localize_script( 'my_modal', 'my_modal_localize', array(
    ajaxurl => admin_url('admin-ajax.php')
) );

add a function to query the correct company to your functions.php (something like you have above):

add_action( 'wp_ajax_custom_function', 'get_company_modal' );
add_action( 'wp_ajax_nopriv_custom_function', 'get_company_modal' );

function get_company_modal() {
    $args = array(
        p => $_POST['post_id'], //this is the post id passed via jquery.post()
    );

    $query = new WP_Query( $args );

    $result = array();

    if( $query->have_posts() ) {
        while( $query->have_posts() ) {
            $query->the_post();

            // get all your custom fields here and add them to the $result array
            $result[ $custom_field_key ] = $custom_field_value;

        }
    }

    echo json_encode( $result );
    die();
}

and then add the call to the click event in your jquery using .post()

$('.easy-modal-open').click(function(e) {
    var data = {
        action: 'custom_function', //see the add_action part above
        post_id: $(this).data('post-id'), //this is the post id from the a data attribute
    }

    $.post( my_modal_localize.ajaxurl, data, function(response) {
        var customFields = $.parseJSON(response);

        // add the custom fields to your output via e.g. append()
    }
    // and THEN open the modal 
    var target = $(this).attr('href');
    $(target).trigger('openModal');
    e.preventDefault();
});

maybe you'll need to add a $.when().then() but that depends on the situation.

So this is only an example and one way of achieving what you want. You will of course edit it to suit your situation.