【问题标题】:Tab contents with ACF Nested Repeater使用 ACF 嵌套中继器的选项卡内容
【发布时间】: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


【解决方案1】:

请原谅我试图理解这个问题,您是否只是想在每个食品部分而不是每个食品周围包装一个 div?

如果是这种情况,您可以在ifwhile 语句之间为food_item 添加一个div。

<?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; ?>

这应该会给你以下结果:

<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>

如果我遗漏了什么,请告诉我。

【讨论】:

  • 他想在每个单独的字段周围包裹一个 div,例如名称,描述,价格,你也错过了他称之为子标题的地方。
  • @M.弗格森 谢谢。我有一个嵌套中继器。 section_container (parent) 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) 所有这些都需要包裹在 div Section_01 这将出现在第一个“选项卡”部分的内容具有选项卡标题“状态”。如果用户在后端“section_container”中添加一行,这将重复上述所有操作,但需要包装在名为 Section_02 的 div 中。这有帮助吗?
【解决方案2】:

M.弗格森的话是正确的,但是标签部分也可以做一些清理工作。这是完整的清理代码。如果它没有让我知道,这应该可以工作。

<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>

结果 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>

结果前端:

Starter item 1 Start Price 1 Starter Description 1
Starter item 2 Start Price 2 Starter Description 2

【讨论】:

  • 嗨,丹尼尔,谢谢。我有一个嵌套的中继器(请参阅对上述问题的评论,这应该有助于更好地澄清事情)标签标题也需要像现在一样工作。您的解决方案似乎失去了这一点?
  • 我还修改了问题以便(希望)更好地澄清!
  • 嗨,Paul,我基本上已经更改了您的选项卡按钮以更好地工作,而不是复制按钮,而是复制带有按钮的选项卡。我会恢复你的工作版本没问题。
  • 我不确定我是否关注?你看到我修改后的问题了吗?
  • 我已经通过代码将按钮恢复到原来的样子,现在可以使用了吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-03-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多