Question

对于一个可能相当简单的问题表示歉意，但我真的很讨厌 javascript 我在这里碰壁了。

基本上，我一直在将 Woocommerce 购物车页面修改为更可口的内容，并且我想将优惠券部分移到购物篮总计区域，以便它出现在小计下方和运输上方。我已经很容易地把它放在适当的位置，但我希望它只在被点击时出现，对于移动设备来说是这样的：

问题是我希望在单击行上的任何位置时都触发它，但是设置实际 TD 以激活它不起作用并导致您可以在图像控制台中看到的错误。在移动设备上这是 TD，在桌面上是 TH，只是为了让事情变得更复杂，正如您从这个屏幕截图和以下布局代码中看到的：

<tr class="cart-subtotal">
        <th ><?php esc_html_e( 'Coupon', 'woocommerce' ); ?></th>
        <td data-title="<?php esc_attr_e( 'Coupon', 'woocommerce' ); ?>"><span class="accordion add-coupon">+</span>
            <!--<button class="accordion"></button>-->
            <div class="panel">
                <div class="coupon">
                <!--<label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label>-->
                <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> 
                <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>">
                    <?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>
                </button>
                <?php do_action( 'woocommerce_cart_coupon' ); ?>
            </div>
            </div>
        </td>
    </tr>

当面板是独立的 div 和控制它的按钮时，我一直在使用一些 Javascript 来上下滑动面板，但在我的生活中，我无法使用桌子的任何部分作为触发器很好地播放当我觉得我应该能够完成这项工作时，我不想通过尝试解决它来破坏表格的布局。这是 Javascript：

<script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
    });
    }
    </script>

因此，基本上，单击“accordion”类的元素应该会打开或关闭“panel”类的元素。

我一整天都在为此而挣扎，无论我尝试什么，我都无法让它发挥出色点击，所以只有在需要时才有优惠券功能。

非常感谢。

更新

基于@vincenzo-di-gaetano 在下面的回答，我离得更近了。通过以下设置，我使整行（因此微弱的灰色边框线之间的所有内容）都可点击，它们将使表单消失，但一旦消失，它目前不会回来。

<tr class="subtotal-coupon">
        <th ><?php esc_html_e( 'Coupon', 'woocommerce' ); ?></th>
        <td data-title="<?php esc_attr_e( 'Coupon', 'woocommerce' ); ?>"><span class="add-coupon">+</span>
                <div class="coupon">
                <label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label>
                <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> 
                <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>">
                    <?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>
                </button>
                <?php do_action( 'woocommerce_cart_coupon' ); ?>
            </div>
        </td>
    </tr>

略微修改的 jQuery：

add_action( 'wp_footer', 'show_hide_coupon_form' );
function show_hide_coupon_form() {
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $('.cart_totals .subtotal-coupon td').click(function(){
                $('.cart_totals div.coupon').toggle();
                $(this).text( $(this).text() == '+' ? '-' : '+' );
            });
        });
    </script>
    <?php
}

我不明白的是为什么它不会切换而只会消失。

Answer 1

如果 HTML 代码如下：

<tr class="subtotal-coupon">
    <th ><?php esc_html_e( 'Coupon', 'woocommerce' ); ?></th>
    <td data-title="<?php esc_attr_e( 'Coupon', 'woocommerce' ); ?>"><span class="add-coupon">+</span>
        <div class="coupon">
            <label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label>
            <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> 
            <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
            <?php do_action( 'woocommerce_cart_coupon' ); ?>
        </div>
    </td>
</tr>

这是默认隐藏优惠券表单的 CSS 代码：

.cart_totals .subtotal-coupon .coupon {
    display:none;
}

您可以使用以下 jQuery 脚本根据点击 .cart_totals .subtotal-coupon td 元素来显示/隐藏优惠券表单：

add_action( 'wp_footer', 'show_hide_coupon_form' );
function show_hide_coupon_form() {
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $('.cart_totals .subtotal-coupon td').click(function(){
                $('.cart_totals .subtotal-coupon .coupon').toggle();
                $('.cart_totals .subtotal-coupon .add-coupon').text( $(this).text() == '+' ? '-' : '+' );
            });
        });
    </script>
    <?php
}

代码已经过测试并且可以工作。将它添加到您的活动主题的functions.php。

Woocommerce 购物车显示/隐藏优惠券功能

1 个答案: