php - Woocommerce 产品选项卡的不同状态

Question

我最近接到了维护旧 WP 站点的任务，但在弄清楚如何在重复元素上设置状态时遇到了一些麻烦。该网站使用 WooCommerce 插件，其中有被覆盖的模板。其中一个模板称为选项卡，本质上是一个带有附加产品信息的可切换表格。在这个特定的应用程序中，每个产品都有两个选项卡。现在的问题是，当您单击一个选项卡将其打开时，其图标会从“+”变为“-”。执行此操作时，两个选项卡上的图标会同时切换。因此，即使只打开一个选项卡，另一个关闭的选项卡也有一个“-”。可悲的是，我从来没有使用过 Wordpress 或 PHP，所以这对我来说都是非常陈旧的。这是模板:

<?php
/**
 * Single Product tabs
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 2.4.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Filter tabs and allow third parties to add their own.
 *
 * Each tab is an array containing title, callback and priority.
 * @see woocommerce_default_product_tabs()
 */
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

if ( ! empty( $tabs ) ) : ?>

    <div class="woocommerce-tabs wc-tabs-wrapper container">
        <div class="accordion" role="tablist" id="product-accordion">
            <div class="accordion-item">
                <?php foreach ( $tabs as $key => $tab ) : ?>
                    <div class="border-bottom border-dark pb-1 pt-3 my-4 <?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
                        <a class="h5 text-uppercase" data-toggle="collapse"  href="#collapse-<?php echo esc_attr( $key ); ?>">
                            <?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?>

                            <span class="handle float-right handle--collapsed"><i class="icon icon-plus"></i></span>
                            <span class="handle float-right handle--open"><i class="icon icon-minus"></i></span>    
                        </a>
                    </div>
                    <div class="collapse" id="collapse-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>" data-parent="#product-accordion">
                        <?php if ( isset( $tab['callback'] ) ) { call_user_func( $tab['callback'], $key, $tab ); } ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

<?php endif; ?>

Answer 1

尝试使用下面的代码

<?php
/**
 * Single Product tabs
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 2.4.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Filter tabs and allow third parties to add their own.
 *
 * Each tab is an array containing title, callback and priority.
 * @see woocommerce_default_product_tabs()
 */
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

if ( ! empty( $tabs ) ) : ?>
    <div class="woocommerce-tabs wc-tabs-wrapper container">
        <div class="accordion" role="tablist" id="product-accordion">
            <div class="accordion-item">
                <?php $i = 1; ?>
                <?php foreach ( $tabs as $key => $tab ) : ?>

                    <?php 
                    if($i==1){
                        $collapsein=' in';
                        $icon = 'glyphicon-minus';
                    }else{
                        $collapsein=' ';
                        $icon = 'glyphicon-plus';
                    } 

                    ?>
                    <div class="show bs">
                        <div class="panel-heading border-bottom border-dark pb-1 pt-3 my-4  <?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
                            <h4 class="panel-title">
                                <a class="h5 text-uppercase" data-toggle="collapse"  href="#collapse-<?php echo esc_attr( $key ); ?>">
                                    <span class="glyphicon <?php echo $icon; ?>"></span>

                                    <?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?>


                                </a>
                            </h4>
                        </div>

                        <div class="collapse <?php echo $collapsein; ?>" id="collapse-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>" data-parent="#product-accordion">
                            <?php if ( isset( $tab['callback'] ) ) { call_user_func( $tab['callback'], $key, $tab ); } ?>
                        </div>
                    </div>
                <?php 
            $i++;
            endforeach;

             ?>
            </div>
        </div>
    </div>
<script>
    jQuery(document).ready(function(){
        // Toggle plus minus icon on show hide of collapse element
        jQuery(".collapse").on('show.bs.collapse', function(){
            jQuery(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hide.bs.collapse', function(){
            jQuery(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    });
</script>
<?php endif; ?>