【发布时间】:2018-07-05 17:40:07
【问题描述】:
我有一个嵌套的 ACF 中继器:
section_container(父中继器)
section_heading(文本字段)sub_section_container(子转发器)
sub_section_heading(文本字段)food_item(子子中继器)
item_name(文本) item_description(文本)价格(文本)
所有这些都需要包含在 div Section_01 中,这将出现在第一个“选项卡”部分内容中,选项卡标题取自文本字段“section_heading”。部分标题将是诸如 Starters / Mains / Sweets / Drinks 之类的东西
如果用户在后端“section_container”中添加一行,则会重复上述所有操作,但需要将其包装在名为 Section_02 的 div 中,以便在下一个选项卡中显示。这是通过计数器实现的 - 因为我不想要预先确定的部分/行数。
目前,不是所有来自父转发器“section_container”的内容都显示在单个 div 中,而是获取每个单个数组输出,然后将该内容包装在一个 div 中。
我得到的是:
<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>
我想要的是:
<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 -->
【问题讨论】:
-
请添加 $menu_contents 区域的字段设置屏幕截图或短视频。
-
@DanielVickers 添加。干杯
标签: php foreach repeater advanced-custom-fields