Tab contents with ACF Nested Repeater - php

Question

I have a nested ACF repeater:
section_container (parent repeater)
section_heading (text field) sub_section_container (sub repeater)
sub_section_heading (text field) food_item (sub sub repeater)
item_name (text) item_description (text) price (text)
All of which needs to be wrapped in div Section_01 this will then appear in the first "tab" section contents, with the tab heading taken from the text field "section_heading". Section headings will be things like, Starters / Mains / Sweets / Drinks
If the user adds a row in the back end "section_container" this repeats all of the above, but this needs to be wrapped in a div called Section_02 in order for it to be displayed in the next tab. This is achieved via a counter - as I don't want a pre determined number of sections / rows.
At the moment rather than ALL of the content from parent repeater "section_container" being displayed within a single div, it's taking each single array output and then wrapping that content in a div.
What I get is:
<div class="section_01">
Starter item 1 Start Price 1 Starter Description 1
</div>
<div class="section_02">
Starter item 2 Start Price 2 Starter Description 2
</div>
What I want is:
<div class="section_01">
Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2
</div>
<div class="section_02">
Mains item 1 Mains Price 1 Mains Description 1
Mains item 2 Mains Price 2 Mains Description 2
</div>
<?php
/**
* Template part for displaying the food menu
*
* #package GL_Apollo
*/
?>
<script>
function openSection(evt, sectionName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(sectionName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<div class="food-menu-container">
<div class="menu-title"><?php the_field('menu_title'); ?> </div>
<!-- Tab links -->
<div class="food-menu-tab-container">
<div class="tab">
<?php
$counter_tab = 1;
if( have_rows('section_container') ) :
while( have_rows('section_container') ): the_row();
$section_name = array( get_sub_field('section_heading') );
foreach ($section_name as $section_names) {?>
<button class="tablinks" onclick="openSection(event, 'section_0<?php echo $counter_tab; ?>')">
<?php echo $section_names; ?>
</button>
<?php $counter_tab++; // increment before foreach ends
}
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
<!-- Food content -->
<div class="menu-section-container">
<?php
$counter = 1;
// check if the repeater field has rows of data
if( have_rows('section_container') ):
// loop through the rows of data
while ( have_rows('section_container') ) : the_row();
if( have_rows('sub_section_container') ):
// loop through the rows of data
while ( have_rows('sub_section_container') ) : the_row();
$sub_head = get_sub_field('sub_section_heading');
if( have_rows('food_item') ):
// loop through the rows of data
while ( have_rows('food_item') ) : the_row();
$item = get_sub_field('item_name');
$price = get_sub_field('price');
$description = get_sub_field('item_description');
$menu_content = array (
"<div class='sub_head'>$sub_head</div>" . "<div class='item'>$item</div>" . "<div class='price'>$price</div>" . "<div class='description'>$description</div>"
);
foreach ($menu_content as $menu_contents); { ?>
<div id="section_0<?php echo $counter; ?>" class="tabcontent">
<?php echo $menu_contents ; ?>
</div>
<?php $counter++; // increment before foreach ends
}
endwhile;
endif;
endwhile;
endif;
endwhile;
endif;
echo '<pre>';
var_dump( $menu_contents );
echo '</pre>';
?>
</div> <!-- section -->
</div> <!-- menu-section-container -->
<span class="btn" data-glf-cuid="0c1de6b2-1ca9-4202-b790-3cd5a62af2b3" data-glf-ruid="9e6118c3-d144-4511-973e-d7d7f7418e1a" ><?php the_field('order_button'); ?></span>
<script src="https://www.fbgcdn.com/widget/js/ewm2.js" deferasync ></script>
</div> <!-- food-menu-container -->

Answer 1

Forgive me for trying to understand the question however, is it simply the case you're wanting to wrap a div around each food item section rather than each food item?
If this is the case, you can add a div between the if and while statements for the food_item.
<?php $foodItem == 1; ?>
<?php if( have_rows('food_item') ): ?>
<div class="section_<?php echo $foodItem; ?>">
<?php while( have_rows('food_item') ): the_row(); ?>
<?php the_field('item_name'); ?>
<?php the_field('item_description'); ?>
<?php the_field('price'); ?>
<?php $foodItem++; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
This should give you the outcome of:
<div class="section_1">
Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2
</div>
<div class="section_2">
Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2
</div>
If I have missed something, let me know.

Answer 2

M. Ferguson is correct in what he says, however the tabs section could also do with some cleaning up. Here is the complete cleaned up code. This should work if it does not let me know.
<script>
function openSection(evt, sectionName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(sectionName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<div class="food-menu-container">
<div class="menu-title"><?php the_field('menu_title'); ?> </div>
<!--Menu Tabs-->
<div class="food-menu-tab-container">
<?php $tabNumber = 1;
if( have_rows('section_container') ) :
<div class="tab">
while( have_rows('section_container') ): the_row();
$section_name = get_sub_field('section_heading');?>
<button class="tablinks" onclick="openSection(event, 'section_0<?php echo $tabNumber; ?>')">
<?php echo $section_name; ?>
</button>
<?php $counter_tab++;
endwhile;?>
</div>
<?php endif;?>
</div>
</div>
<div class="menu-section-container">
<!--Food Menu-->
<?php $foodItem = 1; ?>
<?php if( have_rows('food_item') ): ?>
<div class="section_0<?php echo $foodItem; ?> section">
<?php while( have_rows('food_item') ): the_row(); ?>
<!--Add styling: .section .section_inner > div {display:inline-block;}-->
<div class="section_inner_0<?php echo $foodItem; ?> section_inner">
<div class="sub_head"><?php get_sub_field('sub_section_heading');?> </div>
<div class="item"><?php the_field('item_name'); ?> </div>
<div class="price"><?php the_field('item_description'); ?> </div>
<div class="description"><?php the_field('price'); ?></div>
<?php $foodItem++; ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
</div>
<span class="btn" data-glf-cuid="0c1de6b2-1ca9-4202-b790-3cd5a62af2b3" data-glf-ruid="9e6118c3-d144-4511-973e-d7d7f7418e1a" ><?php the_field('order_button'); ?></span>
<script src="https://www.fbgcdn.com/widget/js/ewm2.js" deferasync ></script>
Outcome HTML:
<div class="section_01">
<div class="section_inner_01 section_inner">
<div class="sub_head">Starter </div><div class="item">item 1 </div><div class="item_price">Start Price 1 </div><div class="description">Starter Description 1</div>
</div>
<div class="section_inner_01 section_inner">
<div class="sub_head">Starter </div><div class="item">item 2 </div><div class="item_price">Start Price 2 </div><div class="description">Starter Description 2</div>
</div>
</div>
<div class="section_02">
<div class="section_inner_02 section_inner">
<div class="sub_head">Starter </div><div class="item">item 1 </div><div class="item_price">Start Price 1 </div><div class="description">Starter Description 1</div>
</div>
<div class="section_inner_02 section_inner">
<div class="sub_head">Starter </div><div class="item">item 2 </div><div class="item_price">Start Price 2 </div><div class="description">Starter Description 2</div>
</div>
</div>
Outcome Front End:
Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2