0
votes

I have a nested repeater field.

The nested part is a modal window, which when open expands on the second repeater field. But when everything is filled out the modal window displays the info from the first item in the loop.

This is how it should be working: http://pagedev.co.uk/hoppings/product-sector.php#

Here is my code:

    <div class="container">

        <?php while( have_rows('product_sections') ): the_row(); ?>


        <div class="sector-heading">
            <img src="<?php the_sub_field('section_logo'); ?>">
            <div><?php the_sub_field('section_intro'); ?></div>
        </div>


            <?php if( have_rows('products') ): ?>


                <div class="grid-wrapper">


                    <?php while( have_rows('products') ): the_row(); ?>


                        <!--Start Single Product-->
                        <div class="grid-item">

                            <div class="image-hovers">
                                <img src="<?php the_sub_field('thumbnail'); ?>">
                                <a class="js-open-modal" href="#" data-modal-id="popup"><div class="product-hover"></div></a>
                            </div>

                            <div class="grid-title">
                                <h2><?php the_sub_field('product_name'); ?></h2>
                            </div>

                        </div>


                                <!--Start Single Product Modal-->
                                <div id="popup" class="modal-box"> 

                                    <a href="#" class="js-modal-close close">×</a>

                                    <div class="modal-wrap">

                                        <div class="modal-img">
                                            <img src="<?php the_sub_field('thumbnail'); ?>">
                                        </div>

                                        <div class="modal-content">
                                            <h2><?php the_sub_field('product_name'); ?></h2>
                                            <p><strong><?php the_sub_field('product_size'); ?></strong></p>
                                            <hr>
                                            <?php the_sub_field('product_description'); ?>
                                            <a href="<?php the_sub_field('product_description'); ?>"><div class="modal-stockist">Find a Stockist</div></a>
                                            <a href="<?php the_sub_field('literature_link'); ?>"><div class="modal-literature">Literature</div></a>
                                        </div>

                                    </div>

                                </div>
                                <!--Close Single Product Modal-->



                        <?php endwhile; // end of the loop. ?>

                </div>
                <!--End Grid Wrapper-->

            <?php endif; ?>
            <!-- Close product repeater field -->


        <?php endwhile; // end of the loop. ?>


    </div>
    <!--End Container-->

Any help would be great!

Lee

1

1 Answers

0
votes

I figured it out. Something so simple!

My modal window needed a unique ID for each product!

All solved :)