Templates 更改variable.php后为WooCommerce发布的值无效

我在WooCommerce网站上有一个可变产品。出于样式的原因，我正在修改/single product/add to card/variable.php。目前，它位于WooCommerce提供的表结构中

我试着把我的变化放在引导折叠div中，使它看起来更整洁，从而摆脱了桌子。我远道而来。我的变体下拉列表是可见的，可折叠div可以工作。还显示了这些变体的正确选项

然而，当我将它们添加到我的购物车时，并不是所有的变体都有效，这给了我一条消息：发布的值无效，在本例中为循环

我查看了add-to-cart-variation.js文件，该文件基于我读到的一个关于类似问题的主题，但运气不佳

我的猜测是，由于DOM中的更改，JavaScript文件再也找不到正确的元素了。我当前的variable.php如下所示：我使用Blade作为模板引擎：

/**
 * Variable product add to cart
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/variable.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 3.5.5
 */

defined( 'ABSPATH' ) || exit;

global $product;

$attribute_keys  = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );

do_action( 'woocommerce_before_add_to_cart_form' ); ?>

<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
    <?php do_action( 'woocommerce_before_variations_form' ); ?>

    <?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
        <p class="stock out-of-stock"><?php echo esc_html( apply_filters( 'woocommerce_out_of_stock_message', __( 'This product is currently out of stock and unavailable.', 'woocommerce' ) ) ); ?></p>
    <?php else : ?>
        <table class="variations" cellspacing="0">
            <tbody>
                <div id="accordion">
                    @foreach ($attributes as $attribute_name => $options ) @php $index = 1; @endphp

                        <button class="btn btn-link accordion-btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" onclick="event.preventDefault();">
                            <div class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></div><i class="fas fa-caret-down"></i>
                        </button>

                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                            <div class="card-body value">
                                <div class="value">
                                    <?php
                                        wc_dropdown_variation_attribute_options(
                                            array(
                                                'options'   => $options,
                                                'attribute' => $attribute_name,
                                                'product'   => $product,
                                            )
                                        );
                                        echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
                                    ?>
                                </div>
                            </div>
                        </div>

                    @php $index++ @endphp @endforeach

                    <button class="btn btn-link accordion-btn" data-toggle="collapse" data-target="#productDescription" aria-expanded="true" aria-controls="collapseOne" onclick="event.preventDefault();">
                        Description<i class="fas fa-caret-down"></i>
                    </button>

                    <div id="productDescription" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                        <div class="card-body">
                            {{ $product->get_description() }}
                        </div>
                    </div>
                </div>
            </tbody>
        </table>

        <div class="single_variation_wrap">
            <?php
                /**
                 * Hook: woocommerce_before_single_variation.
                 */
                do_action( 'woocommerce_before_single_variation' );

                /**
                 * Hook: woocommerce_single_variation. Used to output the cart button and placeholder for variation data.
                 *
                 * @since 2.4.0
                 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
                 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
                 */
                do_action( 'woocommerce_single_variation' );

                /**
                 * Hook: woocommerce_after_single_variation.
                 */
                do_action( 'woocommerce_after_single_variation' );
            ?>
        </div>
    <?php endif; ?>

    <?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>

<?php
do_action( 'woocommerce_after_add_to_cart_form' );

---

如果需要其他信息，请告诉我

我在WC设置中看到了相同的错误，使用默认模板文件。对我来说，这似乎是WC中的一个bug，当您在分配属性Product Data>Attributes之后更改属性时，就会发生这种情况。在某个地方，WC松开了与定义的变体产品数据>变体的连接。如果我重新分配所有变量，或者从头开始重新生成变量，那么一切都会恢复正常。这很难复制，但不知何故，我的客户总是设法打破它：

所以，在搜索代码之前，请确保您的问题与我的问题不同

编辑：我发现它与我的自定义选择输入有关。我使用selectric.js为我的select下拉列表设置每个变体的自定义颜色。 当我删除selectric.js时，错误不会显示。 但是，重新生成变体仍然有帮助。我将试图找出为什么会发生这种情况，以及它是否对您有帮助

---

更新：selectric.js和WC的javascript之间有一个神秘的冲突。我已经用Select2替换了selectric.js，WC本身也使用Select2。当我收到该错误时，它与表单发送的不正确的$\u会话数据有关。我认为你的问题和我的不同，但有点奇怪。很抱歉，我无法进一步帮助您，祝您好运。

谢谢@matiyin！我期待着你的发现。