Support

Account

Register Login

Home › Forums › Add-ons › Repeater Field › Use of repeater field with conditional logic

Solving

Use of repeater field with conditional logic

  • Hello

    I’m using the Repeater field with conditional logic to display 1 of 4 optional content types within a row (Image, WYSIWYG, Quotation, Video) and the ability to create multiple rows each displaying a different content type as selected. It generally seems to be working as intended, except that I’m noticing some of the content choices are being repeated on the front-end even if they are not selected to display as part of the conditional logic in the CMS.

    It also appears that the content I’m adding into each new “slide” or row in the repeater remains stuck in the conditional logic so if I change one row from an Image to a Quotation the image content is still retained in the CMS. Furthermore, if I create a totally new row in the repeater it seems automatically load the previously chosen content into the new row.

    I’ve got some sort of looping feedback happening that I can’t quite figure out..

    Am I using the repeater field + conditional logic correctly?

    Example of Repeater Field in CMS: https://ibb.co/qFNSXt9

    Example of Repeater Field Code:

          <!-- SLIDE REPEATER -->
      <?php if( have_rows('portfolio_repeater') ): ?>
        <ul class="slides">
        <?php while( have_rows('portfolio_repeater') ): the_row(); ?>
          <li class="slide">

            <!-- IMAGE (FULL-WIDTH) -->
            <?php if( get_sub_field('image_fullwidth') ): ?>
              <img src="<?php echo the_sub_field('image_fullwidth'); ?>" class="full-width" />
            <?php endif; ?>

            <!-- WYSIWYG -->
            <?php if( get_sub_field('image_twothirds') ): ?>
              <div class="container two-thirds">
                <?php echo the_sub_field('image_twothirds'); ?>
              </div>
            <?php endif; ?>

            <!-- TEXT QUOTE -->
            <?php if( get_sub_field('text_content') ): ?>
              <div class="text-slide full-width">
                <?php echo the_sub_field('text_content'); ?>
              </div>
            <?php endif; ?>

            <!-- VIDEO -->
            <?php if( get_sub_field('video_content') ): ?>
              <div class="embed-container">
                <?php echo the_sub_field('video_content'); ?>
              </div>
            <?php endif; ?>

            <?php echo $content; ?>
          </li>
        <?php endwhile; ?>
        </ul>
      <?php endif; ?>
      <!-- END SLIDER REPEATER -->

  • I have just discovered an answer to my issue via:

    https://support.advancedcustomfields.com/forums/topic/repeater-radio-button-bug/

    However, since this is not defined as a true “bug” I am wondering if there is alternative way to approach this type of build anyone could possibly share with me?

  • I think the main issues is a misunderstanding for a lot of people that have this problem. Conditional login only controls what is visible in the admin.

    1) You create a field like a radio field
    2) You set logic on other fields to display or not display a field based on the other field.

    This does not control what is saved in any of the fields you set up in #2 nor will it alter what has already been saved.

    It cannot be assumed that because a field has a value that the radio field it is conditional on is set a specific way, this is backwards logic. You need to check how the radio field is set and then proceed to show the field that is dependent on the choice made.

    Example:

    
if (have_rows('repeater')) {
  ?>
    <ul>
      <?php 
        while (have_rows('repeater')) {
          the_row();
          ?>
            <li>
              <?php 
                $content_type = get_sub_field('content_type');
                switch ($content_type) {
                  case 'video':
                    the_sub_field('video');
                    break;
                  case 'text':
                    the_sub_field('text');
                    break;
                  case 'image':
                    the_sub_field('image');
                    break;
                  case 'ect....':
                    // something else
                    break;
                } // end switch
              ?>
            </li>
          <?php 
        } // end while have_rows
      ?>
    </ul>
  <?php 
} // end if have_rows

    the switch above could also be written using multiple if’s, but I like switches.

    
if ($content_type == 'video') {
  the_sub_field('video');
} elseif ($content_type == 'text') {
  the_sub_field('text');
} elseif (.... etc...

    As far as added previously chosen content into a new row. That is harder to explain.

    Let’s say that I have 2 rows, the first is set to an image and the second is set to text. I then add a 3rd row, but I place it 2nd in the list and I make this new row an video field.

    before:
    1) image
    2) text

    after
    1) image
    2) video
    3) text

    In this case, the second row will retain the original text value from before the update. Because the second row was changed to “video” the “text” field associated with this row is hidden and not submitted. Since it is not submitted it is not updated. The main reason for this is data validation. ACF does not look at the conditional logic when a submission is made. It will not look at, for example, the text field, and check the conditional logic on that row to see if text was selected. Data validation is only concerned with the value of the field being submitted. ACF bypasses validation on the field by not submitting the value. This is what makes it possible to not set a value in a required field when that field is hidden by conditional logic.

  • Wow thank you! The explanation was very helpful and the example added a bit to my understanding of PHP and ACF. Very much appreciated.

    By your example of both ‘switch’ and ‘if’ method it looks that I may have solved the issue of content being repeated and retained in each row. However, I’m not able to actually to continue any further with this method without being able to assign an ID or class to each of the 4 potential radio button selections.

    The output is correct, but it needs a container and formatting.

    Is there anyway to integrate a <div> container to wrap around each of the options, or at least assign an ID or Class to each one?

    Example of what I have working now:

    if ($content_type == 'image') {
  the_sub_field('image_content');
} 
elseif ($content_type == 'wysiwyg') {
  the_sub_field('wysiwyg_content');
} 
elseif ($content_type == 'quote') {
  the_sub_field('text_content');
} 
elseif ($content_type == 'video') {
  the_sub_field('video_content');
}

    And example of what I’m trying to accomplish (I know this is incorrect, but this is my brute example):

    elseif ($content_type == 'video') {
  <div class="full-width">the_sub_field('video_content');</div>
}

  • I didn’t include that markup for brevity.

    but the code you posted is essentially correct, you just need to add a few php close/open tags for the markup bits

    
elseif ($content_type == 'video') {
  ?><div class="full-width"><?php the_sub_field('video_content'); ?></div><?php 
}

  • Thank you, John! I’m well on my way now : D

    Just curious… it seems that I may have essentially built a Flexible Content field type via the Radio Button method described above.

    If I’ve got the Radio Button method working as intended is there any advantage to using the Flexible Content field instead for this linear sort of page building? Just the slight difference in interface would be my guess.

    Just asking for anyone else who may be in a similar situation looking at this thread.

    All the best!

  • It’s mostly the difference in interfaces. For simple things like what you’re doing a repeater is likely a good choice. A flex field takes it to the next level where there are many differences between rows. I am working on a complex project now that uses a flex field. If I tried to use a radio field I’d have many hundreds of fields in a single repeater and I’d have to set conditional logic on hundreds of fields and I’d need to make sure I named every one of the repeater sub fields uniquely. Then on top of that I’d need to built the conditionals into my templates making the coding far more complex. In this case, the layout name takes the place of the radio field and I can load different template parts based on that name in order to reduce code complexity.

    In a nutshell, a repeater field is best when all of rows will have mostly the same fields and type of content while a flex field is best when there will be many differences between the rows. However, you need to weigh the differences against the usability of the interface. A repeater with a single field that changes based on a radio button is far easier to work with for the average person than a flex field would be when used for the same purpose.

  • Thank you John,

    Your switch code here was exactly what I needed. I was able to show/hide sections in Oxygen based on the repeater to show product descriptions, I am not a coder by any means, your explanation and code example was so easy to understand and implement though.

    Really appreciate it.

    macaulus

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Use of repeater field with conditional logic’ is closed to new replies.