Erstelle eine eindeutige ID für jedes Repeater-Feld

Question

Ich muss eine eindeutige ID für jede Produktbox auf der Seite ausgeben, da sie für jedes ein modales Fenster haben.

Ich weiß, wie eine eindeutige ID für jedes Repeater-Feld in einer Schleife echo.

ABER .. Ich habe einen Repeater innerhalb eines Repeaters. Es startet nur die Schleife für jedes Repeater-Feld und ich bekomme nur die gleichen Zahlen.

Siehe das Bild unten. (Es sollte bis 8 gehen), aber seine Start der wieder Schleife und so erreicht nur 4.

Hier ist mein Code:

<div class="container"> 

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

      $intro = get_sub_field('section_intro'); 
      $logo = get_sub_field('section_logo'); 

      ?> 


       <div class="sector-heading"> 
        <img src="<?php echo $logo; ?>"> 
        <div><?php echo $intro; ?></div> 
       </div> 


        <?php if(have_rows('products')): ?> 
         <?php $counter = 1; //this sets up the counter starting at 0 ?> 

         <div class="grid-wrapper"> 


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

           $id = get_sub_field('id'); 
           $name = get_sub_field('product_name'); 
           $thumbnail = get_sub_field('thumbnail'); 
           $size = get_sub_field('product_size'); 
           $description = get_sub_field('product_description'); 
           $stockist = get_sub_field('stockist_link'); 
           $literature = get_sub_field('literature_link'); 

           ?> 


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

            <div class="image-hovers"> 
             <img src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt'] ?>" title="<?php echo $thumbnail['title'] ?>"/> 
             <a class="js-open-modal" href="#" data-modal-id="<?php echo $id; ?>"><div class="product-hover"></div></a> 
            </div> 

            <div class="grid-title"> 
             <h2><?php echo $counter; // Prints the number of counted row ?> 
             </h2> 
            </div> 

           </div> 


            <!--Start Single Product Modal--> 
            <div id="<?php echo $id; ?>" class="modal-box"> 

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

             <div class="modal-wrap"> 

              <div class="modal-img"> 
               <img src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt'] ?>" title="<?php echo $thumbnail['title'] ?>" /> 
              </div> 

              <div class="modal-content"> 
               <h2><?php echo $name; ?></h2> 
               <p><strong><?php echo $size; ?></strong></p> 
               <hr> 
               <?php echo $description; ?> 

               <br> 
               <?php if($stockist): ?> 
                <a href="<?php echo $stockist; ?>"><div class="modal-stockist">Find a Stockist</div></a> 
               <?php endif; ?> 
               <?php if($literature): ?> 
                <a href="<?php echo $literature; ?>"><div class="modal-literature">Literature</div></a> 
               <?php endif; ?> 
               <br></br> 
              </div> 

             </div> 

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


           <?php $counter++; // add one per row ?> 
          <?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--> 

Answer 1

denken wie Computer, während Sie die Codierung tun

in n sierte Schleife versucht IDs, um die Elemente zu geben, wie

verschachtelt

so verschachtelte modal Startlinie ändern, um

in Ihrem Fall Sie verwenden $ counter für jeden Produkteintrag. Verwenden Sie es für jede Zeile oder Produktlinie. für das Verschieben der $ counter = 1; Zeile vor dem Beginn der ersten While-Schleife.

<div id="<?php echo $id; ?>" class="modal-box"> 

zu

<div id="<?php echo $counter.$id; ?>" class="modal-box"> 

wie $ Zähler gibt an, welche Zeile und $ id erzählt, welches Produkt und sie beide erzählt das spezifische Produkt aus jeder Zeile. es wird dann eindeutig sein ...

vergessen Sie nicht, $ counter mit $ id, wo Sie das Initialisieren der js für die modale